feat: render images better

src/Auth.tsx

@@ -23,7 +23,7 @@ export const isAuthenticated = () => {
   return new Date().getTime() < expiresAt;
 };
 
-export const getAccessToken = () => {
+const getAccessToken = () => {
   return localStorage.getItem('access_token');
 };
 

src/components/EntryForm.tsx

@@ -17,8 +17,8 @@ import VisuallyHidden from '../components/VisuallyHidden';
 import Switch from '../components/Switch';
 import { WEEKDAYS, isClosed } from '../openingTimes';
 
-import crosshair from '../images/crosshair-small.svg';
-import uolLogo from '../images/domestos_use_our_loos_logo.png';
+import crosshair from '../../public/crosshair-small.svg';
+import uolLogo from '../../public/domestos_use_our_loos_logo.png';
 
 const openingTimesFields = WEEKDAYS.flatMap((day) => {
   return [

src/components/Footer.tsx

@@ -4,68 +4,74 @@ import styled from '@emotion/styled';
 
 import Box from './Box';
 import Text from './Text';
+import Image from 'next/image'
+import domestosLogo from '../../public/domestos_logo3.png';
+import domestosUseLoos from '../../public/domestos_use_our_loos_logo.png';
 
-import domestosLogo from '../images/domestos_logo3.png';
-import domestosUseLoos from '../images/domestos_use_our_loos_logo.png';
-
-const DomestosLogo = styled((props) => (
-  <img {...props} src={domestosLogo} alt="Domestos" />
-))`
-  height: 2rem;
-`;
+const DomestosLogo = (props) => (
+  <Box height="2rem" width="2rem">
+    <Image {...props} layout="responsive" src={domestosLogo} alt="Domestos" />
+  </Box>
+)
 
-const UseOurLoosLogo = styled((props) => (
-  <img {...props} src={domestosUseLoos} alt="Domestos: Use our loos" />
-))`
-  height: 2rem;
-`;
+const UseOurLoosLogo = (props) => (
+  <Box height="2rem" width="2rem">
+    <Image {...props} src={domestosUseLoos} layout="responsive" quality={100} alt="Domestos: Use our loos" />
+  </Box>
+)
 
-const Footer = ({ children = null }) => (
-  <Box
-    as="footer"
-    display="flex"
-    flexDirection={['column', 'row']}
-    justifyContent="space-between"
-    alignItems="center"
-    px={[3, 4]}
-    py={[0, 2]}
-    bg={['transparent', 'lightGrey']}
-    color="primary"
-    height={['auto', 60]}
-  >
-    <Link
-      href="/use-our-loos"
-      title="Domestos: Use Our Loos Campaign"
-      scroll={true}
+const Footer = ({ children = null }) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+  return (
+    mounted && <Box
+      as="footer"
+      display="flex"
+      flexDirection={['column', 'row']}
+      justifyContent="space-between"
+      alignItems="center"
+      px={[3, 4]}
+      py={[0, 2]}
+      bg={['transparent', 'lightGrey']}
+      color="primary"
+      height={['auto', 60]}
     >
-      <Box display="flex" flexDirection={['column', 'row']} alignItems="center">
-        <Text fontSize={14}>
-          <small>Proudly sponsored by Domestos</small>
-        </Text>
+      <Link
+        href="/use-our-loos"
+        title="Domestos: Use Our Loos Campaign"
+        scroll={true}
+      >
+        <Box display="flex" flexDirection={['column', 'row']} alignItems="center">
+          <Text fontSize={14}>
+            <small>Proudly sponsored by Domestos</small>
+          </Text>
 
-        <Box display="flex" ml={[0, 3]} mb={[3, 0]} order={[-1, 0]}>
-          <UseOurLoosLogo />
-          <Box ml={2}>
-            <DomestosLogo />
+          <Box display="flex" ml={[0, 3]} mb={[3, 0]} order={[-1, 0]}>
+            <UseOurLoosLogo />
+            <Box ml={2}>
+              <DomestosLogo />
+            </Box>
           </Box>
         </Box>
-      </Box>
-    </Link>
+      </Link>
 
-    <Box order={[-1, 0]} mb={[4, 0]}>
-      <Text fontSize={[12, 16]}>
-        <Box as="ul" display={['block', 'flex']} alignItems="center">
-          {React.Children.map(children, (child, index) => (
-            <li key={index}>{child}</li>
-          ))}
+      <Box order={[-1, 0]} mb={[4, 0]}>
+        <Text fontSize={[12, 16]}>
+          <Box as="ul" display={['block', 'flex']} alignItems="center">
+            {React.Children.map(children, (child, index) => (
+              <li key={index}>{child}</li>
+            ))}
 
-          <Box as="li" ml={[0, 4]}>
-            <Link href="/privacy">Privacy Policy</Link>
+            <Box as="li" ml={[0, 4]}>
+              <Link href="/privacy">Privacy Policy</Link>
+            </Box>
           </Box>
-        </Box>
-      </Text>
+        </Text>
+      </Box>
     </Box>
-  </Box>
-);
+  )
+};
 
 export default Footer;

src/components/Header/Header.tsx

@@ -46,13 +46,17 @@ const CovidNotification = ({ onClose }) => (
 );
 
 const Header = ({ mapCenter, children }) => {
+  const [mounted, setMounted] = useState(false);
+  React.useEffect(() => {
+      setMounted(true)
+  }, [])
   const [isMenuVisible, setIsMenuVisible] = useState(false);
 
   const showCovidNotification =
     config.getSetting('notification', 'covid') !== 'dismissed';
 
   return (
-    <Box as="header">
+    mounted && <Box as="header">
       {showCovidNotification && (
         <CovidNotification
           onClose={() => {
@@ -81,7 +85,7 @@ const Header = ({ mapCenter, children }) => {
             <VisuallyHidden>Main menu</VisuallyHidden>
           </h2>
 
-          <Box as={Media} at="sm" display="flex" justifyContent="flex-end">
+          <Media at="sm" css={{display:"flex", justifyContent:"flex-end"}}>
             <button
               type="button"
               aria-expanded={isMenuVisible}
@@ -98,7 +102,7 @@ const Header = ({ mapCenter, children }) => {
                 children={children}
               />
             </Drawer>
-          </Box>
+          </Media>
 
           <Media greaterThan="sm">
             <MainMenu mapCenter={mapCenter} children={children} />

src/components/Header/MainMenu.tsx

@@ -113,9 +113,5 @@ const MainMenu = ({
     </Text>
   );
 };
-MainMenu.propTypes = {
-  // mobile footer
-  children: PropTypes.any,
-};
 
 export default MainMenu;

src/components/Logo/Logo.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
-import Box from '../Box';
-
+import Image from 'next/image'
 import logo from './logo.svg';
+import Box from '../Box';
 
 const Logo = (props) => (
-  <Box
-    as="img"
-    src={logo}
-    alt="The Great British Toilet Map"
-    width={154}
-    {...props}
-  />
+  <Box width="150px">
+    <Image
+      src={logo}
+      alt="The Great British Toilet Map"
+      layout="responsive"
+      {...props}
+    /></Box>
 );
 
 export default Logo;

src/components/LooMap/LooMap.tsx

@@ -16,7 +16,7 @@ import Marker from './Marker';
 import VisuallyHidden from '../VisuallyHidden';
 import { Media } from '../Media';
 
-import crosshair from '../../images/crosshair.svg';
+import crosshair from '../../../public/crosshair.svg';
 
 import 'leaflet/dist/leaflet.css';
 

src/components/ToiletDetailsPanel.tsx

@@ -41,7 +41,7 @@ import { /* getIsOpen, */ WEEKDAYS, isClosed } from '../openingTimes';
 import { useMapState } from './MapState';
 import { useMutation } from '../graphql/fetcher';
 
-import uolLogo from '../images/uol-logo.svg';
+import uolLogo from '../../public/uol-logo.svg';
 
 const FIND_LOO_BY_ID_QUERY = print(loader('../graphql/findLooById.graphql'));
 

src/pages/_app.tsx

@@ -12,11 +12,11 @@ import { SWRConfig } from 'swr';
 import ProtectedRoute from '../components/ProtectedRoute';
 import AuthCallback from './AuthCallback';
 import HomePage from './HomePage';
-import AboutPage from './AboutPage';
+import AboutPage from './about';
 import ContactPage from './ContactPage';
 import ContributePage from './ContributePage';
 import MapPage from './MapPage';
-import UseOurLoosPage from './UseOurLoosPage';
+import UseOurLoosPage from './use-our-loos';
 import CookiesPage from './CookiesPage';
 import PrivacyPage from './PrivacyPage';
 import NotFound from './404';

src/pages/UseOurLoosPage.tsx → src/pages/use-our-loos.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-
+import Image from 'next/image'
 import PageLayout from '../components/PageLayout';
 import Container from '../components/Container';
 import Button from '../components/Button';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
 import Box from '../components/Box';
-
+import {css} from '@emotion/react'
 import config from '../config';
 
-import uolLogo from '../images/domestos-use-our-loos-full.png';
+import uolLogo from '../../public/domestos-use-our-loos-full.png';
 
 const UseOurLoosPage = (props) => {
   return (
@@ -51,9 +51,9 @@ const UseOurLoosPage = (props) => {
           flexDirection="column"
           alignItems="center"
         >
-          <Box
-            as="img"
-            maxWidth={266}
+          <Image
+            height={266}
+            width={266}
             src={uolLogo}
             alt="Use Our Loos is powered by Domestos"
           />