Skip to content

Commit 7fcd9bd

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #118 from Lemoncode/feature/improve-styles
Feature/improve styles
2 parents 972a06e + b5c28eb commit 7fcd9bd

12 files changed

Lines changed: 216 additions & 275 deletions

‎front/src/layout/app-layout.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import React from 'react';
22
import { AppbarComponent, FooterComponent } from 'common-app';
33

44
export const AppLayout: React.FC = props => {
5-
const [showLinks, setShowLinks] = React.useState<boolean>(true);
65
return (
76
<>
8-
<AppbarComponent showLinks={showLinks} />
7+
<AppbarComponent showLinks={true} />
98
{props.children}
10-
<FooterComponent showLinks={showLinks} />
9+
<FooterComponent showLinks={true} />
1110
</>
1211
);
1312
};

‎front/src/layout/session-layout.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import React from 'react';
22
import { AppbarComponent, FooterComponent } from 'common-app';
33

44
export const SessionLayout: React.FC = props => {
5-
const [showLinks, setShowLinks] = React.useState<boolean>(false);
65
return (
76
<>
8-
<AppbarComponent showLinks={showLinks} />
7+
<AppbarComponent showLinks={false} />
98
{props.children}
10-
<FooterComponent showLinks={showLinks} />
9+
<FooterComponent showLinks={false} />
1110
</>
1211
);
1312
};

‎front/src/pods/student/student.component.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
2-
import * as classes from './student.styles';
3-
// Material UI ~ components
42
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
53
import Typography from '@material-ui/core/Typography';
4+
import * as innerClasses from './student.styles';
65

