Skip to content
This repository was archived by the owner on May 7, 2021. It is now read-only.

Commit 10343d0

Browse files
sastelskeithiancolbourne
sastels
authored and
keithiancolbourne
committed
Minor clean up (#444)
* fix a few console errors * replace a lot of css with styled-system
1 parent bf3d01a commit 10343d0

12 files changed

+136
-184
lines changed

‎frontend/src/ConfirmationPage.js

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @jsx jsx */
2-
import { css, jsx } from '@emotion/core'
2+
import { jsx } from '@emotion/core'
33
import React from 'react'
44
import { navigate } from '@reach/router'
55
import { Trans } from '@lingui/macro'
@@ -14,13 +14,6 @@ import { TrackPageViews } from './TrackPageViews'
1414
import { Steps } from './components/stepper'
1515
import { Layout } from './components/layout'
1616

17-
const topBarContainer = css`
18-
display: flex;
19-
width: 90%;
20-
flex-direction: row;
21-
margin-bottom: 20px;
22-
`
23-
2417
const scamEventSummary = client => {
2518
let {
2619
howWereYouContacted,
@@ -343,7 +336,12 @@ const contactInfoSummary = client => {
343336

344337
export const ConfirmationPage = () => (
345338
<Layout>
346-
<Container css={topBarContainer}>
339+
<Container
340+
display="flex"
341+
width="90%"
342+
flexDirection="row"
343+
marginBottom="20px"
344+
>
347345
<Steps activeStep={4} />
348346
</Container>
349347
<H1>
@@ -365,11 +363,9 @@ export const ConfirmationPage = () => (
365363
<Container
366364
maxWidth="305px"
367365
marginTop={[3, null, 4]}
368-
css={css`
369-
display: flex;
370-
flex-direction: column;
371-
justify-content: space-between;
372-
`}
366+
display="flex"
367+
flex-direction="column"
368+
justify-content="space-between"
373369
>
374370
<Button type="submit" onClick={() => navigate('/thankyou')}>
375371
<Trans>Submit report</Trans>
@@ -379,11 +375,9 @@ export const ConfirmationPage = () => (
379375
<Container
380376
maxWidth="300px"
381377
marginTop={[2, null, 3]}
382-
css={css`
383-
display: flex;
384-
flex-direction: column;
385-
justify-content: space-between;
386-
`}
378+
display="flex"
379+
flex-direction="column"
380+
justify-content="space-between"
387381
>
388382
<Link type="button" color="black" to="/" textAlign="center">
389383
<Trans>Cancel report</Trans>

‎frontend/src/ContactInfoPage.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @jsx jsx */
2-
import { jsx, css } from '@emotion/core'
2+
import { jsx } from '@emotion/core'
33
import { navigate } from '@reach/router'
44
import { Trans } from '@lingui/macro'
55
import { H1 } from './components/header'
@@ -9,21 +9,19 @@ import { TrackPageViews } from './TrackPageViews'
99
import { ContactInfoForm } from './forms/ContactInfoForm'
1010
import { Layout } from './components/layout'
1111

12-
const topBarContainer = css`
13-
display: flex;
14-
width: 90%;
15-
flex-direction: row;
16-
margin-bottom: 20px;
17-
`
18-
1912
const submitAndNavigate = (client, data) => {
2013
client.writeData({ data })
2114
navigate('/confirmation')
2215
}
2316

2417
export const ContactInfoPage = () => (
2518
<Layout>
26-
<Container css={topBarContainer}>
19+
<Container
20+
display="flex"
21+
width="90%"
22+
flexDirection="row"
23+
marginBottom="20px"
24+
>
2725
<Steps activeStep={4} />
2826
</Container>
2927
<H1>

‎frontend/src/FileUploadPage.js

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**@jsx jsx */
2-
import { jsx, css } from '@emotion/core'
2+
import { jsx } from '@emotion/core'
33
import { Component } from 'react'
44
import { navigate } from '@reach/router'
55
import { Trans } from '@lingui/macro'
@@ -13,16 +13,7 @@ import { Link } from './components/link'
1313
import { FileUpload } from './components/file-upload'
1414
import { TrackPageViews } from './TrackPageViews'
1515
import { Layout } from './components/layout'
16-
1716
import { Steps } from './components/stepper'
18-
19-
const topBarContainer = css`
20-
display: flex;
21-
width: 90%;
22-
flex-direction: row;
23-
margin-bottom: 20px;
24-
`
25-
2617
import { P } from './components/paragraph'
2718

2819
export class FileUploadPage extends Component {
@@ -56,7 +47,12 @@ export class FileUploadPage extends Component {
5647
return (
5748
<Layout>
5849
<TrackPageViews />
59-
<Container css={topBarContainer}>
50+
<Container
51+
display="flex"
52+
width="90%"
53+
flexDirection="row"
54+
marginBottom="20px"
55+
>
6056
<Steps activeStep={3} />
6157
</Container>
6258
<H1 marginBottom="70px">
@@ -73,11 +69,9 @@ export class FileUploadPage extends Component {
7369
width="300px"
7470
marginTop={[2, null, 5]}
7571
marginBottom={[2, null, 5]}
76-
css={css`
77-
display: flex;
78-
flex-direction: row;
79-
justify-content: center;
80-
`}
72+
display="flex"
73+
flexDirection="row"
74+
justifyContent="center"
8175
>
8276
<FileUpload
8377
onChange={this.onChange}
@@ -107,11 +101,9 @@ export class FileUploadPage extends Component {
107101
width="300px"
108102
marginBottom={[2, null, 3]}
109103
key={index}
110-
css={css`
111-
display: flex;
112-
flex-direction: row;
113-
justify-content: space-between;
114-
`}
104+
display="flex"
105+
flexDirection="row"
106+
justifyContent="space-between"
115107
>
116108
<Text>{f.name}</Text>
117109
<Button
@@ -133,11 +125,9 @@ export class FileUploadPage extends Component {
133125
<Container
134126
width="300px"
135127
marginTop={[7, null, 8]}
136-
css={css`
137-
display: flex;
138-
flex-direction: column;
139-
justify-content: space-between;
140-
`}
128+
display="flex"
129+
flexDirection="column"
130+
justifyContent="space-between"
141131
>
142132
<Button onClick={() => this.submitAndNavigate(client)}>
143133
<Trans>Continue</Trans>
@@ -147,11 +137,9 @@ export class FileUploadPage extends Component {
147137
<Container
148138
width="300px"
149139
marginTop={[2, null, 3]}
150-
css={css`
151-
display: flex;
152-
flex-direction: column;
153-
justify-content: space-between;
154-
`}
140+
display="flex"
141+
flexDirection="column"
142+
justifyContent="space-between"
155143
>
156144
<Link type="button" color="black" to="/" textAlign="center">
157145
<Trans>Cancel report</Trans>

‎frontend/src/FilesToUpload.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**@jsx jsx */
2-
import { jsx, css } from '@emotion/core'
2+
import { jsx } from '@emotion/core'
33
import { Trans } from '@lingui/macro'
44
import { H1 } from './components/header'
55
import { P } from './components/paragraph'
@@ -9,16 +9,14 @@ import { Container } from './components/container'
99
import { Steps } from './components/stepper'
1010
import { Layout } from './components/layout'
1111

12-
const topBarContainer = css`
13-
display: flex;
14-
width: 90%;
15-
flex-direction: row;
16-
margin-bottom: 20px;
17-
`
18-
1912
export const FilesToUpload = () => (
2013
<Layout>
21-
<Container css={topBarContainer}>
14+
<Container
15+
display="flex"
16+
width="90%"
17+
flexDirection="row"
18+
marginBottom="20px"
19+
>
2220
<Steps activeStep={3} />
2321
</Container>
2422
<TrackPageViews />

‎frontend/src/LandingPage.js

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import { Trans } from '@lingui/macro'
44
import { P } from './components/paragraph'
55
import { H1, H2 } from './components/header'
66
import { ButtonLink } from './components/link'
7-
import { TrackPageViews } from './TrackPageViews'
7+
import { Ul } from './components/unordered-list'
8+
import { Li } from './components/list-item'
9+
import { Text } from './components/text'
810
import { Layout } from './components/layout'
11+
import { TrackPageViews } from './TrackPageViews'
912

1013
export const LandingPage = () => (
1114
<Layout>
@@ -28,26 +31,25 @@ export const LandingPage = () => (
2831
<H2 fontSize={[4, null, 5]}>
2932
<Trans>You will be asked to:</Trans>
3033
</H2>
31-
<P>
32-
<ul fontSize={[8, null, 8]}>
33-
<li>
34+
35+
<Text>
36+
<Ul fontSize={[8, null, 8]}>
37+
<Li>
3438
<Trans>Describe what happened</Trans>
35-
</li>
36-
<li>
39+
</Li>
40+
<Li>
3741
<Trans>Tell us how much money was lost</Trans>
38-
</li>
39-
<li>
42+
</Li>
43+
<Li>
4044
<Trans>Add details about the scammer</Trans>
41-
</li>
42-
<li>
45+
</Li>
46+
<Li>
4347
<Trans>Attach any supporting files</Trans>
44-
</li>
45-
</ul>
46-
</P>
47-
<P>
48-
<ButtonLink color="black" mb={[3, null, 5]} to="scaminfo">
49-
<Trans>Report now</Trans>
50-
</ButtonLink>
51-
</P>
48+
</Li>
49+
</Ul>
50+
</Text>
51+
<ButtonLink color="black" mb={[3, null, 5]} to="scaminfo">
52+
<Trans>Report now</Trans>
53+
</ButtonLink>
5254
</Layout>
5355
)

‎frontend/src/LoseMoney.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**@jsx jsx */
2-
import { jsx, css } from '@emotion/core'
2+
import { jsx } from '@emotion/core'
33
import { Trans } from '@lingui/macro'
44
import { H1 } from './components/header'
55
import { P } from './components/paragraph'
@@ -9,17 +9,15 @@ import { Container } from './components/container'
99
import { Steps } from './components/stepper'
1010
import { Layout } from './components/layout'
1111

12-
const topBarContainer = css`
13-
display: flex;
14-
width: 90%;
15-
flex-direction: row;
16-
margin-bottom: 20px;
17-
`
18-
1912
export const LoseMoney = () => (
2013
<Layout>
2114
<TrackPageViews />
22-
<Container css={topBarContainer}>
15+
<Container
16+
display="flex"
17+
width="90%"
18+
flexDirection="row"
19+
marginBottom="20px"
20+
>
2321
<Steps activeStep={1} />
2422
</Container>
2523
<H1>

‎frontend/src/MoneyLostPage.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable react/no-unescaped-entities */
22
/** @jsx jsx */
3-
import { jsx, css } from '@emotion/core'
3+
import { jsx } from '@emotion/core'
44
import { navigate } from '@reach/router'
55
import { Trans } from '@lingui/macro'
66
import { H1 } from './components/header'
@@ -11,21 +11,19 @@ import { TrackPageViews } from './TrackPageViews'
1111
import { MoneyLostForm } from './forms/MoneyLostForm'
1212
import { Layout } from './components/layout'
1313

14-
const topBarContainer = css`
15-
display: flex;
16-
width: 90%;
17-
flex-direction: row;
18-
margin-bottom: 20px;
19-
`
20-
2114
const submitAndNavigate = (client, data) => {
2215
client.writeData({ data })
2316
navigate('/suspectinfoquestion')
2417
}
2518

2619
export const MoneyLostPage = () => (
2720
<Layout>
28-
<Container css={topBarContainer}>
21+
<Container
22+
display="flex"
23+
width="90%"
24+
flexDirection="row"
25+
marginBottom="20px"
26+
>
2927
<Steps activeStep={1} />
3028
</Container>
3129
<H1>

‎frontend/src/ScamInfoPage.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @jsx jsx */
2-
import { jsx, css } from '@emotion/core'
2+
import { jsx } from '@emotion/core'
33
import { navigate } from '@reach/router'
44
import { Trans } from '@lingui/macro'
55
import { H1 } from './components/header'
@@ -10,21 +10,19 @@ import { Container } from './components/container'
1010
import { Steps } from './components/stepper'
1111
import { Layout } from './components/layout'
1212

13-
const topBarContainer = css`
14-
display: flex;
15-
width: 90%;
16-
flex-direction: row;
17-
margin-bottom: 20px;
18-
`
19-
2013
const submitAndNavigate = (client, data) => {
2114
client.writeData({ data })
2215
navigate('/moneylostquestion')
2316
}
2417

2518
export const ScamInfoPage = () => (
2619
<Layout>
27-
<Container css={topBarContainer}>
20+
<Container
21+
display="flex"
22+
width="90%"
23+
flexDirection="row"
24+
marginBottom="20px"
25+
>
2826
<Steps activeStep={0} />
2927
</Container>
3028
<H1>

0 commit comments

Comments
 (0)