Changed colours to reflect primary/accent in theme (canada-ca#775)

Author: tparrott-cse

frontend/src/LocaleSwitcher.js

@@ -13,9 +13,9 @@ const Toggler = (props) => {
       padding={0}
       onClick={() => activate(locale)}
       _focus={{
-        outline: `3px solid yellow.250`,
+        outline: `3px solid accent`,
       }}
-      bg="blue.900"
+      bg="primary"
       color="#fff"
     >
       <VisuallyHidden>{locales[locale]}</VisuallyHidden>
@@ -28,13 +28,13 @@ const Toggler = (props) => {
         d={{ base: 'none', md: 'flex' }}
         alignItems="center"
         justifyContent="center"
-        _hover={{ color:"yellow.250", border:"1px solid", borderColor:"yellow.250" }}
+        _hover={{ color:"accent", border:"1px solid", borderColor:"accent" }}
       >
         {locales[locale]}
         <Image
               src={ svgGlobe }
               px={2}
-              alt={('Symbol of the Government of Canada')}
+              alt={('SVG Globe')}
             />
       </PseudoBox>
       <PseudoBox

frontend/src/Navigation.js

@@ -13,7 +13,7 @@ export const Navigation = ({ children, ...props }) => {
       padding={{ sm: '0.6rem', md: '0.80rem', lg: '1rem', xl: '1rem' }}
       bg="#fff"
       py={15.5}
-      color="blue.900"
+      color="primary"
       borderBottom="2px solid"
       borderBottomColor="gray.300"
       {...props}

frontend/src/TopBanner.js

@@ -10,7 +10,7 @@ export const TopBanner = props => {
   const { i18n } = useLingui()
 
   return (
-    <Flex bg="blue.900"  borderBottom="3px solid" borderBottomColor="yellow.250">
+    <Flex bg="primary"  borderBottom="3px solid" borderBottomColor="accent">
       <Layout>
         <Flex
           maxW={{ sm: 540, md: 768, lg: 960, xl: 1200 }}