Switch app font to JetBrains Mono

package-lock.json

@@ -8,6 +8,7 @@
       "name": "proxywarden",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@tauri-apps/api": "^2.0.0",
         "@tauri-apps/plugin-dialog": "^2.7.1",
         "lucide-react": "^1.23.0",
@@ -747,6 +748,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",

package.json

@@ -11,6 +11,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@tauri-apps/api": "^2.0.0",
     "@tauri-apps/plugin-dialog": "^2.7.1",
     "lucide-react": "^1.23.0",

src/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import '@fontsource-variable/jetbrains-mono';
 import { App } from './app/App';
 import './styles/app.css';
 

src/styles/app.css

@@ -17,15 +17,14 @@
   --border-strong: #343b49;
   --focus-ring: #3b82f6;
   font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
+    "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas,
+    "Liberation Mono", monospace;
   color: #e5e7eb;
   background: #101216;
   font-synthesis: none;
   height: 100%;
   overflow: hidden;
   scrollbar-color: #4b5568 #101216;
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -695,8 +694,7 @@ button:disabled {
   background: #101216;
   box-shadow: none;
   overflow-x: hidden;
-  overflow-y: scroll;
-  scrollbar-gutter: stable;
+  overflow-y: auto;
   padding: 14px 18px 20px;
 }