From 24f2329e9d8cc09e6a442545a5cae46b2ef72326 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 23 Aug 2024 19:44:10 +0600
Subject: [PATCH] web/settings: slightly update navigation style on mobile

---
 .../settings/SettingsNavSection.svelte        |  2 +
 .../components/settings/SettingsNavTab.svelte | 44 ++++++++++---------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/web/src/components/settings/SettingsNavSection.svelte b/web/src/components/settings/SettingsNavSection.svelte
index 7a6527e6..7b138a4e 100644
--- a/web/src/components/settings/SettingsNavSection.svelte
+++ b/web/src/components/settings/SettingsNavSection.svelte
@@ -24,6 +24,8 @@
 
     #settings-section {
         gap: 6px;
+        border-radius: var(--border-radius);
+        overflow: hidden;
     }
 
     #settings-section-title {
diff --git a/web/src/components/settings/SettingsNavTab.svelte b/web/src/components/settings/SettingsNavTab.svelte
index 63274b99..1f579fb2 100644
--- a/web/src/components/settings/SettingsNavTab.svelte
+++ b/web/src/components/settings/SettingsNavTab.svelte
@@ -22,7 +22,9 @@
         <div class="tab-icon" style="background: var(--{iconColor})">
             <slot></slot>
         </div>
-        <span>{$t(`settings.page.${tabName}`)}</span>
+        <div class="settings-tab-text">
+            <span>{$t(`settings.page.${tabName}`)}</span>
+        </div>
     </div>
     <div class="settings-tab-chevron">
         <IconChevronRight />
@@ -57,19 +59,27 @@
         font-weight: 500;
     }
 
-    .settings-tab :global(svg) {
+    .tab-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--small-padding);
+        border-radius: 5px;
+    }
+
+    .settings-tab .tab-icon :global(svg) {
         stroke-width: 1.5px;
+        stroke: var(--white);
         height: 20px;
         width: 20px;
     }
 
-    .settings-tab .tab-icon :global(svg) {
-        stroke: var(--white);
-    }
-
     .settings-tab-chevron :global(svg) {
         display: none;
-        stroke: var(--secondary);
+        stroke-width: 2px;
+        stroke: var(--gray);
+        height: 18px;
+        width: 18px;
     }
 
     @media (hover: hover) {
@@ -91,29 +101,17 @@
         font-size: 14.5px;
     }
 
-    .tab-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: var(--small-padding);
-        border-radius: 5px;
-    }
-
     @media screen and (max-width: 750px) {
         .settings-tab {
             --big-padding: 7px;
             background: none;
-            padding: var(--big-padding) calc(var(--big-padding) * 1.5);
-        }
-
-        .settings-tab-left {
-            gap: calc(var(--big-padding) * 1.5);
+            padding: var(--big-padding) 11px;
         }
 
         .settings-tab:not(:last-child) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
-            box-shadow: 0 3px 0px -1.7px var(--button-stroke);
+            box-shadow: 48px 3px 0px -1.8px var(--button-stroke);
         }
 
         .settings-tab:not(:first-child) {
@@ -121,6 +119,10 @@
             border-top-right-radius: 0;
         }
 
+        .settings-tab-left {
+            gap: 10px;
+        }
+
         .settings-tab-chevron :global(svg) {
             display: block;
         }