From 7b289bfb1611ddc42000aa7fabcd00ccd24b1268 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 25 Jun 2024 20:59:25 +0600
Subject: [PATCH] web: mobile improvements

- all buttons now reflect that they're pressed or hovered
- settings feel way better on mobile
- settings header has been completely remade
---
 .../buttons/SettingsCheckbox.svelte           |  2 +-
 .../settings/SettingsSection.svelte           | 12 ++++++
 .../components/settings/SettingsTab.svelte    |  1 +
 web/src/components/sidebar/SidebarTab.svelte  |  8 +++-
 web/src/routes/+layout.svelte                 |  6 ++-
 web/src/routes/settings/+layout.svelte        | 43 +++++++++++++------
 6 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/web/src/components/buttons/SettingsCheckbox.svelte b/web/src/components/buttons/SettingsCheckbox.svelte
index b8f98afd..9cea6fa0 100644
--- a/web/src/components/buttons/SettingsCheckbox.svelte
+++ b/web/src/components/buttons/SettingsCheckbox.svelte
@@ -52,10 +52,10 @@
         flex-direction: row;
         align-items: center;
         gap: 12px;
-
         justify-content: start;
         text-align: left;
         transform: none;
+        padding: 6px 12px;
     }
 
     .checkbox-text {
diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsSection.svelte
index ad5674fb..2c0abf0b 100644
--- a/web/src/components/settings/SettingsSection.svelte
+++ b/web/src/components/settings/SettingsSection.svelte
@@ -30,6 +30,18 @@
         #settings-section-categories {
             background: var(--button);
             border-radius: var(--border-radius);
+            box-shadow: var(--button-box-shadow);
+        }
+
+        #settings-section-categories > :global(:not(.settings-tab:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            box-shadow: 0 3px 0px -1.2px var(--button-stroke);
+        }
+
+        #settings-section-categories > :global(:not(.settings-tab:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
         }
     }
 </style>
diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte
index 28fc621c..607977b2 100644
--- a/web/src/components/settings/SettingsTab.svelte
+++ b/web/src/components/settings/SettingsTab.svelte
@@ -95,6 +95,7 @@
     @media screen and (max-width: 750px) {
         .settings-tab {
             background: none;
+            padding: 9px;
             --small-padding: 5px;
         }
 
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index c9657288..9fd76c07 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -70,9 +70,15 @@
         opacity: 1;
     }
 
+    .sidebar-tab:active:not(.active) {
+        opacity: 1;
+        background-color: var(--sidebar-hover);
+    }
+
     @media (hover: hover) {
-        .sidebar-tab:hover {
+        .sidebar-tab:hover:not(.active) {
             opacity: 1;
+            background-color: var(--sidebar-hover);
         }
     }
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 6a54a4f4..e66775a3 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -26,9 +26,11 @@
         --button-hover-transparent: rgba(0, 0, 0, 0.06);
         --button-stroke: rgba(0, 0, 0, 0.05);
         --button-text: #282828;
+        --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
         --sidebar-bg: #000000;
         --sidebar-highlight: #ffffff;
+        --sidebar-hover: rgba(255, 255, 255, 0.1);
 
         --input-border: #8d8d95;
 
@@ -129,7 +131,7 @@
         cursor: pointer;
         background-color: var(--button);
         color: var(--button-text);
-        box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
+        box-shadow: var(--button-box-shadow);
     }
 
     :global(:focus-visible) {
@@ -139,7 +141,7 @@
     }
 
     :global(button:active) {
-        transform: scale(0.95);
+        background-color: var(--button-hover);
     }
 
     :global(.button.active) {
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index d58cb825..dfa96938 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -14,6 +14,8 @@
 
     let screenWidth: number;
 
+    $: currentPageTitle = $page.url.pathname.split("/").at(-1);
+
     $: isMobile = screenWidth <= 750;
     $: isHome = $page.url.pathname === `/settings`;
 </script>
@@ -23,11 +25,19 @@
 <div id="settings-page">
     <div id="settings-sidebar">
         <div id="settings-header" class:back-visible={!isHome && isMobile}>
-            {#if !isHome && isMobile}
-                <a class="back-button" href="/settings">
-                    <IconChevronLeft />
-                    <h2 id="settings-page-title">settings</h2>
-                </a>
+            {#if isMobile}
+                {#if !isHome}
+                    <a class="back-button" href="/settings">
+                        <IconChevronLeft />
+                    </a>
+                {/if}
+                <h3 id="settings-page-title">
+                    settings
+                    {#if !isHome}
+                        <span class="title-slash"> / </span>
+                        {currentPageTitle}
+                    {/if}
+                </h3>
             {:else}
                 <h2 id="settings-page-title">settings</h2>
             {/if}
@@ -77,7 +87,9 @@
     #settings-page {
         --settings-nav-width: 250px;
         --settings-padding: 30px;
-        --settings-padding-small: calc(var(--settings-padding) - var(--padding));
+        --settings-padding-small: calc(
+            var(--settings-padding) - var(--padding)
+        );
         display: grid;
         width: 100%;
         grid-template-columns: var(--settings-nav-width) 1fr;
@@ -110,11 +122,11 @@
     }
 
     #settings-navigation {
-        gap: 12px;
+        gap: var(--padding);
     }
 
     #settings-header {
-        --back-padding: 6px;
+        --back-padding: calc(var(--padding) / 2);
     }
 
     .back-button {
@@ -123,7 +135,9 @@
         color: var(--secondary);
         gap: var(--back-padding);
         padding: var(--back-padding);
-        padding-right: calc(var(--back-padding) * 2);
+
+        position: absolute;
+        left: var(--back-padding);
     }
 
     .back-button:active {
@@ -166,10 +180,7 @@
             position: sticky;
             padding: var(--padding);
             gap: 4px;
-        }
-
-        #settings-header.back-visible {
-            padding: calc(var(--padding) - var(--back-padding));
+            justify-content: center;
         }
 
         #settings-sidebar {
@@ -178,7 +189,11 @@
 
         #settings-page-title {
             text-align: center;
-            font-size: 16px;
+            letter-spacing: -0.3px;
+        }
+
+        .title-slash {
+            color: var(--gray);
         }
 
         #settings-navigation {