Refactor buttons (#916)

f2/src/ConfirmationPage.js

@@ -67,7 +67,7 @@ export const ConfirmationPage = () => (
       <Layout>
         <TrackPageViews />
         <BackButton route="/contactinfo">
-          <Trans>your contact information</Trans>
+          <Trans id="confirmationPage.backButton" />
         </BackButton>
         <Steps activeStep={6} totalSteps={6} />
         <H1>

f2/src/LandingPage.js

@@ -1,77 +1,88 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from 'react'
+import { Route } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { ApolloConsumer } from 'react-apollo'
 import { Trans } from '@lingui/macro'
 import { P } from './components/paragraph'
+import { Button } from './components/button'
 import { H1 } from './components/header'
 import { Ul } from './components/unordered-list'
 import { Li } from './components/list-item'
 import { InfoCard } from './components/container'
 import { Layout } from './components/layout'
 import { TrackPageViews } from './TrackPageViews'
-import { ButtonsContainer } from './components/buttons-container'
 
 export const LandingPage = props => {
   return (
-    <Layout>
-      <TrackPageViews />
-      <H1>
-        <Trans id="landingPage.title" />
-      </H1>
-      <ApolloConsumer>
-        {client =>
-          client.writeData({
-            data: {
-              doneForms: false,
-              scamInfo: JSON.stringify({}),
-              lostMoney: JSON.stringify({}),
-              suspectInfo: JSON.stringify({}),
-              files: [],
-              contactInfo: JSON.stringify({}),
-              timeFrame: JSON.stringify({}),
-              whatHappened: JSON.stringify({}),
-              scammerDetails: JSON.stringify({}),
-              impact: JSON.stringify({}),
-              tellUsMore: JSON.stringify({}),
-            },
-          })
-        }
-      </ApolloConsumer>
+    <Route
+      render={({ history }) => (
+        <Layout>
+          <TrackPageViews />
+          <H1>
+            <Trans id="landingPage.title" />
+          </H1>
+          <ApolloConsumer>
+            {client =>
+              client.writeData({
+                data: {
+                  doneForms: false,
+                  scamInfo: JSON.stringify({}),
+                  lostMoney: JSON.stringify({}),
+                  suspectInfo: JSON.stringify({}),
+                  files: [],
+                  contactInfo: JSON.stringify({}),
+                  timeFrame: JSON.stringify({}),
+                  whatHappened: JSON.stringify({}),
+                  scammerDetails: JSON.stringify({}),
+                  impact: JSON.stringify({}),
+                  tellUsMore: JSON.stringify({}),
+                },
+              })
+            }
+          </ApolloConsumer>
 
-      <P>
-        <Trans id="landingPage.intro" />
-      </P>
-      <InfoCard>
-        <P>
-          <Trans id="landingPage.required0" />
-        </P>
-        <Ul>
-          <Li>
-            <Trans id="landingPage.required1" />
-          </Li>
-          <Li>
-            <Trans id="landingPage.required2" />
-          </Li>
-          <Li>
-            <Trans id="landingPage.required3" />
-          </Li>
-          <Li>
-            <Trans id="landingPage.required4" />
-          </Li>
-        </Ul>
-      </InfoCard>
-      <br></br>
-      <P>
-        <Trans id="landingPage.summary" />
-      </P>
-      <ButtonsContainer
-        landing={true}
-        buttonLink={true}
-        cancel={false}
-        route="timeframe"
-      />
-    </Layout>
+          <P>
+            <Trans id="landingPage.intro" />
+          </P>
+          <InfoCard>
+            <P>
+              <Trans id="landingPage.required0" />
+            </P>
+            <Ul>
+              <Li>
+                <Trans id="landingPage.required1" />
+              </Li>
+              <Li>
+                <Trans id="landingPage.required2" />
+              </Li>
+              <Li>
+                <Trans id="landingPage.required3" />
+              </Li>
+              <Li>
+                <Trans id="landingPage.required4" />
+              </Li>
+            </Ul>
+          </InfoCard>
+          <br></br>
+          <P>
+            <Trans id="landingPage.summary" />
+          </P>
+
+          <Button
+            color="white"
+            px={7}
+            py={2}
+            mb={[3, null, 5]}
+            onClick={() => {
+              history.push('/timeframe')
+            }}
+          >
+            <Trans id="landingPage.nextButton" />
+          </Button>
+        </Layout>
+      )}
+    />
   )
 }
 

f2/src/components/backbutton/_tests_/backbutton.test.js

@@ -19,14 +19,12 @@ describe('<Button />', () => {
       <MemoryRouter initialEntries={['/']}>
         <ThemeProvider theme={theme}>
           <I18nProvider i18n={i18n}>
-            <BackButton route="/p2/confirmation" />
+            <BackButton route="/future">Back to the future</BackButton>
           </I18nProvider>
         </ThemeProvider>
       </MemoryRouter>,
     )
     expect(getAllByText(/Back/)).toHaveLength(1)
-    expect(document.querySelector('a').getAttribute('href')).toBe(
-      '/p2/confirmation',
-    )
+    expect(document.querySelector('a').getAttribute('href')).toBe('/future')
   })
 })

f2/src/components/backbutton/index.js

@@ -27,8 +27,9 @@ export const BackButton = ({ route = '', children }) => (
     `}
   >
     <Link type="button" to={route} textAlign="left">
+      <span>◀</span>&nbsp;
       <Trans>
-        <span>&#9664;</span> <span>Back to</span> <span>{children}</span>
+        <span>{children}</span>
       </Trans>
     </Link>
   </div>