From 71140de04c3342cae2b598173ff691f70c956a27 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 19 Nov 2024 15:33:30 +0100
Subject: [PATCH] UI/fonts: migrate all text-* classes

---
 pkgs/webview-ui/app/src/Form/fields/Select.tsx |  2 +-
 .../app/src/Form/fields/TextInput.tsx          |  4 +++-
 pkgs/webview-ui/app/src/Form/form/index.tsx    | 16 +++++++++-------
 .../app/src/components/FileInput.tsx           |  4 +++-
 .../app/src/components/SelectInput.tsx         |  4 +++-
 .../app/src/components/TextInput.tsx           |  4 +++-
 pkgs/webview-ui/app/src/layout/header.tsx      |  2 +-
 .../webview-ui/app/src/routes/clans/create.tsx |  2 +-
 .../app/src/routes/clans/details.tsx           | 12 ++++++------
 pkgs/webview-ui/app/src/routes/clans/list.tsx  |  2 +-
 .../app/src/routes/machines/details.tsx        |  6 +++---
 .../webview-ui/app/src/routes/modules/list.tsx |  2 +-
 .../app/src/routes/welcome/index.tsx           |  2 +-
 pkgs/webview-ui/app/tailwind.config.ts         | 18 +-----------------
 14 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/pkgs/webview-ui/app/src/Form/fields/Select.tsx b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
index b58f5c4c8..5b0dd31d7 100644
--- a/pkgs/webview-ui/app/src/Form/fields/Select.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
@@ -219,7 +219,7 @@ export function SelectInput(props: SelectInputpProps) {
             <span class="label-text text-neutral">{props.helperText}</span>
           )}
           {props.error && (
-            <span class="label-text-alt font-bold text-error">
+            <span class="label-text-alt font-bold text-error-700">
               {props.error}
             </span>
           )}
diff --git a/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx b/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
index e9d15d454..96e665eaf 100644
--- a/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
@@ -60,7 +60,9 @@ export function TextInput(props: TextInputProps) {
           <span class="label-text text-neutral">{props.helperText}</span>
         )}
         {props.error && (
-          <span class="label-text-alt font-bold text-error">{props.error}</span>
+          <span class="label-text-alt font-bold text-error-700">
+            {props.error}
+          </span>
         )}
       </div>
     </label>
