From 37958a31c6c6611eda5470ce5aaeb0776e1418ba Mon Sep 17 00:00:00 2001
From: Steven Weathers <steven@weathers.me>
Date: Sat, 6 Apr 2024 08:48:51 -0400
Subject: [PATCH] Continue header redesign

---
 ui/src/components/auth/LoginForm.svelte          |  6 ++++--
 ui/src/components/global/GlobalHeader.svelte     | 10 +++++-----
 ui/src/components/global/LocaleMenu.svelte       |  4 ++--
 ui/src/components/global/NavUserMenu.svelte      |  2 +-
 ui/src/components/global/ThemeSelector.svelte    | 12 ++++++------
 ui/src/components/icons/ArrowRight.svelte        |  2 +-
 ui/src/components/pricing/PayPeriodToggle.svelte |  2 +-
 ui/src/pages/subscription/Pricing.svelte         |  4 ++--
 ui/src/pages/support/Support.svelte              |  2 +-
 9 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/auth/LoginForm.svelte b/ui/src/components/auth/LoginForm.svelte
index e3388604..c32ce321 100644
--- a/ui/src/components/auth/LoginForm.svelte
+++ b/ui/src/components/auth/LoginForm.svelte
@@ -69,8 +69,10 @@
           user.create(newUser);
           if (u.theme !== 'auto') {
             localStorage.setItem('theme', u.theme);
-            window.setTheme();
+          } else {
+            localStorage.removeItem('theme');
           }
+          window.setTheme();
           eventTag('login', 'engagement', 'success', () => {
             // setupI18n({
             //     withLocale: newUser.locale,
@@ -186,7 +188,7 @@
       <div class="flex items-center">
         <!--                        <input id="remember_me" name="remember_me" type="checkbox"-->
         <!--                               class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:text-white dark:border-gray-600 dark:focus:ring-indigo-400 disabled:cursor-wait disabled:opacity-50">-->
-        <!--                        <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-white">Remember-->
+        <!--                        <label for="remember_me" class="ms-2 block text-sm text-gray-900 dark:text-white">Remember-->
         <!--                            me</label>-->
       </div>
       <div class="text-sm">
diff --git a/ui/src/components/global/GlobalHeader.svelte b/ui/src/components/global/GlobalHeader.svelte
index c0158f0f..4062ab14 100644
--- a/ui/src/components/global/GlobalHeader.svelte
+++ b/ui/src/components/global/GlobalHeader.svelte
@@ -33,9 +33,9 @@
   } = AppConfig;
 
   const activePageClass =
-    'block lg:pt-6 lg:pb-4 px-4 border-b border-transparent lg:border-b-4 all:bg-yellow-thunder lg:bg-gray-800 lg:text-purple-700 lg:border-purple-700 lg:dark:text-yellow-400 lg:dark:border-yellow-400';
+    'block lg:pt-6 lg:pb-4 px-4 border-b lg:border-b-4 lg:dark:bg-gray-800 text-indigo-600 border-indigo-600 dark:text-yellow-400 dark:border-yellow-400 transition duration-300';
   const pageClass =
-    'block lg:pt-6 lg:pb-4 px-4 border-b border-gray-100 dark:border-gray-700 lg:border-b-4 text-gray-700 lg:border-white lg:dark:border-gray-800 dark:hover:border-yellow-400 hover:text-purple-700 dark:text-gray-300 dark:hover:text-yellow-400 transition duration-300';
+    'block lg:pt-6 lg:pb-4 px-4 border-b border-gray-200 lg:border-white dark:border-gray-600 lg:dark:border-gray-800 lg:border-b-4 text-gray-700 hover:border-indigo-600 dark:hover:border-yellow-400 hover:text-indigo-700 dark:text-gray-300 dark:hover:text-yellow-400 transition duration-300';
 
   let showMobileMenu = false;
 
@@ -121,9 +121,9 @@
           <li>
             <a
               href="{appRoutes.login}"
-              class="block py-2 px-4 rounded transition duration-300 dark:bg-gray-700 text-white hover:bg-indigo-800 dark:hover:bg-indigo-600 hover:text-white"
+              class="block py-2 px-4 rounded transition duration-300 bg-indigo-600 hover:bg-indigo-800 text-white"
               >{$LL.login()}
-              <ArrowRight class="inline-block" />
+              <ArrowRight class="ms-2 inline-block" />
             </a>
           </li>
         {/if}
@@ -166,7 +166,7 @@
           : 'hidden'} justify-between items-center w-full lg:flex lg:w-auto lg:order-1 font-semibold font-rajdhani uppercase text-lg lg:text-xl"
       >
         <ul
