change font

frontend/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.0.19",
     "@it-incubator/prettier-config": "^0.1.2",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

frontend/src/components/settings-dialog.tsx

@@ -70,7 +70,12 @@ export function SettingsDialog() {
             }
           >
             <div className={"space-y-0.5"}>
-              <Label htmlFor={"format-dates"}>Automatically format dates</Label>
+              <Label
+                className={"font-medium text-base"}
+                htmlFor={"format-dates"}
+              >
+                Automatically format dates
+              </Label>
               <p className={"text-sm text-muted-foreground"}>
                 When turned on, will show timestamp cells in tables in a human
                 readable format
@@ -89,7 +94,10 @@ export function SettingsDialog() {
             }
           >
             <div className={"space-y-0.5"}>
-              <Label htmlFor={"show-images-preview"}>
+              <Label
+                htmlFor={"show-images-preview"}
+                className={"font-medium text-base"}
+              >
                 Show previews for images
               </Label>
               <p className={"text-sm text-muted-foreground"}>
@@ -113,7 +121,9 @@ export function SettingsDialog() {
             }
           >
             <div className={"space-y-0.5"}>
-              <Label>Pagination options</Label>
+              <Label className={"font-medium text-base"}>
+                Pagination options
+              </Label>
               <p className={"text-sm text-muted-foreground"}>
                 Add or remove options for the amount of rows per page
               </p>

frontend/src/main.tsx

@@ -1,6 +1,12 @@
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
+import "@fontsource/inter/300.css";
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/inter/800.css";
 import "./index.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

frontend/src/routes/__root.tsx

@@ -20,13 +20,7 @@ import {
   useParams,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import {
-  Database,
-  PanelLeft,
-  PanelLeftClose,
-  Rows3,
-  Table2,
-} from "lucide-react";
+import { Database, PanelLeft, PanelLeftClose, Rows3 } from "lucide-react";
 
 export const Route = createRootRoute({
   component: Root,
@@ -97,13 +91,17 @@ function Root() {
                     to={"/db/$dbName/tables"}
                     params={{ dbName }}
                     activeOptions={{ exact: true }}
+                    title={dbName}
                     className={cn(
                       "flex items-center gap-2 rounded py-1.5 pl-1.5",
                       "hover:bg-muted",
                       "[&.active]:bg-muted [&.active]:font-semibold",
                     )}
                   >
-                    <Database className={"size-4"} /> {dbName}
+                    <Database className={"size-4"} />
+                    <span className={"max-w-full inline-block truncate"}>
+                      {dbName}
+                    </span>
                   </Link>
                 )}
                 {tables?.map((table) => {
@@ -116,19 +114,20 @@ function Root() {
                     >
                       <Link
                         className={cn(
-                          "w-full flex gap-2 items-center",
+                          "max-w-full inline-block truncate",
                           "hover:underline",
-                          "[&.active]:font-semibold",
+                          "[&.active]:font-medium",
                         )}
+                        title={table.table_name}
                         to={"/db/$dbName/tables/$tableName"}
                         params={{ tableName: table.table_name, dbName: dbName }}
                       >
-                        <Table2 className={"size-4 shrink-0"} />
                         {table.table_name}
                       </Link>
                       <Link
                         className={cn(
-                          "hover:underline shrink-0",
+                          "shrink-0",
+                          "hover:underline",
                           buttonVariants({ variant: "ghost", size: "iconSm" }),
                           "[&.active]:bg-muted",
                         )}

frontend/src/routes/db/$dbName/tables/$tableName/index.tsx

@@ -103,7 +103,7 @@ function TableDetailsTable() {
             }}
             className={cn("flex gap-2 items-center", "hover:underline")}
           >
-            Explore data <ArrowRight />
+            Explore data <ArrowRight className={"size-4"} />
           </Link>
         </div>
 

frontend/tailwind.config.js

@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
   ],
   prefix: "",
   theme: {
@@ -17,6 +18,9 @@ module.exports = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -74,4 +78,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};