dark styles

3 files changed, 25 insertions, 29 deletions

diff --git a/src/routes/(app)/settings/[...tab]/_account.svelte b/src/routes/(app)/settings/[...tab]/_account.svelte
index 8e3323c7..28540280 100644
--- a/src/routes/(app)/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/settings/[...tab]/_account.svelte
@@ -1,7 +1,6 @@
 <script>
   import { tick } from "svelte";
   import { avatar, banner } from "$lib/store";
-  import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
 
@@ -58,12 +57,7 @@
     >{$t("user.settings.username")}</label
   >
   <div class="flex mb-2">
-    <input
-      type="text"
-      name="username"
-      bind:value={user.username}
-      class="w-auto min-w-0 pr-1 grow"
-    />
+    <input type="text" name="username" bind:value={user.username} />
   </div>
 </div>
 
@@ -80,14 +74,23 @@
     {$t("user.settings.emailDescription")}
   </p>
 
-  <div class="relative">
-    <input type="text" name="email" bind:value={user.email} />
-    {#if user.verified}
-      <Icon icon="check" style="absolute right-5 top-3 w-8" />
-    {:else if user.email}
-      <Icon icon="orangeclock" style="absolute right-5 top-3 w-8" />
-    {/if}
-  </div>
+  <label
+    class="input input-bordered input-lg rounded-2xl flex items-center gap-2"
+  >
+    <input
+      type="text"
+      name="email"
+      class="blank grow"
+      bind:value={user.email}
+    />
+    <!-- {#if user.verified} -->
+    <!--   <iconify-icon icon="ph:check-bold" width="32" /> -->
+    <!-- {:else if user.email} -->
+    <div class="text-warning">
+      <iconify-icon icon="ph:clock-bold" width="32" />
+    </div>
+    <!-- {/if} -->
+  </label>
 </div>
 
 <div>
@@ -113,13 +116,14 @@
         on:keydown={selectAvatar}
       >
         <Icon icon="logo-symbol-white" style="mx-auto" />
+        <iconify-icon icon="ph:floppy-disk-bold" width="32" />
       </div>
     {/if}
     <div class="ml-2 p-2">
       <!-- found missing translation -->
       <button
         type="button"
-        class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+        class="btn"
         on:click={selectAvatar}
         on:keydown={selectAvatar}>{$t("user.settings.select")}</button
       >
@@ -161,7 +165,7 @@
 
   <button
     type="button"
-    class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+    class="btn !w-auto"
     on:click={selectBanner}
     on:keydown={selectBanner}>{$t("user.settings.select")}</button
   >
diff --git a/src/routes/(app)/settings/[...tab]/_pos.svelte b/src/routes/(app)/settings/[...tab]/_pos.svelte
index 1cfa2a39..2804da37 100644
--- a/src/routes/(app)/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/settings/[...tab]/_pos.svelte
@@ -1,7 +1,6 @@
 <script>
   import { onMount, tick } from "svelte";
   import { browser } from "$app/environment";
-  import Icon from "$comp/Icon.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import LocaleSelector from "$comp/LocaleSelector.svelte";
   import Toggle from "$comp/Toggle.svelte";
@@ -94,11 +93,7 @@
   <label for="currency" class="font-bold block mb-1"
     >{$t("user.settings.localCurrency")}</label
   >
-  <select
-    name="currency"
-    class="select block py-3 w-full"
-    value={user.currency}
-  >
+  <select name="currency" value={user.currency}>
     {#each fiats as fiat}
       <option value={fiat}>{fiat}</option>
     {/each}
@@ -263,11 +258,8 @@
   </div>
 {/if}
 
-<a href="./shopify">
-  <button
-    type="button"
-    class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center"
-  >
+<a href="./shopify" class="block">
+  <button type="button" class="btn">
     <img src="/icons/shopify.svg" class="w-8" />
     <div class="my-auto">{$t("user.settings.shopify")}</div>
   </button>
diff --git a/src/routes/(app)/settings/[...tab]/_shopify.svelte b/src/routes/(app)/settings/[...tab]/_shopify.svelte
index 0266fa9c..48fe7718 100644
--- a/src/routes/(app)/settings/[...tab]/_shopify.svelte
+++ b/src/routes/(app)/settings/[...tab]/_shopify.svelte
@@ -27,7 +27,7 @@
   <label for="shopifyStore" class="font-bold mb-1 block">Store ID</label>
   <div class="flex mb-2">
     <div
-      class="text-gray-600 p-4 my-auto bg-gray-100 border rounded-l-2xl border-r-0 pr-1"
+      class="input input-bordered input-lg border-r-0 rounded-2xl rounded-r-none flex items-center text-right pr-1 bg-base-200 border-primary"
     >
       admin.shopify.com/store/
     </div>