From 3c11e06304184fd574309d7bbdd6ce641ae414f8 Mon Sep 17 00:00:00 2001
From: Cristopher <cristophernamchee12@gmail.com>
Date: Sun, 18 Feb 2024 21:33:43 +0700
Subject: [PATCH] feat: add tooltip for generate html template choice

---
 src/components/Button.vue      | 12 ++++++++++--
 src/components/Footer.vue      | 10 +++++-----
 src/components/PlatformBox.vue |  5 ++++-
 src/components/UploadBox.vue   | 16 +++++++++-------
 src/router/pages/404.vue       |  2 +-
 src/router/pages/about.vue     | 15 +++++++--------
 src/router/pages/index.vue     | 23 ++++++++++++++---------
 7 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/components/Button.vue b/src/components/Button.vue
index caeb3cf..667e285 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -37,8 +37,16 @@ const activeThemes: Record<ThemeKey, string> = {
     hover:bg-primary-dark
     active:bg-primary-dark
     focus:bg-primary-dark
-    active:(outline-none ring ring-4 ring-primary-light ring-opacity-50)
-    focus:(outline-none ring ring-4 ring-primary-light ring-opacity-50)`,
+    active:outline-none
+    active:ring
+    active:ring-4
+    active:ring-primary-light
+    active:ring-opacity-50
+    focus:outline-none
+    focus:ring
+    focus:ring-4
+    focus:ring-primary-light
+    focus:ring-opacity-50`,
 };
 
 const disabledThemes: Record<ThemeKey, string> = {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 22bd0bf..10082ed 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -2,11 +2,11 @@
   <footer
     class="w-full mx-auto max-w-5xl
       flex flex-col items-center
-      md:(flex-row justify-between)
       border-t border-content-shade border-opacity-50
       p-8
       text-sm
-      text-content-light"
+      text-content-light
+      md:flex-row md:justify-between"
   >
     <p class="text-center md:text-left">
       Inspired by
@@ -15,7 +15,7 @@
           text-primary
           transition-colors
           hover:text-primary-dark
-          focus:(text-primary-dark)
+          focus:text-primary-dark
           active:text-primary-dark"
         href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs"
         target="_blank"
@@ -28,7 +28,7 @@
           text-primary
           transition-colors
           hover:text-primary-dark
-          focus:(text-primary-dark)
+          focus:text-primary-dark
           active:text-primary-dark"
         href="https://evilmartians.com/"
         target="_blank"
@@ -44,7 +44,7 @@
           text-primary
           transition-colors
           hover:text-primary-dark
-          focus:(text-primary-dark)
+          focus:text-primary-dark
           active:text-primary-dark"
         href="https://github.com/Namchee"
         target="_blank"
diff --git a/src/components/PlatformBox.vue b/src/components/PlatformBox.vue
index ebc45f7..75eda71 100644
--- a/src/components/PlatformBox.vue
+++ b/src/components/PlatformBox.vue
@@ -9,7 +9,10 @@
       bg-opacity-10
       hover:bg-opacity-10
       border
-      focus:(outline-none bg-opacity-10 ring-3 focus:ring-opacity-30)"
+      focus:outline-none
+      focus:bg-opacity-10
+      focus:ring-3
+      focus:ring-opacity-30"
     :class="labelClass"
   >
     <div class="flex justify-between items-center">
diff --git a/src/components/UploadBox.vue b/src/components/UploadBox.vue
index 39db839..56778b8 100644
--- a/src/components/UploadBox.vue
+++ b/src/components/UploadBox.vue
@@ -143,13 +143,15 @@ export default defineComponent({
         grid place-items-center
         rounded-md p-8
         transition-all
-        hover:(bg-content-shade
-          bg-opacity-10
-          border-content-shade
-          border-opacity-60)
-        group-focus:(
-          ring-3 ring-opacity-30 ring-content-shade
-          bg-content-shade bg-opacity-10)
+        hover:bg-content-shade
+        hover:bg-opacity-10
+        hover:border-content-shade
+        hover:border-opacity-60
+        group-focus:ring-3
+        group-focus:ring-opacity-30
+        group-focus:ring-content-shade
+        group-focus:bg-content-shade
+        group-focus:bg-opacity-10
         h-full
         ${dragClass}`;
     });
diff --git a/src/router/pages/404.vue b/src/router/pages/404.vue
index f579a5e..f1c62e2 100644
--- a/src/router/pages/404.vue
+++ b/src/router/pages/404.vue
@@ -27,7 +27,7 @@
           text-primary
           transition-colors
           hover:text-primary-dark
-          focus:(text-primary-dark)
+          focus:text-primary-dark
           active:text-primary-dark"
       >
         Back To Home
diff --git a/src/router/pages/about.vue b/src/router/pages/about.vue
index 6d4dec8..323a4e0 100644
--- a/src/router/pages/about.vue
+++ b/src/router/pages/about.vue
@@ -30,7 +30,7 @@
               text-primary
               transition-colors
               hover:text-primary-dark
-              focus:(text-primary-dark)
+              focus:text-primary-dark
               active:text-primary-dark"
             href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs"
             target="_blank"
@@ -43,7 +43,7 @@
               text-primary
               transition-colors
               hover:text-primary-dark
-              focus:(text-primary-dark)
+              focus:text-primary-dark
               active:text-primary-dark"
             href="https://evilmartians.com/"
             target="_blank"
@@ -57,8 +57,7 @@
           Fav executes all the required processing steps directly
           on your browser without any need to communicate with
           any backend server. Therefore, fav <strong>
-            does not store any form of your personal data and usage
-          </strong>.
+            does not store any form of your personal data and usage</strong>.
         </p>
 
         <p>
@@ -106,7 +105,7 @@
               text-primary
               transition-colors
               hover:text-primary-dark
-              focus:(text-primary-dark)
+              focus:text-primary-dark
               active:text-primary-dark"
             href="https://evilmartians.com/"
             to="/"
@@ -170,7 +169,7 @@
               text-primary
               transition-colors
               hover:text-primary-dark
-              focus:(text-primary-dark)
+              focus:text-primary-dark
               active:text-primary-dark"
             href="https://github.com/Namchee/fav-cli"
             rel="noreferrer noopener"
@@ -218,7 +217,7 @@
               text-primary
               transition-colors
               hover:text-primary-dark
-              focus:(text-primary-dark)
+              focus:text-primary-dark
               active:text-primary-dark"
             rel="noreferrer noopener"
             target="_blank"
@@ -240,7 +239,7 @@
             text-primary
             transition-colors
             hover:text-primary-dark
-            focus:(text-primary-dark)
+            focus:text-primary-dark
             active:text-primary-dark"
             href="https://evilmartians.com/"
             target="_blank"
diff --git a/src/router/pages/index.vue b/src/router/pages/index.vue
index 46250f7..a9f9162 100644
--- a/src/router/pages/index.vue
+++ b/src/router/pages/index.vue
@@ -61,9 +61,9 @@
                     w-4 h-4
                     cursor-pointer
                     text-primary
-                    focus:(outline-none ring-2 ring-primary ring-opacity-50)">
+                    focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50">
 
-                <div class="flex items-center space-x-2">
+                <div class="flex items-center space-x-[6px]">
                   <p>
                     Include HTML template
                   </p>
@@ -71,14 +71,14 @@
                   <TooltipProvider>
                     <TooltipRoot>
                       <TooltipTrigger
-                        class="text-black shadow-blackA7 hover:bg-green3 inline-flex h-4 w-4 items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] cursor-help focus:shadow-black">
+                        class="opacity-50 inline-flex h-4 w-4 items-center justify-center outline-none focus:shadow-[0_0_0_2px] cursor-help focus:shadow-black">
                         <Help />
                       </TooltipTrigger>
                       <TooltipPortal>
                         <TooltipContent
-                          class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-[4px] bg-black px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+                          class="text-xs text-center leading-snug max-w-xs data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-[4px] bg-black text-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
                           :side-offset="5">
-                          Haha
+                          When checked, Fav will provide an HTML template that contains headers that matches the generated favicon.
                           <TooltipArrow class="fill-shade" size="8" />
                         </TooltipContent>
                       </TooltipPortal>
@@ -91,10 +91,15 @@
                 <input id="aspect-ratio" v-model="form.ratio" type="checkbox" class="rounded
                     w-4 h-4
                     text-primary
-                    focus:(outline-none ring-2 ring-primary ring-opacity-50)">
-                <p>
-                  Keep image aspect ratio
-                </p>
+                    focus:outline-none
+                    focus:ring-2
+                    focus:ring-primary
+                    focus:ring-opacity-50">
+                <div class="flex items-center space-x-[6px]">
+                  <p>
+                    Keep image aspect ratio
+                  </p>
+                </div>
               </label>
             </div>
           </section>