fix: SCE-20 Navbar use font Inter (#1115)

chanzuckerberg · Sep 24, 2024 · 2ffd87b · 2ffd87b
1 parent 920c0fb
commit 2ffd87b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-3adb7375
+        tag: sha-3b20504c
       replicaCount: 1
       env:
         # env vars common to all deployment stages

diff --git a/client/index.html b/client/index.html
@@ -44,6 +44,10 @@
       rel="stylesheet"
       crossorigin="anonymous"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <script type="text/javascript">

diff --git a/client/index_template.html b/client/index_template.html
@@ -44,6 +44,7 @@
       rel="stylesheet"
       crossorigin="anonymous"
     />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <script>
       var script = document.createElement('script')
       script.defer=true

diff --git a/client/src/components/NavBar/style.ts b/client/src/components/NavBar/style.ts
@@ -20,6 +20,23 @@ export const Wrapper = styled.div`
   top: 0;
   width: 100%;
   z-index: 1;
+
+  /* Increase specificity for targeted elements specified in index.html and index_template.html */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  span,
+  button,
+  input,
+  label,
+  text,
+  div {
+    font-family: "Inter", sans-serif;
+  }
 `;
 
 export const MainWrapper = styled.div`
@@ -110,4 +127,14 @@ export const BetaChip = styled(Tag)`
   color: white;
   margin-left: 4px;
   height: 16px !important;
+  margin-bottom: 0;
+  padding: 4px 6px;
+
+  .MuiChip-label {
+    font-family: "Inter", sans-serif;
+    font-weight: ${fontWeightSemibold};
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    font-size: 10px;
+  }
 `;