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>