add custom monospace font, UI tweaks (#2382)

Author: Simek

components/Package/CodeBrowser/CodeBrowserContentHeader.tsx

@@ -12,10 +12,10 @@ export default function CodeBrowserContentHeader({ filePath, children }: Props)
   return (
     <View
       style={[
-        tw`flex min-h-[45px] flex-row justify-between gap-3 border-b border-palette-gray2 bg-default px-4 py-3 dark:border-default`,
+        tw`flex min-h-[45px] flex-row items-center justify-between gap-3 border-b border-palette-gray2 bg-default px-4 py-3 dark:border-default`,
         !children && tw`pr-20`,
       ]}>
-      <P style={[tw`font-mono mt-px font-bold`, { wordBreak: 'break-all' }]}>{filePath}</P>
+      <P style={[tw`font-mono text-[13px]`, { wordBreak: 'break-all' }]}>{filePath}</P>
       {children}
     </View>
   );

components/Package/CodeBrowser/CodeBrowserFileRow.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
-import { Label } from '~/common/styleguide';
+import { P } from '~/common/styleguide';
 import { FileIcon, FolderIcon, WarningBlockquote } from '~/components/Icons';
 import Tooltip from '~/components/Tooltip';
 import { getFileWarning } from '~/util/codeBrowser';
@@ -28,7 +28,7 @@ export default function CodeBrowserFileRow({
   const Icon = useMemo(() => (isDirectory ? FolderIcon : FileIcon), [isDirectory]);
 
   const rowStyle = [
-    tw`flex flex-row items-center gap-1.5 px-3 py-1 last:mb-20`,
+    tw`flex flex-row items-center gap-1.5 px-3 py-[3px] last:mb-20`,
     { paddingLeft: 12 + depth * 8 },
   ];
 
@@ -41,15 +41,15 @@ export default function CodeBrowserFileRow({
           isDirectory && tw`text-tertiary dark:text-accented`,
         ]}
       />
-      <Label
+      <P
         style={[
-          tw`font-mono select-none`,
-          isDirectory && tw`text-palette-gray5 dark:text-palette-gray4`,
+          tw`font-mono select-none text-[12px] font-light tracking-normal`,
+          isDirectory && tw`font-extralight text-palette-gray5 dark:text-palette-gray4`,
           isActive && tw`text-primary-darker dark:text-primary`,
           { wordBreak: 'break-word' },
         ]}>
         {label}
-      </Label>
+      </P>
       {warning && (
         <Tooltip
           trigger={

public/fonts/JetBrainsMono-Variable.woff2

@@ -24,6 +24,13 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
+}
+
 /* TODO: refactor colors and naming */
 :root {
   --primary: #61dafb;
@@ -77,6 +84,7 @@
   --inline-code-background: var(--gray-2);
 
   --quick-search-bg: #ffffff;
+  --code-font-weight: 400;
 }
 
 :root.dark {
@@ -117,6 +125,7 @@
   --inline-code-background: var(--gray-6);
 
   --quick-search-bg: #111114ef;
+  --code-font-weight: 300;
 }
 
 *:focus-visible {
@@ -139,6 +148,13 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+code,
+pre {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-weight: var(--code-font-weight);
+  font-variant-ligatures: none;
+}
+
 input:focus-visible {
   @apply rounded;
 }
@@ -435,6 +451,7 @@ select {
 
     & code {
       display: inline;
+      font-weight: 500;
     }
 
     &[align='center'] img {
@@ -501,10 +518,11 @@ select {
   }
 
   code {
-    font-size: 110%;
+    font-size: 85%;
     background-color: var(--inline-code-background);
     border-radius: 4px;
     padding: 1px 4px;
+    vertical-align: text-bottom;
   }
 
   pre {
@@ -785,6 +803,7 @@ select {
     overflow-wrap: anywhere;
     white-space: pre-wrap;
     line-height: 16px;
+    font-size: 75%;
   }
 }
 

styles/styles.css

@@ -49,7 +49,7 @@ export default {
     },
     fontFamily: {
       sans: ['Optimistic Display', 'ui-sans-serif', 'system-ui'],
-      mono: ['monospace', 'ui-monospace'],
+      mono: ['JetBrains Mono', 'monospace', 'ui-monospace'],
     },
     backgroundColor: {
       transparent: 'transparent',