From 4b03a48d8862e15d6487768e9fc450678d207545 Mon Sep 17 00:00:00 2001
From: Sergio <77530549+sergi0g@users.noreply.github.com>
Date: Wed, 19 Feb 2025 20:31:57 +0200
Subject: [PATCH] Tiny web UI changes

---
 web/index.html                   | 20 ++++++++++----------
 web/src/App.tsx                  |  6 +++---
 web/src/components/Image.tsx     | 32 +++++++++++++++++---------------
 web/src/components/Search.tsx    |  4 ++--
 web/src/components/Server.tsx    |  4 ++--
 web/src/components/Statistic.tsx |  2 +-
 web/tailwind.config.js           |  6 +++---
 7 files changed, 38 insertions(+), 36 deletions(-)
diff --git a/web/index.html b/web/index.html
index e414b58..a1658f7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -12,7 +12,7 @@
       <meta
         name="theme-color"
         media="(prefers-color-scheme: dark)"
-        content="#171717"
+        content="#0a0a0a"
       >
     {% else %}
       <meta
@@ -23,7 +23,7 @@
       <meta
         name="theme-color"
         media="(prefers-color-scheme: dark)"
-        content="#101828"
+        content="#030712"
       >
     {% endif %}
     <link rel="icon" type="image/svg+xml" href="favicon.svg">
@@ -34,7 +34,7 @@
   <body>
     <div id="root">
       <div
-        class="flex justify-center min-h-screen bg-white dark:bg-{{ theme }}-900"
+        class="flex justify-center min-h-screen bg-white dark:bg-{{ theme }}-950"
       >
         <div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
           <div class="mx-auto my-8 h-full max-w-[48rem] flex-col">
@@ -103,7 +103,7 @@
               </svg>
             </div>
             <div
-              class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-800 my-8 rounded-md"
+              class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
             >
               <dl
                 class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"
@@ -112,7 +112,7 @@
                 {% for metric in metrics %}
                   {% if metrics_to_show contains metric.name %}
                     <div
-                      class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi"
+                      class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-900 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-900 gi"
                     >
                       <div
                         class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32"
@@ -216,7 +216,7 @@
               </dl>
             </div>
             <div
-              class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-800 my-8 rounded-md"
+              class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
             >
               <div
                 class="flex justify-between items-center px-6 py-4"
@@ -228,11 +228,11 @@
                   {% if server == '' %}
                     <li class="mb-8 last:mb-0">
                       <ul
-                        class="dark:divide-{{theme}}-800 divide-y dark:text-white"
+                        class="dark:divide-{{theme}}-900 divide-y dark:text-white"
                       >
                         {% for image in servers[server] %}
                           <li
-                            class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{theme}}-100 hover:dark:bg-{{theme}}-800/50 transition-colors duration-200"
+                            class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{theme}}-100 hover:dark:bg-{{theme}}-900/50 transition-colors duration-200"
                           >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
@@ -318,11 +318,11 @@
                         {{ server }}
                       </p>
                       <ul
-                        class="dark:divide-{{ theme }}-800 divide-y dark:text-white"
+                        class="dark:divide-{{ theme }}-900 divide-y dark:text-white"
                       >
                         {% for image in servers[server] %}
                           <li
-                            class="flex items-center gap-4 break-all px-6 py-4 text-start"
+                            class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{ theme }}-100 hover:dark:bg-{{ theme }}-900/50 transition-colors duration-200"
                           >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
