Merge pull request #784 from ONEARMY/removing-blob-from-nav

Removing svg blob from nav logo
ONEARMY · Nov 22, 2019 · b34ee1e · b34ee1e
2 parents ff3bad0 + 2cd19be
commit b34ee1e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 41 deletions.
diff --git a/src/assets/images/precious-plastic-logo-official.svg b/src/assets/images/precious-plastic-logo-official.svg
diff --git a/src/pages/common/Header/Header.tsx b/src/pages/common/Header/Header.tsx
@@ -76,6 +76,7 @@ export class Header extends React.Component<IProps> {
           pl={[4, 4, 0]}
           pr={[4, 4, 0]}
           sx={{ zIndex: 9999, position: 'relative' }}
+          height={[null, null, 80]}
         >
           <Flex>
             <Logo isMobile={true} />

diff --git a/src/pages/common/Header/Menu/Logo/Logo.tsx b/src/pages/common/Header/Menu/Logo/Logo.tsx
@@ -2,51 +2,22 @@ import React from 'react'
 import theme from 'src/themes/styled.theme'
 import { Link, Flex, Image } from 'rebass/styled-components'
 import styled from 'styled-components'
-import LogoImage from 'src/assets/images/logo.svg'
-import MobileLogoImage from 'src/assets/images/logo-mobile.svg'
-import LogoBackground from 'src/assets/images/logo-background.svg'
+
+import PPLogo from 'src/assets/images/precious-plastic-logo-official.svg'
 import Text from 'src/components/Text'
-import { zIndex } from 'src/themes/styled.theme'
 
 interface IProps {
   isMobile?: boolean
 }
 
 const LogoContainer = styled(Flex)`
-  height: 60px;
-  width: 200px;
   align-items: center;
   position: relative;
-  &:before {
-    content: '';
-    position: absolute;
-    background-image: url(${LogoBackground});
-    width: 250px;
-    height: 70px;
-    z-index: ${zIndex.logoContainer};
-    background-size: contain;
-    background-repeat: no-repeat;
-    top: 0;
-    left: 0px;
-  }
-  @media only screen and (max-width: ${theme.breakpoints[1]}) {
-    &:before {
-      left: -50px;
-    }
-  }
+  padding: 10px 0;
+
   @media only screen and (min-width: ${theme.breakpoints[1]}) {
-    &:before {
-      content: '';
-      position: absolute;
-      background-image: url(${LogoBackground});
-      width: 250px;
-      height: 70px;
-      z-index: 999;
-      background-size: contain;
-      background-repeat: no-repeat;
-      top: 0;
-      left: 0px;
-    }
+    margin-bottom: -50px;
+    padding: 0;
   }
 `
 
@@ -66,17 +37,21 @@ export class Logo extends React.Component<IProps> {
           >
             <Flex
               sx={{
-                width: ['50px', '50px', '45px'],
-                height: ['50px', '50px', '45px'],
+                width: ['50px', '50px', '100px'],
+                height: ['50px', '50px', '100px'],
               }}
             >
               <Image
-                src={this.props.isMobile ? MobileLogoImage : LogoImage}
-                width={50}
-                height={50}
+                src={PPLogo}
+                width={[50, 50, 100]}
+                height={[50, 50, 100]}
               />
             </Flex>
-            <Text ml={2} display={['none', 'none', 'block']}>
+            <Text
+              className="sr-only"
+              ml={2}
+              display={['none', 'none', 'block']}
+            >
               Precious Plastic
             </Text>
           </Link>

diff --git a/src/themes/app.globalStyle.js b/src/themes/app.globalStyle.js
@@ -61,4 +61,16 @@ export const GlobalStyle = createGlobalStyle`
   .ap-icon-pin {
     display: none;
   }
+
+  /* Screen-reader text only - Taken from bootstrap 4 */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+  }
 `