Merge pull request #40 from Dataatti/UI-fixes

Mobile UI fixes, 404 page, update contact email
Dataatti · Feb 14, 2022 · 25fa4fd · 25fa4fd · vercel · Feb 14, 2022
2 parents 3108296 + b30e4c0
commit 25fa4fd
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 29 deletions.
diff --git a/components/CertificateItem.tsx b/components/CertificateItem.tsx
@@ -1,17 +1,21 @@
 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>
       <MuiLink className="company-item-cert">
         <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
@@ -10,24 +10,30 @@ const capitalizeFirstLetter = (string: string) => {
 
 const CompanyListItem = ({ company }: { company: Company }) => {
   return (
-    <Grid item className="company-item">
-      <Grid container justifyContent="space-between" alignItems="center">
-        <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
@@ -109,7 +109,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"
@@ -119,7 +119,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"
@@ -136,7 +136,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"
@@ -153,7 +153,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"

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -0,0 +1,34 @@
+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;
diff --git a/pages/[id].tsx b/pages/[id].tsx
@@ -74,7 +74,9 @@ const CompanyResult = ({ company }: { company: Company }) => {
       </Grid>
       <Typography align="center" sx={{ mt: '20vh' }}>
         Ovatko yrityksen tiedot virheelliset? Ota yhteyttä osoitteeseen{' '}
-        <MuiLink href="mailto:[email protected]">[email protected]</MuiLink>
+        <MuiLink href="mailto:[email protected]">
+          virpi.aittokoski (at) businessfinland.fi
+        </MuiLink>
       </Typography>
     </main>
   );

diff --git 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>