Skip to content
This repository was archived by the owner on Oct 21, 2022. It is now read-only.

Commit a0ff035

Browse files
mdvanesmdvanes
committed
Fix challenge styling
1 parent 8a3b18f commit a0ff035

File tree

4 files changed

+112
-82
lines changed

4 files changed

+112
-82
lines changed

‎src/components/Molecules/Leaderboard/BoardCard.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@ import {
77
withStyles,
88
} from "@material-ui/core";
99

10-
const StyledCard = withStyles(() => ({
10+
export const StyledCard = withStyles(() => ({
1111
root: {
1212
backgroundColor: "transparent",
13+
marginBottom: "1rem"
1314
},
1415
}))(Card);
1516

16-
const StyledCardHeader = withStyles((theme: Theme) => ({
17+
export const StyledCardHeader = withStyles((theme: Theme) => ({
1718
root: {
19+
// TODO orange?_
1820
backgroundColor: theme.palette.primary.dark,
1921
// textAlign: "center",
2022
},
@@ -24,16 +26,20 @@ const StyledCardHeader = withStyles((theme: Theme) => ({
2426
},
2527
}))(CardHeader);
2628

27-
const StyledCardContent = withStyles(() => ({
29+
export const StyledCardContent = withStyles(() => ({
2830
root: {
2931
backgroundColor: "rgba(0, 0, 0, 0.5)",
32+
color: "white",
33+
"& h6": {
34+
color: "white",
35+
}
3036
},
3137
}))(CardContent);
3238

3339
const BoardCard: FC = ({ children }) => {
3440
return (
3541
<StyledCard>
36-
<StyledCardHeader title="FREELANCER LEADERBOARD" />
42+
<StyledCardHeader title="LEADERBOARD" />
3743
<StyledCardContent>{children}</StyledCardContent>
3844
</StyledCard>
3945
);

‎src/components/Molecules/Leaderboard/EntryListHeader.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import React, { FC } from "react";
2-
import { ListItem, Grid, Typography } from "@material-ui/core";
1+
import React, { FC } from 'react';
2+
import { ListItem, Grid, Typography } from '@material-ui/core';
33

44
const EntryListHeader: FC = () => (
55
<ListItem>
66
<Grid container>
7-
<Grid item xs={2}></Grid>
7+
<Grid item xs={2} />
88
<Grid item xs>
9-
<Typography variant="h6">Name</Typography>
9+
<Typography variant="h6">
10+
Name
11+
</Typography>
1012
</Grid>
1113
<Grid item xs={3}>
1214
<Typography variant="h6">Score</Typography>

‎src/components/Molecules/Leaderboard/EntryListItem.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ const EntryTypography = withStyles((theme: Theme) => ({
2626
}))(Typography);
2727

2828
const formatDate = (input: string) => {
29-
// const date = new Date(input);
30-
const formatted = "123" /*new Intl.DateTimeFormat("nl-NL", {
29+
const date = new Date(input);
30+
const formatted = new Intl.DateTimeFormat("nl-NL", {
3131
year: "numeric",
3232
month: "numeric",
3333
day: "numeric",
3434
hour: "numeric",
3535
minute: "numeric",
3636
second: "numeric",
37-
}).format(date);*/
37+
}).format(date);
3838
return formatted;
3939
};
4040

‎src/components/Pages/CodeChallenge/CodeChallenge.tsx

+93-71
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,19 @@ import { translate, TranslationFunction } from 'react-i18next';
33
import Container from '../../../Container/Container';
44
import styles from './CodeChallenge.module.scss';
55
import ResponsiveImage from '../../../ResponsiveImage/ResponsiveImage';
6-
import { Button, createStyles, withStyles } from '@material-ui/core';
6+
import {
7+
Button,
8+
createStyles,
9+
Typography,
10+
withStyles,
11+
} from '@material-ui/core';
712
import compose from 'recompose/compose';
813
import Leaderboard from '../../Molecules/Leaderboard/Leaderboard';
14+
import {
15+
StyledCard,
16+
StyledCardContent,
17+
StyledCardHeader,
18+
} from '../../Molecules/Leaderboard/BoardCard';
919

1020
type CodeChallengeProps = Readonly<{
1121
classes: any;
@@ -49,6 +59,14 @@ const styles1 = () =>
4959
backgroundSize: 'cover',
5060
backgroundPosition: 'center',
5161
backgroundAttachment: 'fixed',
62+
'&::before': {
63+
content: '""',
64+
background: 'rgba(0, 0, 0, 0.6)',
65+
position: 'fixed',
66+
width: '100%',
67+
height: '100%',
68+
overflow: 'hidden',
69+
},
5270
},
5371
test: {
5472
fontFamily: 'Vibrocentric-Regular, serif',
@@ -68,76 +86,80 @@ class Component extends React.Component<CodeChallengeProps> {
6886

6987
<Leaderboard />
7088

71-
<h4>{t('INTRODUCTION_TITLE')}</h4>
72-
<p>{t('INTRODUCTION')}</p>
73-
<ResponsiveImage
74-
className={styles.image}
75-
path={'/images/initial-cargo.png'}
76-
/>
77-
{asParagraph(
78-
t('INTRODUCTION_PART_TWO', { returnObjects: true })
79-
)}
80-
81-
<h4>{t('SITUATION_TITLE')}</h4>
82-
{asLines(t('SITUATION', { returnObjects: true }))}
83-
84-
<h4>{t('SHIP_TITLE')}</h4>
85-
<p>{t('SHIP')}</p>
86-
{asMonospace(t('SHIP_TABLE', { returnObjects: true }))}
87-
88-
<h4>{t('MAP_TITLE')}</h4>
89-
<p>{t('MAP')}</p>
90-
{asMonospace(t('MAP_TABLE', { returnObjects: true }))}
91-
92-
<div>
93-
<Button
94-
className={styles.downloadButton}
95-
href={'/code-challenge/planets.csv'}
96-
variant="contained"
97-
color="primary"
98-
>
99-
{t('MAP_CSV_DOWNLOAD_TEXT')}
100-
</Button>
101-
<Button
102-
className={styles.downloadButton}
103-
href={'/code-challenge/planets.json'}
104-
variant="contained"
105-
color="primary"
106-
>
107-
{t('MAP_JSON_DOWNLOAD_TEXT')}
108-
</Button>
109-
</div>
110-
111-
<p>{t('MAP_DOWNLOAD')}</p>
112-
<h4>{t('RULES_TITLE')}</h4>
113-
{asLines(t('RULES', { returnObjects: true }))}
114-
115-
<h4>{t('POINTERS_TITLE')}</h4>
116-
<p>{t('POINTERS')}</p>
117-
<ResponsiveImage
118-
className={styles.image}
119-
path={'/images/Example.png'}
120-
/>
121-
{asLines(t('POINTERS_PART_TWO', { returnObjects: true }))}
122-
123-
<h4>{t('SOLUTION_TITLE')}</h4>
124-
<p>{t('SOLUTION')}</p>
125-
{asMonospace(t('SOLUTION_JSON', { returnObjects: true }))}
126-
127-
<h4>{t('CHALLENGES_TITLE')}</h4>
128-
<h5>{t('CHALLENGE_1_TITLE')}</h5>
129-
{asLines(t('CHALLENGE_1', { returnObjects: true }))}
130-
<h5>{t('CHALLENGE_2_TITLE')}</h5>
131-
{asLines(t('CHALLENGE_2', { returnObjects: true }))}
132-
133-
<h4>{t('READING_FILES_TITLE')}</h4>
134-
<p>{t('READING_FILES')}</p>
135-
<h5>{t('EXAMPLE_1_TITLE')}</h5>
136-
{asMonospace(t('EXAMPLE_1', { returnObjects: true }))}
137-
<h5>{t('EXAMPLE_2_TITLE')}</h5>
138-
{asMonospace(t('EXAMPLE_2', { returnObjects: true }))}
139-
<h5>{t('EXAMPLE_3_TITLE')}</h5>
140-
{asMonospace(t('EXAMPLE_3', { returnObjects: true }))}
89+
<StyledCard>
90+
<StyledCardHeader title={t('INTRODUCTION_TITLE')} />
91+
<StyledCardContent>
92+
<Typography>{t('INTRODUCTION')}</Typography>
93+
<ResponsiveImage
94+
className={styles.image}
95+
path={'/images/initial-cargo.png'}
96+
/>
97+
{asParagraph(
98+
t('INTRODUCTION_PART_TWO', { returnObjects: true })
99+
)}
100+
101+
<h4>{t('SITUATION_TITLE')}</h4>
102+
{asLines(t('SITUATION', { returnObjects: true }))}
103+
104+
<h4>{t('SHIP_TITLE')}</h4>
105+
<p>{t('SHIP')}</p>
106+
{asMonospace(t('SHIP_TABLE', { returnObjects: true }))}
107+
108+
<h4>{t('MAP_TITLE')}</h4>
109+
<p>{t('MAP')}</p>
110+
{asMonospace(t('MAP_TABLE', { returnObjects: true }))}
111+
112+
<div>
113+
<Button
114+
className={styles.downloadButton}
115+
href={'/code-challenge/planets.csv'}
116+
variant="contained"
117+
color="primary"
118+
>
119+
{t('MAP_CSV_DOWNLOAD_TEXT')}
120+
</Button>
121+
<Button
122+
className={styles.downloadButton}
123+
href={'/code-challenge/planets.json'}
124+
variant="contained"
125+
color="primary"
126+
>
127+
{t('MAP_JSON_DOWNLOAD_TEXT')}
128+
</Button>
129+
</div>
130+
131+
<p>{t('MAP_DOWNLOAD')}</p>
132+
<h4>{t('RULES_TITLE')}</h4>
133+
{asLines(t('RULES', { returnObjects: true }))}
134+
135+
<h4>{t('POINTERS_TITLE')}</h4>
136+
<p>{t('POINTERS')}</p>
137+
<ResponsiveImage
138+
className={styles.image}
139+
path={'/images/Example.png'}
140+
/>
141+
{asLines(t('POINTERS_PART_TWO', { returnObjects: true }))}
142+
143+
<h4>{t('SOLUTION_TITLE')}</h4>
144+
<p>{t('SOLUTION')}</p>
145+
{asMonospace(t('SOLUTION_JSON', { returnObjects: true }))}
146+
147+
<h4>{t('CHALLENGES_TITLE')}</h4>
148+
<h5>{t('CHALLENGE_1_TITLE')}</h5>
149+
{asLines(t('CHALLENGE_1', { returnObjects: true }))}
150+
<h5>{t('CHALLENGE_2_TITLE')}</h5>
151+
{asLines(t('CHALLENGE_2', { returnObjects: true }))}
152+
153+
<h4>{t('READING_FILES_TITLE')}</h4>
154+
<p>{t('READING_FILES')}</p>
155+
<h5>{t('EXAMPLE_1_TITLE')}</h5>
156+
{asMonospace(t('EXAMPLE_1', { returnObjects: true }))}
157+
<h5>{t('EXAMPLE_2_TITLE')}</h5>
158+
{asMonospace(t('EXAMPLE_2', { returnObjects: true }))}
159+
<h5>{t('EXAMPLE_3_TITLE')}</h5>
160+
{asMonospace(t('EXAMPLE_3', { returnObjects: true }))}
161+
</StyledCardContent>
162+
</StyledCard>
141163
</div>
142164
</div>
143165
</Container>

0 commit comments

Comments
 (0)