style(admin): use geist mono for code blocks; smol ui updates (#39)

* use geist mono for code blocks * make sidebar bg visible * normal font on team selector
amalshaji · Apr 20, 2024 · 1afaa67 · 1afaa67
1 parent 5c7a491
commit 1afaa67
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/admin/src/portr_admin/static/geist-mono-latin-400-normal.woff2 b/admin/src/portr_admin/static/geist-mono-latin-400-normal.woff2
diff --git a/admin/src/web/src/lib/components/sidebarlink.svelte b/admin/src/web/src/lib/components/sidebarlink.svelte
@@ -8,7 +8,7 @@
   <Link let:active to={url}>
     <div
       class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary {active
-        ? 'bg-muted text-primary'
+        ? 'bg-[#f2f0f0] text-primary'
         : 'text-muted-foreground'}"
     >
       <slot />

diff --git a/admin/src/web/src/lib/components/team-selector.svelte b/admin/src/web/src/lib/components/team-selector.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <Select.Root bind:selected onSelectedChange={switchTeams}>
-  <Select.Trigger class="font-semibold text-[15px] tracking-tight">
+  <Select.Trigger class="text-[15px] tracking-tight">
     <div class="flex items-center space-x-2">
       <Avatar.Root class="w-6 h-6 rounded-full">
         <Avatar.Image
@@ -54,7 +54,7 @@
           <img
             src="https://api.dicebear.com/7.x/initials/svg?seed={team.slug}&backgroundColor=transparent&textColor=000000"
             alt={team.name}
-            class="w-5 h-5 rounded-full border mr-2 font-semibold"
+            class="w-5 h-5 rounded-full border mr-2"
           />
           {team.name}
         </Select.Item>

diff --git a/admin/src/web/src/pages/app/overview.svelte b/admin/src/web/src/pages/app/overview.svelte
@@ -28,6 +28,15 @@
   });
 </script>
 
+<svelte:head>
+  <style>
+    @font-face {
+      font-family: "Geist Mono";
+      src: url("/static/geist-mono-latin-400-normal.woff2") format("woff2");
+    }
+  </style>
+</svelte:head>
+
 <div class="p-6">
   <p class="text-lg py-2 font-semibold leading-none tracking-tight">
     Client setup

diff --git a/admin/src/web/tailwind.config.js b/admin/src/web/tailwind.config.js
@@ -56,6 +56,7 @@ const config = {
       },
       fontFamily: {
         sans: ["Geist Sans", ...fontFamily.sans],
+        mono: ["Geist Mono", ...fontFamily.mono],
       },
     },
   },