feat: Non-monospace font

Author: ernestii

packages/app/.storybook/preview-head.html

@@ -7,7 +7,3 @@
   href="https://fonts.gstatic.com"
   crossorigin="anonymous"
 />
-<link
-  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
-  rel="stylesheet"
-/>

packages/app/src/AppNav.components.tsx

@@ -64,7 +64,7 @@ export const AppNavUserMenu = ({
           m="sm"
           mt={8}
           px={8}
-          py={4}
+          py={6}
           radius="md"
           {...(isCollapsed && {
             p: 2,
@@ -85,6 +85,7 @@ export const AppNavUserMenu = ({
                   <Text
                     size="xs"
                     c="dimmed"
+                    lh={1.1}
                     style={{
                       fontSize: 11,
                       maxWidth: '100%',

packages/app/src/AutocompleteInput.tsx

@@ -162,7 +162,7 @@ export default function AutocompleteInput({
           ref={inputRef}
           type="text"
           placeholder={placeholder}
-          className="border-0 fs-7"
+          className="border-0 fs-7 mono"
           value={value}
           size={size}
           onChange={e => onChange(e.target.value)}

packages/app/src/LogSidePanel.tsx

@@ -2124,7 +2124,7 @@ function SidePanelHeader({
         <div>
           <div
             className="bg-hdx-dark p-3 overflow-auto"
-            style={{ maxHeight: 300 }}
+            style={{ maxHeight: 300, fontFamily: 'var(--font-family-mono)' }}
           >
             {stripAnsi(logData.body)}
           </div>

packages/app/src/LogTable.tsx

@@ -587,7 +587,7 @@ export const RawLogTable = memo(
 
     return (
       <div
-        className="overflow-auto h-100 fs-8 bg-inherit"
+        className="overflow-auto h-100 fs-8 bg-inherit mono"
         onScroll={e => {
           fetchMoreOnBottomReached(e.target as HTMLDivElement);
 

packages/app/src/PatternTable.tsx

@@ -294,7 +294,7 @@ const MemoPatternTable = memo(
 
     return (
       <div
-        className="overflow-auto h-100 fs-8 bg-inherit"
+        className="overflow-auto h-100 fs-8 bg-inherit mono"
         ref={tableContainerRef}
         // Fixes flickering scroll bar: https://github.com/TanStack/virtual/issues/426#issuecomment-1403438040
         // style={{ overflowAnchor: 'none' }}

packages/app/src/TeamPage.tsx

@@ -71,7 +71,7 @@ const APIKeyCopyButton = ({
           </div>
         }
       >
-        <div data-test-id={dataTestId} className="text-wrap text-break">
+        <div data-test-id={dataTestId} className="text-wrap text-break mono">
           {value}
         </div>
       </MButton>

packages/app/src/UserPreferencesModal.tsx

@@ -17,6 +17,7 @@ import {
 import { UserPreferences, useUserPreferences } from './useUserPreferences';
 
 const OPTIONS_FONTS = [
+  'IBM Plex Sans',
   'IBM Plex Mono',
   'Roboto Mono',
   'Inter',

packages/app/src/components/HyperJson.module.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   padding: 0px 4px;
   font-size: 12px;
+  font-family: var(--font-family-mono);
 }
 
 .withTabulate {

packages/app/src/useUserPreferences.tsx

@@ -7,7 +7,7 @@ export type UserPreferences = {
   isUTC: boolean;
   timeFormat: '12h' | '24h';
   theme: 'light' | 'dark';
-  font: 'IBM Plex Mono' | 'Inter';
+  font: 'IBM Plex Mono' | 'IBM Plex Sans' | 'Roboto Mono' | 'Inter' | string;
   backgroundEnabled?: boolean;
   backgroundUrl?: string;
   backgroundBlur?: number;
@@ -21,7 +21,7 @@ export const userPreferencesAtom = atomWithStorage<UserPreferences>(
     isUTC: false,
     timeFormat: '12h',
     theme: 'dark',
-    font: 'IBM Plex Mono',
+    font: 'IBM Plex Sans',
   },
 );
 

packages/app/styles/app.scss

@@ -2,9 +2,8 @@
 @import '~bootstrap/scss/bootstrap';
 @import url('https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
 
 .inter {
   font-family: Inter, Roboto, 'Helvetica Neue', sans-serif;
@@ -16,6 +15,10 @@
   font-family: 'IBM Plex Mono', monospace;
 }
 
+:root {
+  --font-family-mono: 'IBM Plex Mono', monospace;
+}
+
 html,
 body,
 html[class~='dark'] body {
@@ -158,7 +161,7 @@ html[class~='dark'] body {
 }
 
 body {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: $font-size-base * 0.875;
 }
 
@@ -522,7 +525,7 @@ div.react-datepicker {
   // background-color: $bg-dark;
   background-color: $body-bg;
 
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', monospace;
   font-size: 14px;
 
   // Calendar Month Header