diff --git a/pkgs/webview-ui/app/src/Form/form/index.tsx b/pkgs/webview-ui/app/src/Form/form/index.tsx
index e531a7069..3f0df30e3 100644
--- a/pkgs/webview-ui/app/src/Form/form/index.tsx
+++ b/pkgs/webview-ui/app/src/Form/form/index.tsx
@@ -132,7 +132,7 @@ interface UnsupportedProps {
 
 const Unsupported = (props: UnsupportedProps) => (
   <div>
-    {props.error && <div class="font-bold text-error">{props.error}</div>}
+    {props.error && <div class="font-bold text-error-700">{props.error}</div>}
     <span>
       Invalid or unsupported schema entry of type:{" "}
       <b>{JSON.stringify(props.schema.type)}</b>
@@ -193,7 +193,7 @@ export function StringField<T extends FieldValues, R extends ResponseData>(
     props.schema.type !== "integer"
   ) {
     return (
-      <span class="text-error">
+      <span class="text-error-700">
         Error cannot render the following as String input.
         <Unsupported schema={props.schema} />
       </span>
@@ -339,7 +339,9 @@ interface OptionSchemaProps {
 }
 export function OptionSchema(props: OptionSchemaProps) {
   return (
-    <Switch fallback={<option class="text-error">Item spec unhandled</option>}>
+    <Switch
+      fallback={<option class="text-error-700">Item spec unhandled</option>}
+    >
       <Match when={typeof props.itemSpec === "string" && props.itemSpec}>
         {(o) => <option>{o()}</option>}
       </Match>
@@ -444,7 +446,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
 ) {
   if (props.schema.type !== "array") {
     return (
-      <span class="text-error">
+      <span class="text-error-700">
         Error cannot render the following as array.
         <Unsupported schema={props.schema} />
       </span>
@@ -621,7 +623,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
                             </ListValueDisplay>
                           )}
                         </For>
-                        <span class="label-text-alt font-bold text-error">
+                        <span class="label-text-alt font-bold text-error-700">
                           {fieldArray.error}
                         </span>
 
@@ -703,7 +705,7 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
 ) {
   if (props.schema.type !== "object") {
     return (
-      <span class="text-error">
+      <span class="text-error-700">
         Error cannot render the following as Object
         <Unsupported schema={props.schema} />
       </span>
@@ -748,7 +750,7 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
                   />
                 )}
                 {typeof propSchema === "boolean" && (
-                  <span class="text-error">
+                  <span class="text-error-700">
                     Schema: Object of Boolean not supported
                   </span>
                 )}
diff --git a/pkgs/webview-ui/app/src/components/FileInput.tsx b/pkgs/webview-ui/app/src/components/FileInput.tsx
index fddfa83b5..7b1ba238e 100644
--- a/pkgs/webview-ui/app/src/components/FileInput.tsx
+++ b/pkgs/webview-ui/app/src/components/FileInput.tsx
@@ -92,7 +92,9 @@ export function FileInput(props: FileInputProps) {
           aria-errormessage={`${props.name}-error`}
         />
         {props.error && (
-          <span class="label-text-alt font-bold text-error">{props.error}</span>
+          <span class="label-text-alt font-bold text-error-700">
+            {props.error}
+          </span>
         )}
       </div>
     </div>
diff --git a/pkgs/webview-ui/app/src/components/SelectInput.tsx b/pkgs/webview-ui/app/src/components/SelectInput.tsx
index cd08908cd..a16ffc356 100644
--- a/pkgs/webview-ui/app/src/components/SelectInput.tsx
+++ b/pkgs/webview-ui/app/src/components/SelectInput.tsx
@@ -47,7 +47,9 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
       </select>
 
       {props.error && (
-        <span class="label-text-alt font-bold text-error">{props.error}</span>
+        <span class="label-text-alt font-bold text-error-700">
+          {props.error}
+        </span>
       )}
     </label>
   );
diff --git a/pkgs/webview-ui/app/src/components/TextInput.tsx b/pkgs/webview-ui/app/src/components/TextInput.tsx
index 32637e2b6..43f24c861 100644
--- a/pkgs/webview-ui/app/src/components/TextInput.tsx
+++ b/pkgs/webview-ui/app/src/components/TextInput.tsx
@@ -63,7 +63,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
         </Show>
       </div>
       {props.error && (
-        <span class="label-text-alt font-bold text-error">{props.error}</span>
+        <span class="label-text-alt font-bold text-error-700">
+          {props.error}
+        </span>
       )}
     </label>
   );
diff --git a/pkgs/webview-ui/app/src/layout/header.tsx b/pkgs/webview-ui/app/src/layout/header.tsx
index a46ebfa6d..5c042deed 100644
--- a/pkgs/webview-ui/app/src/layout/header.tsx
+++ b/pkgs/webview-ui/app/src/layout/header.tsx
@@ -59,7 +59,7 @@ export const Header = (props: HeaderProps) => {
         <span class="flex flex-col">
           <Show when={query.data}>
             {(meta) => [
-              <span class="text-primary">{meta().name}</span>,
+              <span class="text-primary-800">{meta().name}</span>,
               <span class="text-neutral">{meta()?.description}</span>,
             ]}
           </Show>
diff --git a/pkgs/webview-ui/app/src/routes/clans/create.tsx b/pkgs/webview-ui/app/src/routes/clans/create.tsx
index f47367b23..5e8c001bc 100644
--- a/pkgs/webview-ui/app/src/routes/clans/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/create.tsx
@@ -103,7 +103,7 @@ export const CreateClan = () => {
             {(field, props) => (
               <label class="form-control w-full">
                 <div class="label">
-                  <span class="label-text block after:ml-0.5 after:text-primary after:content-['*']">
+                  <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
                     Name
                   </span>
                 </div>
diff --git a/pkgs/webview-ui/app/src/routes/clans/details.tsx b/pkgs/webview-ui/app/src/routes/clans/details.tsx
index 6f4c4596f..985d82c24 100644
--- a/pkgs/webview-ui/app/src/routes/clans/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/details.tsx
@@ -74,8 +74,8 @@ const EditClanForm = (props: EditClanFormProps) => {
           <>
             <figure class="p-1">
               <div class="flex flex-col items-center">
-                <div class="text-3xl text-primary">{curr_name()}</div>
-                <div class="text-secondary">Wide settings</div>
+                <div class="text-3xl text-primary-800">{curr_name()}</div>
+                <div class="text-secondary-800">Wide settings</div>
               </div>
             </figure>
             <figure>
@@ -100,7 +100,7 @@ const EditClanForm = (props: EditClanFormProps) => {
         )}
       </Field>
       <div class="card-body">
-        <span class="text-xl text-primary">General</span>
+        <span class="text-xl text-primary-800">General</span>
         <Field
           name="name"
           validate={[required("Please enter a unique name for the clan.")]}
@@ -108,7 +108,7 @@ const EditClanForm = (props: EditClanFormProps) => {
           {(field, props) => (
             <label class="form-control w-full">
               <div class="label">
-                <span class="label-text block after:ml-0.5 after:text-primary after:content-['*']">
+                <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
                   Name
                 </span>
               </div>
@@ -226,9 +226,9 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
   return (
     <Form onSubmit={handleSubmit}>
       <div class="card-body">
-        <span class="text-xl text-primary">Administration</span>
+        <span class="text-xl text-primary-800">Administration</span>
         <div class="grid grid-cols-12 gap-2">
-          <span class="col-span-12 text-lg text-neutral">
+          <span class="col-span-12 text-lg text-neutral-800">
             Each of the following keys can be used to authenticate on machines
           </span>
           <For each={keys()}>
diff --git a/pkgs/webview-ui/app/src/routes/clans/list.tsx b/pkgs/webview-ui/app/src/routes/clans/list.tsx
index 00b581e78..525f259d8 100644
--- a/pkgs/webview-ui/app/src/routes/clans/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/list.tsx
@@ -59,7 +59,7 @@ const ClanItem = (props: ClanItemProps) => {
 
   return (
     <div class="stat">
-      <div class="stat-figure text-primary">
+      <div class="stat-figure text-primary-800">
         <div class="join">
           <button
             class="join-item btn-sm"
diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx
index 4262f03a5..09ac35f8f 100644
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -431,7 +431,7 @@ const MachineForm = (props: MachineDetailsProps) => {
           </div>
         </figure>
         <div class="card-body">
-          <span class="text-xl text-primary">General</span>
+          <span class="text-xl text-primary-800">General</span>
           {/*
           <Field name="machine.tags" type="string[]">
             {(field, props) => field.value}
@@ -536,14 +536,14 @@ const MachineForm = (props: MachineDetailsProps) => {
           {(module) => (
             <>
               <div class="divider"></div>
-              <span class="text-xl text-primary">{module.name}</span>
+              <span class="text-xl text-primary-800">{module.name}</span>
               {module.component}
             </>
           )}
         </For>
         <div class="divider"></div>
 
-        <span class="text-xl text-primary">Actions</span>
+        <span class="text-xl text-primary-800">Actions</span>
         <div class="my-4 flex flex-col gap-6">
           <span class="max-w-md text-neutral">
             Installs the system for the first time. Used to bootstrap the remote
diff --git a/pkgs/webview-ui/app/src/routes/modules/list.tsx b/pkgs/webview-ui/app/src/routes/modules/list.tsx
index fb10512df..3b38df0d2 100644
--- a/pkgs/webview-ui/app/src/routes/modules/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/modules/list.tsx
@@ -14,7 +14,7 @@ const ModuleListItem = (props: { name: string; info: ModuleInfo }) => {
 
   return (
     <div class="stat">
-      <div class="stat-figure text-primary">
+      <div class="stat-figure text-primary-800">
         <div class="join">more</div>
       </div>
 
diff --git a/pkgs/webview-ui/app/src/routes/welcome/index.tsx b/pkgs/webview-ui/app/src/routes/welcome/index.tsx
index b6dc72434..9e7ed6213 100644
--- a/pkgs/webview-ui/app/src/routes/welcome/index.tsx
+++ b/pkgs/webview-ui/app/src/routes/welcome/index.tsx
@@ -18,7 +18,7 @@ export const Welcome = () => {
               Build your own
             </button>
             <button
-              class="link w-full text-right text-primary"
+              class="link w-full text-right text-primary-800"
               onClick={async () => {
                 const uri = await registerClan();
                 if (uri) {
diff --git a/pkgs/webview-ui/app/tailwind.config.ts b/pkgs/webview-ui/app/tailwind.config.ts
index 29a1d6504..21012b7cb 100644
--- a/pkgs/webview-ui/app/tailwind.config.ts
+++ b/pkgs/webview-ui/app/tailwind.config.ts
@@ -5,23 +5,7 @@ import core from "./tailwind/core-plugin";
 /** @type {import('tailwindcss').Config} */
 const config = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    colors: {
-      secondary: {
-        50: "#f7f9f9",
-        100: "#e7f2f4",
-        200: "#d7e8ea",
-        300: "#afc6ca",
-        400: "#8fb2b6",
-        500: "#7b9a9e",
-        600: "#4f747a",
-        700: "#415e63",
-        800: "#445f64",
-        900: "#2b4347",
-        950: "#0d1415",
-      },
-    },
-  },
+  theme: {},
   daisyui: {
     themes: [
       {