diff --git a/web/src/App.tsx b/web/src/App.tsx
index aa890c6..64d4d2f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -27,7 +27,7 @@ function App() {
   if (!data) return <Loading onLoad={setData} />;
   return (
     <div
-      className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-900`}
+      className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-950`}
     >
       <div className="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
         <div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
@@ -38,7 +38,7 @@ function App() {
             <Logo />
           </div>
           <div
-            className={`border shadow-sm border-${theme}-200 dark:border-${theme}-800 my-8 rounded-md`}
+            className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
           >
             <dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4">
               {Object.entries(data.metrics)
@@ -55,7 +55,7 @@ function App() {
             </dl>
           </div>
           <div
-            className={`border shadow-sm border-${theme}-200 dark:border-${theme}-800 my-8 rounded-md`}
+            className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
           >
             <div
               className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}
diff --git a/web/src/components/Image.tsx b/web/src/components/Image.tsx
index 72ccc9d..4e3a82a 100644
--- a/web/src/components/Image.tsx
+++ b/web/src/components/Image.tsx
@@ -53,7 +53,7 @@ export default function Image({ data }: { data: Image }) {
     <>
       <button onClick={handleOpen} className="w-full">
         <li
-          className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-800/50 transition-colors duration-200`}
+          className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-900/50 transition-colors duration-200`}
         >
           <Box className={`size-6 shrink-0 text-${theme}-500`} />
           <span className="font-mono">{data.reference}</span>
@@ -83,21 +83,23 @@ export default function Image({ data }: { data: Image }) {
                           href={url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className={`group flex w-fit items-center justify-center gap-1 text-black hover:underline dark:text-white`}
+                          className={`group w-fit text-black hover:underline dark:text-white`}
                         >
-                          <span>{data.reference}</span>
-                          <svg
-                            viewBox="0 0 12 12"
-                            fill="none"
-                            width="10px"
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="transition-all duration-100 group-hover:rotate-45"
-                          >
-                            <path
-                              d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
-                              fill="currentColor"
-                            ></path>
-                          </svg>
+                          <span>
+                            {data.reference}
+                            <svg
+                              viewBox="0 0 12 12"
+                              fill="none"
+                              height="1cap"
+                              xmlns="http://www.w3.org/2000/svg"
+                              className="ml-1 inline transition-all duration-100 group-hover:rotate-45"
+                            >
+                              <path
+                                d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
+                                fill="currentColor"
+                              ></path>
+                            </svg>
+                          </span>
                         </a>
                       </>
                     ) : (
diff --git a/web/src/components/Search.tsx b/web/src/components/Search.tsx
index f23eee7..d20579b 100644
--- a/web/src/components/Search.tsx
+++ b/web/src/components/Search.tsx
@@ -25,9 +25,9 @@ export default function Search({
   return (
     <div className={`w-full px-6 text-black dark:text-white`}>
       <div
-        className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-800 peer flex-nowrap`}
+        className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`}
       >
-        <SearchIcon className="size-5" />
+        <SearchIcon className={`size-5 text-${theme}-600 dark:text-${theme}-400`} />
         <div className="w-full">
           <input
             className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}
diff --git a/web/src/components/Server.tsx b/web/src/components/Server.tsx
index 1c2bc4c..b29e96b 100644
--- a/web/src/components/Server.tsx
+++ b/web/src/components/Server.tsx
@@ -16,7 +16,7 @@ export function Server({
   if (name.length === 0)
     return (
       <li className="mb-8 last:mb-0">
-        <ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
+        <ul className={`dark:divide-${theme}-900 divide-y dark:text-white`}>
           {children}
         </ul>
       </li>
@@ -34,7 +34,7 @@ export function Server({
         />
       </DisclosureButton>
       <DisclosurePanel
-        className={`dark:divide-${theme}-800 divide-y dark:text-white`}
+        className={`dark:divide-${theme}-900 divide-y dark:text-white`}
         as="ul"
         transition
       >
diff --git a/web/src/components/Statistic.tsx b/web/src/components/Statistic.tsx
index 8651e67..f0e8fab 100644
--- a/web/src/components/Statistic.tsx
+++ b/web/src/components/Statistic.tsx
@@ -20,7 +20,7 @@ export default function Statistic({
   const displayName = name.replaceAll("_", " ");
   return (
     <div
-      className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`}
+      className={`before:bg-${theme}-200 before:dark:bg-${theme}-900 after:bg-${theme}-200 after:dark:bg-${theme}-900 gi`}
     >
       <div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32">
         <dt
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 8a79234..8f21cb9 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -23,7 +23,7 @@ export default {
       variants: ["before", "after"],
     },
     {
-      pattern: /bg-(gray|neutral)-800/,
+      pattern: /bg-(gray|neutral)-900/,
       variants: ["before:dark", "after:dark", "dark", "hover:dark"],
     },
     {
@@ -58,14 +58,14 @@ export default {
       variants: ["group-data-[hover]:dark"],
     },
     {
-      pattern: /divide-(gray|neutral)-800/,
+      pattern: /divide-(gray|neutral)-900/,
       variants: ["dark"],
     },
     {
       pattern: /border-(gray|neutral)-(200|300)/,
     },
     {
-      pattern: /border-(gray|neutral)-(700|800)/,
+      pattern: /border-(gray|neutral)-(700|800|900)/,
       variants: ["dark"],
     },
   ],
