Theming the app (#1588)

* fixed cancel page layout * canada theme Co-authored-by: ngosset <norman.gosset@cds-snc.ca>
cds-snc · Mar 6, 2020 · 499838c · 499838c
1 parent 1350991
commit 499838c
Show file tree

Hide file tree

Showing 21 changed files with 181 additions and 156 deletions.
diff --git a/f2/src/App.js b/f2/src/App.js
@@ -41,6 +41,7 @@ const App = () => {
             <PhaseBanner phase={<Trans id="banner.phase" />}>
               <Trans id="banner.phaseText">
                 <A
+                  color="blue.900"
                   href={
                     i18n.locale === 'en'
                       ? 'http://www.antifraudcentre-centreantifraude.ca/report-signalez-eng.htm'
@@ -78,7 +79,11 @@ const App = () => {
           <Footer>
             {/** The List component is in the Footer component */}
             <Li>
-              <A href={'/privacystatement?lang=' + i18n.locale} isExternal>
+              <A
+                href={'/privacystatement?lang=' + i18n.locale}
+                isExternal
+                color="blue.900"
+              >
                 <Trans id="banner.footerPrivacy" />
               </A>
             </Li>
@@ -87,6 +92,7 @@ const App = () => {
                 ml={4}
                 href={'/termsandconditions?lang=' + i18n.locale}
                 isExternal
+                color="blue.900"
               >
                 <Trans id="banner.footerTermsAndConditions" />
               </A>

diff --git a/f2/src/LocaleSwitcher.js b/f2/src/LocaleSwitcher.js
@@ -2,43 +2,15 @@
 import { jsx } from '@emotion/core'
 import { useLingui } from '@lingui/react'
 import { locales, activate } from './i18n.config'
-import { Box, PseudoBox, VisuallyHidden } from '@chakra-ui/core'
+import { Box } from '@chakra-ui/core'
+import { A } from './components/link'
 
 const Toggler = props => {
   const { locale } = props
   return (
-    <PseudoBox
-      as="button"
-      key={locale}
-      padding={0}
-      onClick={() => activate(locale)}
-      _focus={{
-        outline: `3px solid #ffbf47`,
-      }}
-      color="blue.600"
-    >
-      <VisuallyHidden>{locales[locale]}</VisuallyHidden>
-      <PseudoBox
-        aria-hidden
-        fontSize="lg"
-        d={{ base: 'none', md: 'flex' }}
-        alignItems="center"
-        justifyContent="center"
-      >
-        {locales[locale]}
-      </PseudoBox>
-      <PseudoBox
-        aria-hidden
-        d={{ base: 'flex', md: 'none' }}
-        bg="gray.100"
-        textTransform="uppercase"
-        size={10}
-        alignItems="center"
-        justifyContent="center"
-      >
-        {locale}
-      </PseudoBox>
-    </PseudoBox>
+    <A key={locale} padding={0} onClick={() => activate(locale)}>
+      {locales[locale]}
+    </A>
   )
 }
 

diff --git a/f2/src/ThankYouPage.js b/f2/src/ThankYouPage.js
@@ -65,7 +65,7 @@ export const ThankYouPage = () => {
             color="black"
             borderColor="green.400"
             spacing={6}
-            columns={{ base: 4 / 4, md: 6 / 8 }}
+            columns={{ base: 4 / 4, lg: 6 / 7 }}
           >
             <H1 mb={6}>
               <Trans id="thankYouPage.title" />
@@ -75,7 +75,7 @@ export const ThankYouPage = () => {
           </InfoCard>
         </Row>
       </Layout>
-      <Box bg="gray.200" py={10}>
+      <Box bg="gray.100" py={10}>
         <Layout columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }} pt={10}>
           <Stack spacing={4} shouldWrapChildren>
             <H2>
@@ -134,7 +134,7 @@ export const ThankYouPage = () => {
       </Box>
 
       {/* After help section*/}
-      <Layout pt={10} columns={{ base: 4 / 4, md: 6 / 8, lg: 7 / 12 }}>
+      <Layout pt={10} columns={{ base: 4 / 4, lg: 7 / 12 }}>
         <Stack spacing={6}>
           <Alert status="success">
             <AlertIcon mt={0} />
@@ -159,7 +159,7 @@ export const ThankYouPage = () => {
           </Box>
 
           <Row>
-            <LandingBox spacing={10} columns={{ base: 4 / 4, md: 6 / 8 }}>
+            <LandingBox spacing={10} columns={{ base: 4 / 4, md: 6 / 7 }}>
               {state.doneFinalFeedback ? (
                 <Box>
                   <H2 mb={2}>

diff --git a/f2/src/components/backbutton/index.js b/f2/src/components/backbutton/index.js
@@ -10,7 +10,6 @@ export const BackButton = ({ variant, variants, variantColor, ...props }) => (
   <Route
     render={({ history }) => (
       <LinkButton
-        textAlign="left"
         d="flex"
         alignItems="center"
         onClick={() => history.goBack()}

diff --git a/f2/src/components/button/index.js b/f2/src/components/button/index.js
@@ -5,24 +5,20 @@ import canada from '../../theme/canada'
 
 export const Button = ({ variant, variants, variantColor, ...props }) => (
   <ChakraButton
-    fontSize={{ base: 'lg', md: 'xl' }}
-    fontWeight="normal"
-    size="lg"
-    rounded="none"
+    {...canada.variants.buttons.default}
     variantColor={variantColor}
     _hover={{
       boxShadow: 'outlineHover',
     }}
     {...(variant === 'solid' &&
       variantColor !== 'gray' && {
-        borderBottomColor: canada.colors[variantColor][800],
+        borderColor: canada.colors[variantColor][800],
         bg: canada.colors[variantColor][700],
         _active: {
           bg: canada.colors[variantColor][800],
         },
       })}
     {...(variant === 'solid' && {
-      borderBottomWidth: '3px',
       bg: canada.colors[variantColor][700],
       _active: {
         bg: canada.colors[variantColor][800],
@@ -31,14 +27,14 @@ export const Button = ({ variant, variants, variantColor, ...props }) => (
     {...(variantColor === 'black' && {
       color: 'white',
       bg: canada.colors.gray[700],
-      borderBottomColor: canada.colors.gray[800],
+      borderColor: canada.colors.gray[800],
       _active: {
         bg: canada.colors.gray[800],
       },
     })}
     {...(variantColor === 'gray' && {
       bg: canada.colors[variantColor][200],
-      borderBottomColor: canada.colors[variantColor][300],
+      borderColor: canada.colors[variantColor][300],
       _active: {
         bg: canada.colors[variantColor][300],
       },

diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
@@ -7,6 +7,7 @@ import { UniqueID } from '../unique-id'
 import { VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
 import { useField } from 'react-final-form'
 import { ConditionalForm } from '../container'
+import canada from '../../theme/canada'
 
 export const CheckboxAdapter = ({
   name,
@@ -52,28 +53,7 @@ export const Checkbox = ({ input, label, isChecked, ...props }) => {
                 {...input}
               />
 
-              <ControlBox
-                borderWidth="2px"
-                borderColor="black"
-                size={10}
-                _hover={{
-                  boxShadow: 'outlineHover',
-                  borderColor: 'black',
-                }}
-                _checked={{
-                  borderColor: 'black',
-                  border: '3px',
-                }}
-                _checkedAndHover={{
-                  boxShadow: 'outlineHover',
-                }}
-                _focus={{
-                  outline: 'none',
-                  bg: 'white',
-                  boxShadow: 'outline',
-                  borderColor: 'black',
-                }}
-              >
+              <ControlBox {...canada.variants.inputs.checkboxes}>
                 <Icon name="check" size="24px" />
               </ControlBox>
 

diff --git a/f2/src/components/container/index.js b/f2/src/components/container/index.js
@@ -10,7 +10,7 @@ export const Container = props => <Box className="container" {...props} />
 
 export const InfoCard = props => (
   <Column columns={props.columns}>
-    <Box rounded="none" borderBottom="2px" p={4} py={8} {...props}>
+    <Box rounded="4px" border="1px" p={4} py={8} {...props}>
       {props.children}
     </Box>
   </Column>
@@ -19,10 +19,11 @@ export const InfoCard = props => (
 export const LandingBox = props => (
   <Column columns={props.columns}>
     <Stack
+      rounded="4px"
       d="block"
       height="100%"
       bg="gray.300"
-      borderBottom="2px"
+      border="1px"
       borderColor="gray.400"
       color="black"
       p={4}

diff --git a/f2/src/components/footer/index.js b/f2/src/components/footer/index.js
@@ -10,7 +10,14 @@ export const Footer = props => {
   const { i18n } = useLingui()
 
   return (
-    <Flex as="footer" {...props} py={4} fontFamily="body">
+    <Flex
+      as="footer"
+      {...props}
+      py={4}
+      fontFamily="body"
+      borderTop="4px"
+      borderColor="blue.900"
+    >
       <Layout>
         <Flex align="center" direction="row">
           <List px={0} d="flex" align="center" direction="row">

diff --git a/f2/src/components/header/presets.js b/f2/src/components/header/presets.js
@@ -23,7 +23,7 @@ export const H2 = props => (
     as="h2"
     fontSize="3xl"
     fontFamily="heading"
-    lineHeight={1.25}
+    lineHeight={1.5}
     {...props}
   >
     {props.children}
@@ -39,7 +39,7 @@ export const H3 = props => (
     as="h3"
     fontSize="xl"
     fontFamily="heading"
-    lineHeight={1.25}
+    lineHeight={1.5}
     {...props}
   >
     {props.children}
@@ -55,7 +55,7 @@ export const H4 = props => (
     as="h4"
     fontSize="lg"
     fontFamily="heading"
-    lineHeight={1.25}
+    lineHeight={1.5}
     color="gray.700"
     {...props}
   >
@@ -72,7 +72,7 @@ export const H5 = props => (
     as="h5"
     fontSize="lg"
     fontFamily="heading"
-    lineHeight={1.25}
+    lineHeight={1.5}
     color="gray.600"
     {...props}
   >
@@ -89,7 +89,7 @@ export const H6 = props => (
     as="h6"
     fontSize="lg"
     fontFamily="heading"
-    lineHeight={1.25}
+    lineHeight={1.5}
     color="gray.500"
     {...props}
   >

diff --git a/f2/src/components/input/index.js b/f2/src/components/input/index.js
@@ -1,29 +1,15 @@
 /** @jsx jsx **/
 import { jsx } from '@emotion/core'
 import { Input as ChakraInput } from '@chakra-ui/core'
+import canada from '../../theme/canada'
 
 export const Input = props => (
   <ChakraInput
     onKeyPress={e => {
       e.key === 'Enter' && e.preventDefault()
     }}
     autoComplete="off"
-    rounded="none"
-    borderWidth="2px"
-    borderColor="black"
-    maxW="300px"
-    transition="0"
-    _hover={{
-      boxShadow: 'outlineHover',
-      borderColor: 'black',
-    }}
-    _focus={{
-      outline: 'none',
-      bg: 'white',
-      boxShadow: 'outline',
-      borderColor: 'black',
-      border: '3px',
-    }}
+    {...canada.variants.inputs.inputs}
     {...props.input}
     {...props}
   />

diff --git a/f2/src/components/link/index.js b/f2/src/components/link/index.js
@@ -9,8 +9,12 @@ import { Link as ChakraLink } from '@chakra-ui/core'
 export const Link = props => (
   <ChakraLink
     as={ReactRouterLink}
-    color="blue.600"
+    color="blue.700"
+    textDecoration="underline"
     fontSize={['md', null, 'lg', null]}
+    _hover={{
+      color: 'blue.hover',
+    }}
     {...props}
   >
     {props.children}
@@ -35,7 +39,12 @@ ButtonLink.propTypes = {
 // Looks like a link, acts as a button
 export const LinkButton = props => (
   <ChakraLink
-    fontSize="lg"
+    color="blue.700"
+    textDecoration="underline"
+    fontSize={['md', null, 'lg', null]}
+    _hover={{
+      color: 'blue.hover',
+    }}
     {...props}
     role="button"
     _active={{
@@ -52,7 +61,14 @@ ButtonLink.propTypes = {
 
 // An anchor link. needs to contain an HREF. Useful for links outside the app
 export const A = props => (
-  <ChakraLink color="blue.600" {...props}>
+  <ChakraLink
+    color="blue.700"
+    textDecoration="underline"
+    _hover={{
+      color: 'blue.hover',
+    }}
+    {...props}
+  >
     {props.children}
   </ChakraLink>
 )

diff --git a/f2/src/components/list-item/presets.js b/f2/src/components/list-item/presets.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 export const Li = props => (
   <ListItem
     fontSize={['lg', null, 'xl', null]}
-    lineHeight={1.25}
+    lineHeight={1.5}
     fontFamily="body"
     color="black"
     {...props}

diff --git a/f2/src/components/ordered-list/presets.js b/f2/src/components/ordered-list/presets.js
@@ -11,7 +11,7 @@ export const Ol = props => {
       stylePos="outside"
       styleType={listStyleType}
       ml={5}
-      spacing={1}
+      spacing={2}
       {...rest}
     >
       {props.children}

diff --git a/f2/src/components/paragraph/presets.js b/f2/src/components/paragraph/presets.js
@@ -5,7 +5,7 @@ import { Text } from '@chakra-ui/core'
 export const P = props => (
   <Text
     fontSize={['lg', null, 'xl', null]}
-    lineHeight={1.25}
+    lineHeight={1.5}
     fontFamily="body"
     mb={4}
     color="black"
@@ -22,7 +22,7 @@ P.propTypes = {
 export const Lead = props => (
   <Text
     fontSize={['xl', null, '2xl', null]}
-    lineHeight={1.25}
+    lineHeight={1.5}
     fontFamily="body"
     mb={4}
     color="black"