Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 34b2f72

Browse files
Style Intro section
1 parent 295b6ef commit 34b2f72

File tree

6 files changed

+37
-9
lines changed

6 files changed

+37
-9
lines changed

‎__tests__/pages/__snapshots__/About.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`About page renders with a DARK theme 1`] = `
44
.c0 {
5-
color: #F5F5F5;
5+
color: #C8C8C8;
66
}
77
88
.c0 a {
@@ -71,7 +71,7 @@ exports[`About page renders with a DARK theme 1`] = `
7171

7272
exports[`About page renders with a LIGHT theme 1`] = `
7373
.c0 {
74-
color: #0A000A;
74+
color: #6F256F;
7575
}
7676
7777
.c0 a {

‎__tests__/pages/__snapshots__/Game.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -887,7 +887,7 @@ exports[`Game page - INTRO renders a <Button /> component 1`] = `
887887
888888
<Button
889889
id="start"
890-
label="Start"
890+
label="Start Game"
891891
onClick={[Function]}
892892
>
893893
<styled.button
@@ -963,7 +963,7 @@ exports[`Game page - INTRO renders a <Button /> component 1`] = `
963963
onClick={[Function]}
964964
>
965965
<span>
966-
Start
966+
Start Game
967967
</span>
968968
</button>
969969
</StyledComponent>
@@ -1071,7 +1071,7 @@ exports[`Game page - RESULTS renders a <Restart /> component 1`] = `null`;
10711071

10721072
exports[`Game page - RESULTS renders a <Result /> component 1`] = `
10731073
.c0 {
1074-
color: #0A000A;
1074+
color: #6F256F;
10751075
margin: 3rem 0;
10761076
text-align: center;
10771077
}

‎src/pages/Game.jsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,19 @@ import Result from '../components/Result';
1212
import Percentage from '../components/Percentage';
1313
import Button from '../components/Button';
1414

15+
const Intro = styled.div`
16+
border: 1px solid ${props => props.theme.border};
17+
border-radius: 4px;
18+
color: ${props => props.theme.text};
19+
margin: 2rem 0;
20+
padding: 2rem 3rem;
21+
`;
22+
23+
const StartButtonContainer = styled.div`
24+
margin: 3rem auto 1rem;
25+
/* text-align: center; */
26+
`;
27+
1528
const Restart = styled.div`
1629
margin: 3rem 0;
1730
text-align: center;
@@ -45,7 +58,19 @@ const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
4558

4659
return (
4760
<Fragment>
48-
{intro && <Button label="Start" id="start" onClick={onStart} />}
61+
{intro && (
62+
<Intro>
63+
<p>
64+
Each question contains a code snippet and four answer choices.
65+
<br />
66+
Look carefully at the code and choose the one correct answer.
67+
</p>
68+
<p>After answering all 23 questions you'll be shown your results.</p>
69+
<StartButtonContainer>
70+
<Button label="Start Game" id="start" onClick={onStart} />
71+
</StartButtonContainer>
72+
</Intro>
73+
)}
4974

5075
{!intro && current && (
5176
<Fragment>

‎src/static/constants/colors.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export const WILD_SAND = '#F5F5F5';
1414
export const WHITE = '#FFFFFF';
1515

1616
// light theme
17-
export const DIESEL = '#0A000A';
1817
export const PLUM = '#6F256F';
1918
export const BOUQUET = '#A568A5';
2019
export const ORCHID = '#EDB8ED';

‎src/styles/themes/theme.dark.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,7 @@ export const themeDark = {
3737

3838
// text and header
3939
header: C.GRAY,
40-
text: C.WILD_SAND
40+
text: C.SILVER,
41+
42+
border: C.TUNDORA
4143
};

‎src/styles/themes/theme.light.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,7 @@ export const themeLight = {
3737

3838
// text and header
3939
header: C.PLUM,
40-
text: C.DIESEL
40+
text: C.PLUM,
41+
42+
border: C.PRIM
4143
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /