From 69f0d520d06506269fbf36ae1fa205e358198784 Mon Sep 17 00:00:00 2001
From: Petro Silenius <petro.silenius@gmail.com>
Date: Sun, 13 Feb 2022 19:39:05 +0200
Subject: [PATCH 1/6] Create custom 404 page

---
 pages/404.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 pages/404.tsx

diff --git a/pages/404.tsx b/pages/404.tsx
new file mode 100644
index 0000000..d862645
--- /dev/null
+++ b/pages/404.tsx
@@ -0,0 +1,29 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import { Button, Grid, Typography, Link as MuiLink } from '@mui/material';
+
+const Custom404 = () => {
+  return (
+    <main>
+      <Grid container direction="column" alignItems="center" justifyContent="center" spacing={4} sx={{minHeight: 'calc(100vh - 80px - 220px)'}} >
+          <Grid item>
+          <Typography variant="h5">
+            404
+          </Typography>
+          </Grid>
+          <Grid item>
+          <Typography component="h1" variant="h5">
+              Sivua ei löytynyt
+          </Typography>
+          </Grid>
+          <Grid item>
+          <Link href="/" passHref>
+              <Button variant="contained">Takaisin etusivulle</Button>
+          </Link>
+          </Grid>
+      </Grid>
+    </main>
+  );
+};
+
+export default Custom404;

From a891a955fdf3d33cd0cf8cb8834772b19d52ad13 Mon Sep 17 00:00:00 2001
From: Petro Silenius <petro.silenius@gmail.com>
Date: Sun, 13 Feb 2022 19:39:24 +0200
Subject: [PATCH 2/6] Set filter fields to fullwidth on mobile resolutions

---
 components/SearchForm.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/SearchForm.tsx b/components/SearchForm.tsx
