From 144430bef3ae0bb305bd0eeda23715ef7ddb91d8 Mon Sep 17 00:00:00 2001
From: Abhishek Dasgupta <abhishek.dasgupta@dtc.ox.ac.uk>
Date: Thu, 27 Oct 2022 15:53:10 +0100
Subject: [PATCH] curator/ui: use Inter everywhere

We have been using a combination of Mabry Pro and Inter, with Roboto
in a few places, which is the default Material UI font. This changes
all interface fonts to Inter, and brings the line list portal in
sync with the maps, which use Inter.
---
 .../ui/src/components/DataGuideDialog.tsx     |  2 +
 .../src/components/LinelistTable/Header.tsx   |  2 +-
 .../ui/src/components/ViewCase.tsx            |  5 +-
 verification/curator-service/ui/src/index.css | 95 ++-----------------
 .../curator-service/ui/src/theme/theme.ts     | 23 ++++-
 5 files changed, 34 insertions(+), 93 deletions(-)

diff --git a/verification/curator-service/ui/src/components/DataGuideDialog.tsx b/verification/curator-service/ui/src/components/DataGuideDialog.tsx
index b06a565e7..de9774773 100644
--- a/verification/curator-service/ui/src/components/DataGuideDialog.tsx
+++ b/verification/curator-service/ui/src/components/DataGuideDialog.tsx
@@ -40,6 +40,7 @@ const styles = (theme: Theme) =>
             cursor: 'pointer',
         },
         title: {
+            fontFamily: 'Inter',
             fontSize: 22,
             fontWeight: 'bold',
         },
@@ -60,6 +61,7 @@ const styles = (theme: Theme) =>
             },
         },
         textSection: {
+            fontFamily: 'Inter',
             marginBottom: '1rem',
         },
     });
