UI/typograhy: init typography extension

pkgs/webview-ui/app/src/components/TextInput.tsx

@@ -1,7 +1,6 @@
 import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
-import { createEffect, Show, type JSX } from "solid-js";
+import { Show, type JSX } from "solid-js";
 import cx from "classnames";
-import { createECDH } from "crypto";
 
 interface TextInputProps<T extends FieldValues, R extends ResponseData> {
   formStore: FormStore<T, R>;

pkgs/webview-ui/app/src/index.css

@@ -1,10 +1,28 @@
 @import "material-icons/iconfont/filled.css";
 /* List of icons: https://marella.me/material-icons/demo/ */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Archivo";
+  font-weight: 400;
+  src: url(../.fonts/Archiv0-Regular.otf) format("opentype");
+}
+@font-face {
+  font-family: "Archivo";
+  font-weight: 500;
+  src: url(../.fonts/Archiv0-Medium.otf) format("opentype");
+}
+@font-face {
+  font-family: "Archivo";
+  font-weight: 600;
+  src: url(../.fonts/Archiv0-Bold.otf) format("opentype");
+}
+
 html {
+  @apply font-sans;
   overflow-x: hidden;
   overflow-y: scroll;
 }

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -17,7 +17,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
     }
   });
   return (
-    <div class="h-screen bg-gradient-to-b from-white to-base-100 p-4">
+    <div class="h-screen bg-base-100 p-4">
       <div class="drawer lg:drawer-open ">
         <input
           id="toplevel-drawer"