Skip to content

Commit 9ad1758

Browse files
mavv-codermavv-coder
committed
updating breakpoints
1 parent f617edf commit 9ad1758

File tree

7 files changed

+47
-51
lines changed

7 files changed

+47
-51
lines changed

‎front/src/common-app/components/appbar/appbar.styles.ts

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from 'emotion';
22
import { theme } from 'core/theme';
33

4-
const { palette, spacing } = theme;
4+
const { palette, spacing, breakpoints } = theme;
55
const color = palette.customPalette;
66

77
export const appbarContainer = css`
@@ -16,8 +16,7 @@ export const appbarContainer = css`
1616
white 90%
1717
);
1818
border-bottom: 2px solid ${color.secondary};
19-
20-
@media (max-width: 578px) {
19+
@media (max-width: ${breakpoints.values.sm}px) {
2120
height: auto;
2221
min-height: ${spacing(86)};
2322
flex-direction: column;
@@ -32,38 +31,33 @@ export const logo = (showLinks: boolean): string => css`
3231
height: ${spacing(60)};
3332
fill: ${color.secondary};
3433
margin-left: 2.4rem;
35-
36-
@media (max-width: 578px) {
34+
@media (max-width: ${breakpoints.values.sm}px) {
3735
margin-left: 0;
3836
margin-top: ${showLinks ? '1.5rem' : '0'};
3937
}
4038
`;
4139

4240
export const navContainer = css`
4341
margin-left: auto;
44-
45-
@media (max-width: 578px) {
42+
@media (max-width: ${breakpoints.values.sm}px) {
4643
margin-left: 0;
4744
}
4845
`;
4946

5047
export const navList = css`
5148
display: flex;
5249
list-style: none;
53-
54-
@media (max-width: 578px) {
50+
@media (max-width: ${breakpoints.values.sm}px) {
5551
padding: 0;
5652
}
5753
`;
5854

5955
export const listItem = css`
6056
margin-right: 1.5rem;
6157
overflow: hidden;
62-
6358
&:last-of-type {
6459
margin-right: 2.4rem;
65-
66-
@media (max-width: 578px) {
60+
@media (max-width: ${breakpoints.values.sm}px) {
6761
margin-right: 0;
6862
}
6963
}

‎front/src/common-app/components/footer/footer.styles.ts

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from 'emotion';
22
import { theme } from 'core/theme';
33

4-
const { palette, spacing } = theme;
4+
const { palette, spacing, breakpoints } = theme;
55
const color = palette.customPalette;
66

77
export const footerContainer = css`
@@ -11,12 +11,10 @@ export const footerContainer = css`
1111
height: ${spacing(300)};
1212
padding: ${spacing(20)} ${spacing(100)};
1313
background-color: ${color.secondary};
14-
15-
@media (max-width: 728px) {
14+
@media (max-width: ${breakpoints.values.md}px) {
1615
padding: ${spacing(20)} ${spacing(40)} ${spacing(30)} ${spacing(40)};
1716
}
18-
19-
@media (max-width: 380px) {
17+
@media (max-width: ${breakpoints.values.xs}px) {
2018
height: ${spacing(350)};
2119
}
2220
`;
@@ -27,8 +25,7 @@ export const topContainer = css`
2725
justify-content: space-between;
2826
height: ${spacing(195)};
2927
align-items: center;
30-
31-
@media (max-width: 380px) {
28+
@media (max-width: ${breakpoints.values.xs}px) {
3229
flex-direction: column-reverse;
3330
align-items: center;
3431
justify-content: center;
@@ -48,8 +45,7 @@ export const linkList = css`
4845
padding: 0;
4946
margin: 0;
5047
list-style: none;
51-
52-
@media (max-width: 380px) {
48+
@media (max-width: ${breakpoints.values.xs}px) {
5349
text-align: center;
5450
margin-top: 1.2rem;
5551
}
@@ -69,8 +65,7 @@ export const bottomContainer = css`
6965
justify-content: space-between;
7066
border-top: 1px solid ${color.primary};
7167
padding-top: 1rem;
72-
73-
@media (max-width: 380px) {
68+
@media (max-width: ${breakpoints.values.xs}px) {
7469
flex-direction: column;
7570
align-items: center;
7671
justify-content: center;
@@ -118,7 +113,7 @@ export const githubIcon = css`
118113

119114
export const copyright = css`
120115
color: ${color.greyLight};
121-
@media (max-width: 380px) {
116+
@media (max-width: ${breakpoints.values.xs}px) {
122117
margin-top: 0.4rem;
123118
}
124119
`;

‎front/src/core/theme/theme.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ const defaultTheme = createMuiTheme();
66

77
export const theme: Theme = merge(defaultTheme, {
88
palette: {
9+
background: {
10+
default: '#fff',
11+
},
912
customPalette: {
1013
background: '#fff',
1114
primary: '#d9d900',
@@ -19,4 +22,12 @@ export const theme: Theme = merge(defaultTheme, {
1922
},
2023
},
2124
spacing: (pixel: number): string => `${pixel / 16}rem`,
25+
breakpoints: {
26+
values: {
27+
xs: 380,
28+
sm: 578,
29+
md: 728,
30+
lg: 1100,
31+
},
32+
},
2233
});

‎front/src/pods/create-session/create-session.styles.ts

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,10 @@ export const mainContainer = css`
1616
padding: 0;
1717
width: 100%;
1818
height: calc(100vh - ${spacing(86)});
19-
@media screen and (max-width: 960px) {
19+
@media (max-width: ${breakpoints.values.lg}px) {
2020
background-image: none;
2121
}
22-
23-
@media (max-width: 578px) {
22+
@media (max-width: ${breakpoints.values.sm}px) {
2423
height: calc(100vh - ${spacing(147)});
2524
width: 90%;
2625
margin: 0 auto;
@@ -33,24 +32,20 @@ export const buttonContainer = css`
3332
flex-direction: column;
3433
align-items: center;
3534
margin-left: 15%;
36-
@media screen and (max-width: ${breakpoints.values.md}px) {
35+
@media (max-width: ${breakpoints.values.lg}px) {
3736
margin-left: auto;
3837
margin-right: auto;
3938
}
40-
@media (max-width: 960px) {
41-
margin-left: auto;
42-
}
4339
`;
4440

4541
export const descriptionText = css`
4642
text-align: center;
4743
font-size: 1.8rem;
4844
font-weight: 400;
49-
50-
@media (max-width: 578px) {
45+
@media (max-width: ${breakpoints.values.sm}px) {
5146
font-size: 1.6rem;
5247
}
53-
@media (max-width: 380px) {
48+
@media (max-width: ${breakpoints.values.xs}px) {
5449
font-size: 1.5rem;
5550
}
5651
`;
@@ -80,7 +75,7 @@ export const createSessionBtn = css`
8075
color: white;
8176
outline: none;
8277
}
83-
@media (max-width: 578px) {
78+
@media (max-width: ${breakpoints.values.sm}px) {
8479
color: white;
8580
background: none;
8681
background-color: ${color.alertLight};
@@ -91,7 +86,7 @@ export const createSessionBtn = css`
9186
outline: none;
9287
}
9388
}
94-
@media (max-width: 380px) {
89+
@media (max-width: ${breakpoints.values.xs}px) {
9590
padding: ${spacing(20)} ${spacing(24)};
9691
font-size: 1.2rem;
9792
}
@@ -100,7 +95,7 @@ export const createSessionBtn = css`
10095
export const arrowIcon = css`
10196
margin-left: 0.8rem;
10297
font-size: 2rem;
103-
@media (max-width: 380px) {
98+
@media (max-width: ${breakpoints.values.xs}px) {
10499
font-size: 1.6rem;
105100
}
106101
`;

‎front/src/pods/trainer/components/header.styles.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from 'emotion';
22
import { theme } from 'core/theme';
33

4-
const { palette, typography, spacing } = theme;
4+
const { palette, typography, spacing, breakpoints } = theme;
55
const color = palette.customPalette;
66

77
export const headerContainer = css`
@@ -50,16 +50,15 @@ export const textArea = css`
5050
&::selection {
5151
background: ${color.greyMedium};
5252
}
53-
54-
@media (max-width: 380px) {
53+
@media (max-width: ${breakpoints.values.xs}px) {
5554
font-size: 14px;
5655
padding: 16px;
5756
}
5857
`;
5958

6059
export const copyIcon = css`
6160
font-size: 30px;
62-
@media (max-width: 380px) {
61+
@media (max-width: ${breakpoints.values.xs}px) {
6362
font-size: 26px;
6463
}
6564
`;
@@ -82,8 +81,7 @@ export const copyBtn = css`
8281
&:active {
8382
background-color: ${color.background};
8483
}
85-
86-
@media (max-width: 380px) {
84+
@media (max-width: ${breakpoints.values.xs}px) {
8785
height: 52px;
8886
width: 52px;
8987
}

‎front/src/pods/trainer/components/session.styles.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from 'emotion';
22
import { theme } from 'core/theme';
33

4-
const { palette, spacing, typography } = theme;
4+
const { palette, spacing, typography, breakpoints } = theme;
55
const color = palette.customPalette;
66

77
export const sessionContainer = css`
@@ -53,7 +53,7 @@ export const sendBtn = css`
5353
color: white;
5454
outline: none;
5555
}
56-
@media (max-width: 380px) {
56+
@media (max-width: ${breakpoints.values.xs}px) {
5757
background-color: ${color.successLight};
5858
color: white;
5959
border: none;
@@ -68,7 +68,7 @@ export const sendBtn = css`
6868
export const sendIcon = css`
6969
font-size: 20px;
7070
margin-left: 10px;
71-
@media (max-width: 380px) {
71+
@media (max-width: ${breakpoints.values.xs}px) {
7272
display: none;
7373
}
7474
`;
@@ -93,7 +93,7 @@ export const undoBtn = css`
9393
color: white;
9494
outline: none;
9595
}
96-
@media (max-width: 380px) {
96+
@media (max-width: ${breakpoints.values.xs}px) {
9797
background-color: ${color.alertLight};
9898
color: white;
9999
border: none;
@@ -108,7 +108,7 @@ export const undoBtn = css`
108108
export const undoIcon = css`
109109
font-size: 20px;
110110
margin-right: 10px;
111-
@media (max-width: 380px) {
111+
@media (max-width: ${breakpoints.values.xs}px) {
112112
display: none;
113113
}
114114
`;

‎front/src/pods/trainer/trainer.styles.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import { css } from 'emotion';
2+
import { theme } from 'core/theme';
3+
4+
const { breakpoints, palette } = theme;
5+
const color = palette.customPalette;
26

37
export const mainContainer = css`
48
width: 100%;
59
`;
610

711
export const backgroundContainer = css`
8-
border-bottom: 1px solid #ccc;
12+
border-bottom: 1px solid ${color.greyMedium};
913
`;
1014

1115
export const content = css`
1216
width: 60%;
1317
margin: 0px auto 0 auto;
14-
15-
@media (max-width: 728px) {
18+
@media (max-width: ${breakpoints.values.md}px) {
1619
width: 80%;
1720
}
1821
`;

0 commit comments

Comments
 (0)