76
interface Props {
87
room: string;
@@ -11,25 +10,26 @@ interface Props {
1110

1211
export const StudentComponent: React.FC<Props> = props => {
1312
const { room, log } = props;
14-
const { mainContainer, sessionName, studentBoard, labelTextarea } = classes;
1513

1614
return (
17-
<>
18-
<main className={mainContainer}>
19-
<Typography className={sessionName} variant="body1" role="heading">
20-
Session name: {room ?? ''}
21-
</Typography>
22-
<label className={labelTextarea} htmlFor="session">
23-
Content
24-
</label>
25-
<TextareaAutosize
26-
id="session"
27-
rowsMax={30}
28-
rowsMin={30}
29-
className={studentBoard}
30-
value={log ?? ''}
31-
/>
32-
</main>
33-
</>
15+
<main className={innerClasses.root}>
16+
<Typography
17+
className={innerClasses.sessionName}
18+
variant="body1"
19+
role="heading"
20+
>
21+
Session name: {room ?? ''}
22+
</Typography>
23+
<label className={innerClasses.label} htmlFor="session">
24+
Content
25+
</label>
26+
<TextareaAutosize
27+
id="session"
28+
rowsMax={30}
29+
rowsMin={30}
30+
className={innerClasses.textarea}
31+
value={log ?? ''}
32+
/>
33+
</main>
3434
);
3535
};

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

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,44 @@ import { theme } from 'core/theme';
44
const { typography, spacing, palette, breakpoints } = theme;
55
const color = palette.customPalette;
66

7-
export const mainContainer = css`
8-
width: 60%;
9-
margin: ${spacing(10)} auto;
10-
@media (max-width: ${breakpoints.values.lg}px) {
11-
width: 80%;
7+
export const root = css`
8+
display: grid;
9+
grid-template-columns: auto;
10+
grid-row-gap: 1rem;
11+
grid-column-gap: 1rem;
12+
padding: 1rem;
13+
14+
@media (min-width: ${breakpoints.values.md}px) {
15+
padding: 2rem;
16+
grid-template-columns: 1fr 6fr 1fr;
17+
& > :nth-child(n) {
18+
grid-column-start: 2;
19+
grid-column-end: 3;
20+
}
21+
}
22+
23+
@media (min-width: ${breakpoints.values.lg}px) {
24+
grid-template-columns: 1fr 4fr 1fr;
25+
}
26+
`;
27+
28+
export const sessionName = css`
29+
@media (min-width: ${breakpoints.values.md}px) {
30+
justify-self: start;
1231
}
32+
font-size: 1.125rem;
33+
text-align: center;
34+
border-bottom: 2px solid ${color.primary};
35+
`;
36+
37+
export const label = css`
38+
display: block;
39+
font-family: ${typography.fontFamily};
40+
font-size: 1.125rem;
1341
`;
1442

15-
export const studentBoard = css`
43+
export const textarea = css`
1644
box-sizing: border-box;
17-
width: 100%;
18-
margin-top: ${spacing(1.25)};
19-
margin-bottom: ${spacing(1.25)};
2045
padding: ${spacing(2)};
2146
font-family: ${typography.fontFamily};
2247
font-size: 1rem;
@@ -28,18 +53,3 @@ export const studentBoard = css`
2853
outline: none;
2954
}
3055
`;
31-
32-
export const labelTextarea = css`
33-
display: block;
34-
font-family: ${typography.fontFamily};
35-
font-size: 1.125rem;
36-
`;
37-
38-
export const sessionName = css`
39-
display: inline-block;
40-
margin-bottom: ${spacing(5)};
41-
padding-bottom: ${spacing(0.625)};
42-
font-size: 1.125rem;
43-
text-align: center;
44-
border-bottom: 2px solid ${color.primary};
45-
`;

‎front/src/pods/trainer/components/header.component.tsx‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import React from 'react';
2-
import * as classes from './header.styles';
3-
// Material UI ~ components
4-
import TextField from '@material-ui/core/TextField';
2+
import { cx } from 'emotion';
53
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
4+
import * as innerClasses from './header.styles';
65

76
interface Props {
87
currentTrainerUrl: string;
98
currentStudentUrl: string;
9+
className?: string;
1010
}
1111

1212
export const HeaderComponent: React.FC<Props> = props => {
13-
const { currentStudentUrl, currentTrainerUrl } = props;
14-
const { headerContainer } = classes;
13+
const { currentStudentUrl, currentTrainerUrl, className } = props;
1514

1615
return (
17-
<div className={headerContainer}>
16+
<div className={cx(innerClasses.root, className)}>
1817
<CopyFieldComponent
1918
labelName="Trainer Link"
2019
inputId="trainer-link"
@@ -39,36 +38,29 @@ interface CopyFieldProps {
3938

4039
export const CopyFieldComponent: React.FC<CopyFieldProps> = props => {
4140
const { labelName, inputId, urlLink } = props;
42-
const {
43-
inputField,
44-
label,
45-
inputIconContainer,
46-
textArea,
47-
copyIcon,
48-
copyBtn,
49-
} = classes;
41+
5042
return (
51-
<div className={inputField}>
52-
<label className={label} htmlFor={inputId}>
43+
<>
44+
<label className={innerClasses.label} htmlFor={inputId}>
5345
{labelName}
5446
</label>
55-
<div className={inputIconContainer}>
47+
<div className={innerClasses.inputContainer}>
5648
<input
5749
id={inputId}
5850
type="text"
59-
className={textArea}
51+
className={innerClasses.input}
6052
value={urlLink}
6153
readOnly
6254
aria-readonly
6355
/>
6456
<button
6557
aria-label={`copy ${labelName}`}
66-
className={copyBtn}
58+
className={innerClasses.button}
6759
onClick={() => navigator.clipboard.writeText(urlLink)}
6860
>
69-
<FileCopyOutlinedIcon className={copyIcon} />
61+
<FileCopyOutlinedIcon className={innerClasses.icon} />
7062
</button>
7163
</div>
72-
</div>
64+
</>
7365
);
7466
};

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

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,10 @@ import { theme } from 'core/theme';
44
const { palette, typography, spacing, breakpoints } = theme;
55
const color = palette.customPalette;
66

7-
export const headerContainer = css`
8-
width: 100%;
9-
margin-top: ${spacing(7.5)};
10-
margin-bottom: ${spacing(10)};
11-
`;
12-
13-
export const inputField = css`
14-
margin-bottom: ${spacing(3.75)};
15-
&:last-of-type {
16-
margin-bottom: 0;
17-
}
7+
export const root = css`
8+
display: grid;
9+
grid-row-gap: 1rem;
10+
grid-column-gap: 1rem;
1811
`;
1912

2013
export const label = css`
@@ -23,17 +16,13 @@ export const label = css`
2316
color: ${palette.text.primary};
2417
`;
2518

26-
export const inputIconContainer = css`
19+
export const inputContainer = css`
2720
display: flex;
28-
align-items: center;
29-
width: 100%;
30-
margin-top: ${spacing(1.25)};
21+
flex-direction: row;
3122
`;
3223

33-
export const textArea = css`
24+
export const input = css`
3425
flex: 1;
35-
min-width: 0;
36-
margin-right: 0;
3726
padding: ${spacing(2.25)};
3827
font-family: ${typography.fontFamily};
3928
font-size: 1rem;
@@ -50,20 +39,13 @@ export const textArea = css`
5039
&::selection {
5140
background: ${color.greyMedium};
5241
}
53-
@media (max-width: ${breakpoints.values.xs}px) {
54-
padding: ${spacing(2)};
55-
font-size: 0.875rem;
56-
}
5742
`;
5843

59-
export const copyIcon = css`
44+
export const icon = css`
6045
font-size: 1.875rem;
61-
@media (max-width: ${breakpoints.values.xs}px) {
62-
font-size: 1.625rem;
63-
}
6446
`;
6547

66-
export const copyBtn = css`
48+
export const button = css`
6749
width: ${spacing(7.375)};
6850
height: ${spacing(7.375)};
6951
background-color: ${color.background};

‎front/src/pods/trainer/components/new-text.component.tsx‎

Lines changed: 29 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
11
import React from 'react';
2-
import * as classes from './new-text.styles';
3-
// Material UI ~ components
2+
import { cx } from 'emotion';
43
import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
54
import Button from '@material-ui/core/Button';
65
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
6+
import * as innerClasses from './new-text.styles';
77

88
interface Props {
99
handleAppendTrainerText: (trainerText: string) => void;
10+
className?: string;
1011
}
1112

1213
export const NewTextComponent: React.FC<Props> = props => {
13-
const { handleAppendTrainerText } = props;
14+
const { handleAppendTrainerText, className } = props;
1415
const [trainerText, setTrainerText] = React.useState<string>('');
15-
const {
16-
newTextContainer,
17-
labelTextarea,
18-
editTextArea,
19-
sendBtn,
20-
sendBtnDisabled,
21-
sendIcon,
22-
} = classes;
2316

2417
const trainerTextRef = React.useRef<string>(trainerText);
2518

@@ -45,31 +38,30 @@ export const NewTextComponent: React.FC<Props> = props => {
4538
}, []);
4639

4740
return (
48-
<div className={newTextContainer}>
49-
<form>
50-
<label className={labelTextarea} htmlFor="new-text">
51-
New text
52-
</label>
53-
<TextareaAutosize
54-
rowsMax={10}
55-
rowsMin={10}
56-
className={editTextArea}
57-
onChange={e => handleOnChange(e)}
58-
value={trainerText}
59-
/>
60-
<Button
61-
variant="contained"
62-
color="primary"
63-
className={trainerText ? sendBtn : sendBtnDisabled}
64-
onClick={() => trainerText && handleAppendTrainerTextInternal()}
65-
aria-disabled={!trainerText}
66-
disableRipple={!trainerText}
67-
disableElevation
68-
>
69-
Send
70-
<ArrowForwardRoundedIcon className={sendIcon} />
71-
</Button>
72-
</form>
73-
</div>
41+
<form className={cx(innerClasses.root, className)}>
42+
<label className={innerClasses.label} htmlFor="new-text">
43+
New text
44+
</label>
45+
<TextareaAutosize
46+
rowsMax={10}
47+
rowsMin={10}
48+
className={innerClasses.textarea}
49+
onChange={e => handleOnChange(e)}
50+
value={trainerText}
51+
/>
52+
<Button
53+
variant="contained"
54+
color="primary"
55+
className={innerClasses.button}
56+
onClick={() => trainerText && handleAppendTrainerTextInternal()}
57+
disabled={!trainerText}
58+
aria-disabled={!trainerText}
59+
disableRipple={!trainerText}
60+
disableElevation
61+
>
62+
Send
63+
<ArrowForwardRoundedIcon className={innerClasses.buttonIcon} />
64+
</Button>
65+
</form>
7466
);
7567
};

0 commit comments

Comments
 (0)