-          class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-1 lg:mt-0 rtl:space-x-reverse"
+          class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-1 lg:mt-0 pb-2 lg:pb-0 rtl:space-x-reverse"
         >
           {#if $user.name}
             {#if FeaturePoker}
diff --git a/ui/src/components/global/LocaleMenu.svelte b/ui/src/components/global/LocaleMenu.svelte
index 595af943..3c6bd136 100644
--- a/ui/src/components/global/LocaleMenu.svelte
+++ b/ui/src/components/global/LocaleMenu.svelte
@@ -43,7 +43,7 @@
   <label class="sr-only">Locale</label>
 
   <button
-    class="relative z-10 flex h-8 w-8 items-center justify-center rounded-lg text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-700"
+    class="relative z-10 flex h-8 w-8 items-center justify-center rounded-lg text-slate-700 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700"
     aria-label="Locale"
     type="button"
     on:click="{toggleMenu}"
@@ -79,7 +79,7 @@
             : ''}"
           tabindex="-1"
         >
-          <div class="ml-3">
+          <div class="ms-3">
             <button on:click="{switchLocale(locale.value)}"
               >{locale.name}</button
             >
diff --git a/ui/src/components/global/NavUserMenu.svelte b/ui/src/components/global/NavUserMenu.svelte
index 9fc31332..f7ece2c7 100644
--- a/ui/src/components/global/NavUserMenu.svelte
+++ b/ui/src/components/global/NavUserMenu.svelte
@@ -70,7 +70,7 @@
 </script>
 
 <div>
-  <span class="text-gray-700 dark:text-gray-400 font-semibold me-2"
+  <span class="text-gray-600 dark:text-gray-300 font-semibold me-2"
     >{$user.name}</span
   >
   <button
diff --git a/ui/src/components/global/ThemeSelector.svelte b/ui/src/components/global/ThemeSelector.svelte
index 8a79d580..35b5ec1e 100644
--- a/ui/src/components/global/ThemeSelector.svelte
+++ b/ui/src/components/global/ThemeSelector.svelte
@@ -35,7 +35,7 @@
 <div class="relative z-10">
   <span class="sr-only">Theme</span>
   <button
-    class="relative z-10 flex h-8 w-8 items-center justify-center rounded-lg text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100"
+    class="relative z-10 flex h-8 w-8 items-center justify-center rounded-lg text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-700"
     aria-label="Theme"
     type="button"
     on:click="{toggleMenu}"
@@ -95,7 +95,7 @@
             ></path>
           </svg>
         </div>
-        <div class="ml-3">Light</div>
+        <div class="ms-3">Light</div>
       </li>
       <li
         class="flex cursor-pointer select-none items-center rounded-[0.625rem] p-1 text-slate-700 dark:text-slate-300 {selectedTheme ===
@@ -121,10 +121,10 @@
             ></path>
           </svg>
         </div>
-        <div class="ml-3">Dark</div>
+        <div class="ms-3">Dark</div>
       </li>
       <li
-        class="flex cursor-pointer select-none items-center rounded-[0.625rem] p-1 text-brand-primary {selectedTheme ===
+        class="flex cursor-pointer select-none items-center rounded-[0.625rem] p-1 text-slate-700 dark:text-slate-300 text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-900/40 {selectedTheme ===
         'auto'
           ? 'bg-indigo-600 text-white'
           : ''}"
@@ -132,7 +132,7 @@
         on:click="{setTheme('auto')}"
       >
         <div
-          class="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
+          class="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5 text-slate-700 dark:text-slate-400 text-slate-900"
         >
           <svg
             aria-hidden="true"
@@ -147,7 +147,7 @@
             ></path>
           </svg>
         </div>
-        <div class="ml-3">System</div>
+        <div class="ms-3">System</div>
       </li>
     </ul>
   {/if}
diff --git a/ui/src/components/icons/ArrowRight.svelte b/ui/src/components/icons/ArrowRight.svelte
index f202515a..df6938aa 100644
--- a/ui/src/components/icons/ArrowRight.svelte
+++ b/ui/src/components/icons/ArrowRight.svelte
@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
   stroke-width="2"
-  class="w-4 h-4 ml-auto {klass}"
+  class="w-4 h-4 ms-auto {klass}"
   viewBox="0 0 24 24"
 >
   <path d="M5 12h14M12 5l7 7-7 7"></path>
diff --git a/ui/src/components/pricing/PayPeriodToggle.svelte b/ui/src/components/pricing/PayPeriodToggle.svelte
index eff6a20b..6db3e86c 100644
--- a/ui/src/components/pricing/PayPeriodToggle.svelte
+++ b/ui/src/components/pricing/PayPeriodToggle.svelte
@@ -53,7 +53,7 @@
   <button
     on:click="{togglePaymentPeriod}"
     type="button"
-    class="toggle ml-0.5 {selectedPaymentPeriod === 'year' ? 'active' : ''}"
+    class="toggle ms-0.5 {selectedPaymentPeriod === 'year' ? 'active' : ''}"
   >
     Yearly billing
   </button>
diff --git a/ui/src/pages/subscription/Pricing.svelte b/ui/src/pages/subscription/Pricing.svelte
index ec64117b..09afdbe9 100644
--- a/ui/src/pages/subscription/Pricing.svelte
+++ b/ui/src/pages/subscription/Pricing.svelte
@@ -413,7 +413,7 @@
                 {#if selectedPaymentPeriod === 'month'}${plan.Price
                     .Month}{:else}
                   ${plan.Price.Year}{/if}
-                <span class="text-gray-600 dark:text-gray-300 text-base ml-1"
+                <span class="text-gray-600 dark:text-gray-300 text-base ms-1"
                   >{#if selectedPaymentPeriod === 'month'}/mo{:else}/yr{/if}</span
                 >
               {/if}
@@ -443,7 +443,7 @@
                   {:else}
                     <Crossmark />
                   {/if}
-                  <span class="lg:hidden ml-2">{feature.Name}</span>
+                  <span class="lg:hidden ms-2">{feature.Name}</span>
                 {/if}
               </p>
             {/each}
diff --git a/ui/src/pages/support/Support.svelte b/ui/src/pages/support/Support.svelte
index bc499cea..b5e4d1b8 100644
--- a/ui/src/pages/support/Support.svelte
+++ b/ui/src/pages/support/Support.svelte
@@ -37,7 +37,7 @@
         >
         and mention the <span class="font-semibold">current version</span>
         <span
-          class="ml-2 font-bold dark:text-gray-800 bg-lime-800 dark:bg-lime-200 py-1 px-2 rounded inline-block"
+          class="ms-2 font-bold dark:text-gray-800 bg-lime-800 dark:bg-lime-200 py-1 px-2 rounded inline-block"
           >{AppVersion}</span
         >
       </p>