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.
globaldothealth · Oct 27, 2022 · 144430b · 144430b
1 parent eeaf4a5
commit 144430b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,11 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
+
 html {
     height: 100%;    
 }
 
 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
@@ -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',
                     },
                 },
             },