web: move svg icon params to css & clean up

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;