From 56081db857c67fc8ca1aaf345904454413ffd6c1 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 24 Jun 2024 23:46:37 +0600
Subject: [PATCH] web: move svg icon params to css & clean up

---
 web/src/components/save/Omnibox.svelte        |  9 +++++-
 .../components/settings/SettingsTab.svelte    | 31 ++++++++++++-------
 web/src/components/sidebar/Sidebar.svelte     | 21 ++++++-------
 web/src/components/sidebar/SidebarTab.svelte  |  6 ++++
 web/src/routes/settings/+layout.svelte        | 28 +++++++----------
 5 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 178af9dc..87682876 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -41,7 +41,7 @@
         class:focused={isFocused}
         class:downloadable={validLink(link)}
     >
-        <IconLink id="input-link-icon" color="var(--gray)" size="18px" />
+        <IconLink id="input-link-icon" />
 
         <input
             id="link-area"
@@ -115,6 +115,13 @@
         outline: var(--secondary) 0.5px solid;
     }
 
+    :global(#input-link-icon) {
+        stroke: var(--gray);
+        width: 18px;
+        height: 18px;
+        stroke-width: 2px;
+    }
+
     #input-container.focused :global(#input-link-icon) {
         stroke: var(--secondary);
     }
diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte
index 7e938f41..2f9e14dc 100644
--- a/web/src/components/settings/SettingsTab.svelte
+++ b/web/src/components/settings/SettingsTab.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
-    export let categoryName: string;
-    export let categoryLink: string;
+    export let tabName: string;
+    export let tabLink: string;
     export let iconColor: "gray" | "blue" | "green" = "gray";
 
-    $: isActive = $page.url.pathname === `/settings/${categoryLink}`;
+    $: isActive = $page.url.pathname === `/settings/${tabLink}`;
 </script>
 
 <a
-    class="settings-category"
-    href="/settings/{categoryLink}"
+    class="settings-tab"
+    href="/settings/{tabLink}"
     class:active={isActive}
 >
-    <div class="category-icon" style="background: var(--{iconColor})">
+    <div class="tab-icon" style="background: var(--{iconColor})">
         <slot></slot>
     </div>
-    <span>{categoryName}</span>
+    <span>{tabName}</span>
 </a>
 
 <style>
-    .settings-category {
+    .settings-tab {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -32,20 +32,27 @@
         border-radius: var(--border-radius);
     }
 
-    .settings-category:hover {
+    .settings-tab :global(svg) {
+        stroke: var(--white);
+        stroke-width: 1.5px;
+        height: 18px;
+        width: 18px;
+    }
+
+    .settings-tab:hover {
         background: var(--button-hover-transparent);
     }
 
-    .settings-category.active {
+    .settings-tab.active {
         background: var(--secondary);
         color: var(--primary);
     }
 
-    .settings-category span {
+    .settings-tab span {
         font-size: 14.5px;
     }
 
-    .category-icon {
+    .tab-icon {
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index d106c438..cc013117 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -12,8 +12,7 @@
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
-    const iconSize = 21;
-    const iconStroke = 1.2;
+    const settingsLink = "/settings/general/appearance";
 </script>
 
 <nav id="sidebar">
@@ -21,30 +20,30 @@
     <div id="sidebar-tabs">
         <div id="sidebar-actions" class="sidebar-inner-container">
             <SidebarTab tabName="save" tabLink="/">
-                <IconDownload size={iconSize} stroke={iconStroke} />
+                <IconDownload />
             </SidebarTab>
             <SidebarTab tabName="trim" tabLink="/trim">
-                <IconCut size={iconSize} stroke={iconStroke} />
+                <IconCut />
             </SidebarTab>
             <SidebarTab tabName="crop" tabLink="/crop">
-                <IconCrop size={iconSize} stroke={iconStroke} />
+                <IconCrop />
             </SidebarTab>
             <SidebarTab tabName="convert" tabLink="/convert">
-                <IconTransform size={iconSize} stroke={iconStroke} />
+                <IconTransform />
             </SidebarTab>
-            <SidebarTab tabName="settings" tabLink="/settings">
-                <IconSettings size={iconSize} stroke={iconStroke} />
+            <SidebarTab tabName="settings" tabLink={settingsLink}>
+                <IconSettings />
             </SidebarTab>
         </div>
         <div id="sidebar-info" class="sidebar-inner-container">
             <SidebarTab tabName="updates" tabLink="/updates">
-                <IconComet size={iconSize} stroke={iconStroke} />
+                <IconComet />
             </SidebarTab>
             <SidebarTab tabName="donate" tabLink="/donate">
-                <IconHeart size={iconSize} stroke={iconStroke} />
+                <IconHeart />
             </SidebarTab>
             <SidebarTab tabName="about" tabLink="/about">
-                <IconInfoCircle size={iconSize} stroke={iconStroke} />
+                <IconInfoCircle />
             </SidebarTab>
         </div>
     </div>
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 089214a2..67275a6b 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -59,6 +59,12 @@
         border-radius: var(--border-radius);
     }
 
+    .sidebar-tab :global(svg) {
+        stroke-width: 1.2px;
+        height: 21px;
+        width: 21px;
+    }
+
     .sidebar-tab.active {
         color: var(--sidebar-bg);
         background: var(--sidebar-highlight);
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 1d949672..266f030a 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -7,10 +7,6 @@
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
     import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
-
-    const iconSize = 18;
-    const iconStroke = 1.5;
-    const iconColor = "var(--white)";
 </script>
 
 <div id="settings-page">
@@ -19,34 +15,34 @@
         <nav id="settings-navigation">
             <SettingsSection sectionTitle="general">
                 <SettingsTab
-                    categoryName="appearance"
-                    categoryLink="general/appearance"
+                    tabName="appearance"
+                    tabLink="general/appearance"
                     iconColor="blue"
                 >
-                    <IconSunHigh size={iconSize} stroke={iconStroke} color={iconColor} />
+                    <IconSunHigh />
                 </SettingsTab>
             </SettingsSection>
             <SettingsSection sectionTitle="save">
                 <SettingsTab
-                    categoryName="video"
-                    categoryLink="save/video"
+                    tabName="video"
+                    tabLink="save/video"
                     iconColor="green"
                 >
-                    <IconMovie size={iconSize} stroke={iconStroke} color={iconColor} />
+                    <IconMovie />
                 </SettingsTab>
                 <SettingsTab
-                    categoryName="audio"
-                    categoryLink="save/audio"
+                    tabName="audio"
+                    tabLink="save/audio"
                     iconColor="green"
                 >
-                    <IconMusic size={iconSize} stroke={iconStroke} color={iconColor}/>
+                    <IconMusic />
                 </SettingsTab>
                 <SettingsTab
-                    categoryName="metadata"
-                    categoryLink="save/metadata"
+                    tabName="metadata"
+                    tabLink="save/metadata"
                     iconColor="green"
                 >
-                    <IconFileSettings size={iconSize} stroke={iconStroke} color={iconColor}/>
+                    <IconFileSettings />
                 </SettingsTab>
             </SettingsSection>
         </nav>