index eb47a61..b8bf94c 100644
--- a/components/SearchForm.tsx
+++ b/components/SearchForm.tsx
@@ -101,7 +101,7 @@ const SearchForm = ({
         alignItems="center"
         sx={{ pt: '5px', pb: '15px', borderBottom: '1px solid #C4C4C4' }}
       >
-        <Grid item xs={7} sm={4}>
+        <Grid item xs={12} sm={4}>
           <TextField
             id="name"
             data-testid="name"
@@ -111,7 +111,7 @@ const SearchForm = ({
             label="Yrityksen nimi tai y-tunnus"
           />
         </Grid>
-        <Grid item xs={5} sm={4}>
+        <Grid item xs={12} sm={4}>
           <Autocomplete
             id="certificate"
             data-testid="certificate"
@@ -128,7 +128,7 @@ const SearchForm = ({
             renderInput={(params) => <TextField {...params} label="Sertifikaatti" />}
           />
         </Grid>
-        <Grid item xs={8} sm={3}>
+        <Grid item xs={12} sm={3}>
           <Autocomplete
             id="city"
             data-testid="city"
@@ -145,7 +145,7 @@ const SearchForm = ({
             renderInput={(params) => <TextField {...params} label="Kunta/Maakunta" />}
           />
         </Grid>
-        <Grid item xs={4} sm={1}>
+        <Grid item xs={12} sm={1}>
           <Button
             type="submit"
             variant="contained"

From 88b9ae98227d203ff58574bbeb72d5073787529b Mon Sep 17 00:00:00 2001
From: Petro Silenius <petro.silenius@gmail.com>
Date: Sun, 13 Feb 2022 19:46:36 +0200
Subject: [PATCH 3/6] Change contact email to stf manager email

---
 pages/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/[id].tsx b/pages/[id].tsx
index 0d8f450..a137c65 100644
--- a/pages/[id].tsx
+++ b/pages/[id].tsx
@@ -67,7 +67,7 @@ const CompanyResult = ({ company }: { company: Company }) => {
       </Grid>
       <Typography align="center" sx={{ mt: '20vh' }}>
         Ovatko yrityksen tiedot virheelliset? Ota yhteyttä osoitteeseen{' '}
-        <MuiLink href="mailto:email@email.com">email@email.com</MuiLink>
+        <MuiLink href="mailto:virpi.aittokoski@businessfinland.fi">virpi.aittokoski (at) businessfinland.fi</MuiLink>
       </Typography>
     </main>
   );

From 00528890d2e401dbf8659959ac789b344c3e45cc Mon Sep 17 00:00:00 2001
From: Petro Silenius <petro.silenius@gmail.com>
Date: Sun, 13 Feb 2022 22:19:27 +0200
Subject: [PATCH 4/6] Render cert logos smaller on mobile

---
 components/CertificateItem.tsx | 9 +++++++--
 components/CompanyListItem.tsx | 4 +---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/CertificateItem.tsx b/components/CertificateItem.tsx
index 2517456..b99cbc0 100644
--- a/components/CertificateItem.tsx
+++ b/components/CertificateItem.tsx
@@ -1,8 +1,13 @@
 import Link from 'next/link';
 import { Link as MuiLink } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const CertificateItem = ({ certificate }: { certificate: Certificate }) => {
   const { id, logoUrl, name } = certificate;
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
+
 
   return (
     <Link href={`/sert/${id}`} passHref>
@@ -10,8 +15,8 @@ const CertificateItem = ({ certificate }: { certificate: Certificate }) => {
         <img
           src={logoUrl}
           alt={name}
-          height="100px"
-          width="200px"
+          height={mobile ? '50px' : '100px'}
+          width={mobile ? '100px' : '200px'}
           style={{ objectFit: 'contain' }}
         />
       </MuiLink>
diff --git a/components/CompanyListItem.tsx b/components/CompanyListItem.tsx
index f8efb22..0d1c6c2 100644
--- a/components/CompanyListItem.tsx
+++ b/components/CompanyListItem.tsx
@@ -10,8 +10,7 @@ const capitalizeFirstLetter = (string: string) => {
 
 const CompanyListItem = ({ company }: { company: Company }) => {
   return (
-    <Grid item className="company-item">
-      <Grid container justifyContent="space-between" alignItems="center">
+      <Grid container item xs={12} className="company-item" justifyContent="space-between" alignItems="center" wrap='nowrap'>
         <Grid item>
           <Link href={`/${company.vatNumber}`} passHref>
             <MuiLink color="text.primary" sx={{ fontWeight: '600' }}>
@@ -29,7 +28,6 @@ const CompanyListItem = ({ company }: { company: Company }) => {
           })}
         </Grid>
       </Grid>
-    </Grid>
   );
 };
 

From 035735e6206d305ca0608c357181a3ccfdd2f69e Mon Sep 17 00:00:00 2001
From: Petro Silenius <petro.silenius@gmail.com>
Date: Sun, 13 Feb 2022 22:34:08 +0200
Subject: [PATCH 5/6] Add padding to certificate page elements

---
 pages/sert/[id].tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/pages/sert/[id].tsx b/pages/sert/[id].tsx
index 7fa1580..5f5f2da 100644
--- a/pages/sert/[id].tsx
+++ b/pages/sert/[id].tsx
@@ -1,6 +1,6 @@
 import type { GetStaticProps, GetStaticPaths } from 'next';
 import Head from 'next/head';
-import { Button, Grid, Typography, Link as MuiLink } from '@mui/material';
+import { Box, Button, Grid, Typography, Link as MuiLink } from '@mui/material';
 import certificates from 'enums/certificates.json';
 import { Print } from '@mui/icons-material';
 
@@ -14,7 +14,7 @@ const CertificateResult = ({ certificate }: { certificate: Certificate }) => {
       <Button
         variant="contained"
         onClick={() => window.print()}
-        sx={{ float: 'right', mt: '15px' }}
+        sx={{ float: 'right', my: '15px' }}
         data-testid="print-button"
       >
         <Print /> Tulosta
@@ -24,7 +24,13 @@ const CertificateResult = ({ certificate }: { certificate: Certificate }) => {
           <Typography component="h2" variant="h5" data-testid="cert-name">
             {certificate.name}
           </Typography>
-          <img src={certificate.logoUrl} alt={certificate.name} width="300px" />
+          <Box sx={{ my: '15px' }}>
+            <img
+              src={certificate.logoUrl}
+              alt={certificate.name}
+              width="300px"
+            />
+          </Box>
         </Grid>
         <Grid item xs={12} md={8}>
           <Typography component="h3" variant="h5">
@@ -38,13 +44,14 @@ const CertificateResult = ({ certificate }: { certificate: Certificate }) => {
               {certificate.website}
             </MuiLink>
           </Typography>
-          <Typography component="h3" variant="h5" sx={{ my: '15px' }}>
+          <Typography component="h3" variant="h5" sx={{ mt: '30px' }}>
             Sertifikaatin omaavat yritykset
           </Typography>
           <Button
             href={`/?cert=${certificate.id}`}
             variant="contained"
             data-testid="cert-companies"
+            sx={{ my: '25px' }}
           >
             Näytä yritykset
           </Button>

From 651fd281046accd3dbb99b9b0dc534fc3d85ed29 Mon Sep 17 00:00:00 2001
From: Petro Silenius <petro.silenius@gmail.com>
Date: Sun, 13 Feb 2022 22:34:14 +0200
Subject: [PATCH 6/6] Run prettier

---
 components/CertificateItem.tsx |  1 -
 components/CompanyListItem.tsx | 42 ++++++++++++++++++++--------------
 components/SearchForm.tsx      | 15 +++++++-----
 pages/404.tsx                  | 29 +++++++++++++----------
 pages/[id].tsx                 |  4 +++-
 5 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/components/CertificateItem.tsx b/components/CertificateItem.tsx
index b99cbc0..d6823fc 100644
--- a/components/CertificateItem.tsx
+++ b/components/CertificateItem.tsx
@@ -8,7 +8,6 @@ const CertificateItem = ({ certificate }: { certificate: Certificate }) => {
   const theme = useTheme();
   const mobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-
   return (
     <Link href={`/sert/${id}`} passHref>
       <MuiLink className="company-item-cert">
diff --git a/components/CompanyListItem.tsx b/components/CompanyListItem.tsx
index 0d1c6c2..35bd61b 100644
--- a/components/CompanyListItem.tsx
+++ b/components/CompanyListItem.tsx
@@ -10,24 +10,32 @@ const capitalizeFirstLetter = (string: string) => {
 
 const CompanyListItem = ({ company }: { company: Company }) => {
   return (
-      <Grid container item xs={12} className="company-item" justifyContent="space-between" alignItems="center" wrap='nowrap'>
-        <Grid item>
-          <Link href={`/${company.vatNumber}`} passHref>
-            <MuiLink color="text.primary" sx={{ fontWeight: '600' }}>
-              {company.name}
-            </MuiLink>
-          </Link>
-          <Typography>{capitalizeFirstLetter(company.city)}</Typography>
-        </Grid>
-        <Grid item>
-          {company.certificateId?.map((id) => {
-            const certificate = certificates.find((certificate) => certificate.id === id);
-            if (certificate) {
-              return <CertificateItem certificate={certificate} key={certificate.id} />;
-            }
-          })}
-        </Grid>
+    <Grid
+      container
+      item
+      xs={12}
+      className="company-item"
+      justifyContent="space-between"
+      alignItems="center"
+      wrap="nowrap"
+    >
+      <Grid item>
+        <Link href={`/${company.vatNumber}`} passHref>
+          <MuiLink color="text.primary" sx={{ fontWeight: '600' }}>
+            {company.name}
+          </MuiLink>
+        </Link>
+        <Typography>{capitalizeFirstLetter(company.city)}</Typography>
       </Grid>
+      <Grid item>
+        {company.certificateId?.map((id) => {
+          const certificate = certificates.find((certificate) => certificate.id === id);
+          if (certificate) {
+            return <CertificateItem certificate={certificate} key={certificate.id} />;
+          }
+        })}
+      </Grid>
+    </Grid>
   );
 };
 
diff --git a/components/SearchForm.tsx b/components/SearchForm.tsx
index b8bf94c..2a15904 100644
--- a/components/SearchForm.tsx
+++ b/components/SearchForm.tsx
@@ -70,12 +70,15 @@ const SearchForm = ({
       query.push(`offset=${offset}`);
     }
 
-    const request = new Request(`https://sertifikaattilukija.herokuapp.com/data?${query.join('&')}`, {
-      method: 'GET',
-      headers: new Headers({
-        'Content-Type': 'application/json',
-      }),
-    });
+    const request = new Request(
+      `https://sertifikaattilukija.herokuapp.com/data?${query.join('&')}`,
+      {
+        method: 'GET',
+        headers: new Headers({
+          'Content-Type': 'application/json',
+        }),
+      }
+    );
     const result = await fetch(request);
     const { data, totalResults, resultsFrom } = await result.json();
 
diff --git a/pages/404.tsx b/pages/404.tsx
index d862645..916b9df 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -5,22 +5,27 @@ import { Button, Grid, Typography, Link as MuiLink } from '@mui/material';
 const Custom404 = () => {
   return (
     <main>
-      <Grid container direction="column" alignItems="center" justifyContent="center" spacing={4} sx={{minHeight: 'calc(100vh - 80px - 220px)'}} >
-          <Grid item>
-          <Typography variant="h5">
-            404
-          </Typography>
-          </Grid>
-          <Grid item>
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        spacing={4}
+        sx={{ minHeight: 'calc(100vh - 80px - 220px)' }}
+      >
+        <Grid item>
+          <Typography variant="h5">404</Typography>
+        </Grid>
+        <Grid item>
           <Typography component="h1" variant="h5">
-              Sivua ei löytynyt
+            Sivua ei löytynyt
           </Typography>
-          </Grid>
-          <Grid item>
+        </Grid>
+        <Grid item>
           <Link href="/" passHref>
-              <Button variant="contained">Takaisin etusivulle</Button>
+            <Button variant="contained">Takaisin etusivulle</Button>
           </Link>
-          </Grid>
+        </Grid>
       </Grid>
     </main>
   );
diff --git a/pages/[id].tsx b/pages/[id].tsx
index a137c65..7cd9715 100644
--- a/pages/[id].tsx
+++ b/pages/[id].tsx
@@ -67,7 +67,9 @@ const CompanyResult = ({ company }: { company: Company }) => {
       </Grid>
       <Typography align="center" sx={{ mt: '20vh' }}>
         Ovatko yrityksen tiedot virheelliset? Ota yhteyttä osoitteeseen{' '}
-        <MuiLink href="mailto:virpi.aittokoski@businessfinland.fi">virpi.aittokoski (at) businessfinland.fi</MuiLink>
+        <MuiLink href="mailto:virpi.aittokoski@businessfinland.fi">
+          virpi.aittokoski (at) businessfinland.fi
+        </MuiLink>
       </Typography>
     </main>
   );