diff --git a/verification/curator-service/ui/src/components/LinelistTable/Header.tsx b/verification/curator-service/ui/src/components/LinelistTable/Header.tsx
index 9e3266a3e..3ba72e034 100644
--- a/verification/curator-service/ui/src/components/LinelistTable/Header.tsx
+++ b/verification/curator-service/ui/src/components/LinelistTable/Header.tsx
@@ -52,7 +52,7 @@ const Header = () => {
 
     return (
         <Stack direction="row" spacing={3} alignItems="center">
-            <Typography variant="body1">{diseaseName} Linelist</Typography>
+            <Typography variant="inherit">{diseaseName} Linelist</Typography>
 
             <FormControl sx={{ minWidth: 200 }} variant="standard" size="small">
                 <InputLabel id="sort-by-select-label">Sort by</InputLabel>
diff --git a/verification/curator-service/ui/src/components/ViewCase.tsx b/verification/curator-service/ui/src/components/ViewCase.tsx
index 068413479..832a20859 100644
--- a/verification/curator-service/ui/src/components/ViewCase.tsx
+++ b/verification/curator-service/ui/src/components/ViewCase.tsx
@@ -94,6 +94,7 @@ const useStyles = makeStyles((theme) => ({
     },
     caseTitle: {
         marginTop: '1em',
+        fontFamily: 'Inter',
     },
     grid: {
         margin: '1em',
@@ -848,7 +849,7 @@ function RowContent(props: { content: string; isLink?: boolean }): JSX.Element {
     words(searchQuery);
 
     return (
-        <Grid item xs={8}>
+        <Grid item xs={8} style={{ fontSize: 14 }}>
             {props.isLink && props.content ? (
                 <a
                     href={createHref(props.content)}
@@ -880,7 +881,7 @@ function MultilinkRowContent(props: {
     links?: { title: string; link: string }[];
 }): JSX.Element {
     return (
-        <Grid item xs={8}>
+        <Grid item xs={8} style={{ fontSize: 14 }}>
             {props.links?.map((e) => (
                 <p key={e.title} style={{ margin: 0 }}>
                     <a
diff --git a/verification/curator-service/ui/src/index.css b/verification/curator-service/ui/src/index.css
index cee1b34ff..23db910f7 100644
--- a/verification/curator-service/ui/src/index.css
+++ b/verification/curator-service/ui/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
+
 html {
     height: 100%;    
 }
@@ -5,7 +7,7 @@ html {
 body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
         'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
         'Helvetica Neue', sans-serif;
     margin: 0;
@@ -28,93 +30,10 @@ a {
     height: 100%;
 }
 
-/*
- * Web Fonts from colophon-foundry.org
- *
- * The fonts included in this stylesheet are subject to the End User License you purchased
- * from Colophon Foundry. The fonts are protected under domestic and international trademark and
- * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
- * distributing this font software.
- *
- * (c) 2020 Colophon Foundry
- *
- * Licenced to University of Oxford 
- */
-
-@font-face {
-    font-family: 'Mabry Pro';
-    src: local('Mabry Pro'),
-        url(./fonts/mabry-regular-pro/mabry-regular-pro.ttf) format('truetype'),
-        url(./fonts/mabry-regular-pro/mabry-regular-pro.eot?#iefix)
-            format('embedded-opentype'),
-        url(./fonts/mabry-regular-pro/mabry-regular-pro.woff2) format('woff2'),
-        url(./fonts/mabry-regular-pro/mabry-regular-pro.woff) format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Mabry Pro';
-    src: local('Mabry Pro'),
-        url(./fonts/mabry-bold-pro/mabry-bold-pro.ttf) format('truetype'),
-        url(./fonts/mabry-bold-pro/mabry-bold-pro.eot?#iefix)
-            format('embedded-opentype'),
-        url(./fonts/mabry-bold-pro/mabry-bold-pro.woff2) format('woff2'),
-        url(./fonts/mabry-bold-pro/mabry-bold-pro.woff) format('woff');
-    font-weight: bold;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Mabry Pro';
-    src: local('Mabry Pro'),
-        url(./fonts/mabry-light-pro/mabry-light-pro.ttf) format('truetype'),
-        url(./fonts/mabry-light-pro/mabry-light-pro.eot?#iefix)
-            format('embedded-opentype'),
-        url(./fonts/mabry-light-pro/mabry-light-pro.woff2) format('woff2'),
-        url(./fonts/mabry-light-pro/mabry-light-pro.woff) format('woff');
-    font-weight: lighter;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Mabry Pro';
-    src: local('Mabry Pro'),
-        url(./fonts/mabry-italic-pro/mabry-italic-pro.ttf) format('truetype'),
-        url(./fonts/mabry-italic-pro/mabry-italic-pro.eot?#iefix)
-            format('embedded-opentype'),
-        url(./fonts/mabry-italic-pro/mabry-italic-pro.woff2) format('woff2'),
-        url(./fonts/mabry-italic-pro/mabry-italic-pro.woff) format('woff');
-    font-weight: normal;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Mabry Pro';
-    src: local('Mabry Pro'),
-        url(./fonts/mabry-bold-italic-pro/mabry-bold-italic-pro.ttf)
-            format('truetype'),
-        url(./fonts/mabry-bold-italic-pro/mabry-bold-italic-pro.eot?#iefix)
-            format('embedded-opentype'),
-        url(./fonts/mabry-bold-italic-pro/mabry-bold-italic-pro.woff2)
-            format('woff2'),
-        url(./fonts/mabry-bold-italic-pro/mabry-bold-italic-pro.woff)
-            format('woff');
-    font-weight: bold;
-    font-style: italic;
+.MuiTypography-root {
+    font-family: Inter !important;
 }
 
-@font-face {
-    font-family: 'Mabry Pro';
-    src: local('Mabry Pro'),
-        url(./fonts/mabry-light-italic-pro/mabry-light-italic-pro.ttf)
-            format('truetype'),
-        url(./fonts/mabry-light-italic-pro/mabry-light-italic-pro.eot?#iefix)
-            format('embedded-opentype'),
-        url(./fonts/mabry-light-italic-pro/mabry-light-italic-pro.woff2)
-            format('woff2'),
-        url(./fonts/mabry-light-italic-pro/mabry-light-italic-pro.woff)
-            format('woff');
-    font-weight: lighter;
-    font-style: italic;
+.MuiTypography-h1 {
+    font-size: 50px !important;
 }
diff --git a/verification/curator-service/ui/src/theme/theme.ts b/verification/curator-service/ui/src/theme/theme.ts
index aee3a0683..5547e8c90 100644
--- a/verification/curator-service/ui/src/theme/theme.ts
+++ b/verification/curator-service/ui/src/theme/theme.ts
@@ -73,7 +73,7 @@ export const theme = createTheme({
         },
     },
     typography: {
-        fontFamily: 'Mabry Pro, sans-serif',
+        fontFamily: 'Inter, sans-serif',
         fontSize: 14,
     },
     shape: {
@@ -118,7 +118,26 @@ export const theme = createTheme({
                     },
                     '&&& .MuiTypography-root': {
                         fontFamily: 'Inter',
-                        fontSize: '14px',
+                    },
+                },
+            },
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    fontFamily: 'Inter',
+                    '&&& .MuiTypography-root': {
+                        fontFamily: 'Inter',
+                    },
+                },
+            },
+        },
+        MuiTypography: {
+            styleOverrides: {
+                root: {
+                    fontFamily: 'Inter',
+                    '&&& .MuiTypography-root': {
+                        fontFamily: 'Inter',
                     },
                 },
             },