Continue header redesign

StevenWeathers · Apr 6, 2024 · 37958a3 · 37958a3
1 parent d9d329e
commit 37958a3
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,18 +121,18 @@
  ></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'
  : ''}"
  tabindex="-1"
  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
@@ -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
@@ -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
@@ -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
@@ -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>