Make icons themable (again)

AppleBlox · Oct 19, 2024 · 7e55c87 · 7e55c87
1 parent b6b50cb
commit 7e55c87
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/frontend/src/windows/main/Sidebar/Sidebar.svelte b/frontend/src/windows/main/Sidebar/Sidebar.svelte
@@ -24,6 +24,7 @@
 	import shellFS from '../ts/tools/shellfs';
 	import { getMode } from '../ts/utils';
 	import SidebarBtn from './sidebar-btn.svelte';
+	import ColorImage from '../components/color-image.svelte';
 
 	export let isLaunched: boolean = false;
 	export let currentPage = 'integrations';
@@ -141,7 +142,7 @@
 					dispatch('launchRoblox', true);
 				}}
 			>
-				<img src={buttonIcon} alt="Button Icon" class="mr-1 mt-[1px] w-5 h-5" />
+				<ColorImage src={buttonIcon} alt="Button icon" class="w-5 h-5 mr-1 mt-[1px]" color="white" />
 				<p class="font-mono transition duration-150">{buttonState}</p>
 			</Button>
 		</div>

diff --git a/frontend/src/windows/main/components/color-image.svelte b/frontend/src/windows/main/components/color-image.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	export let src: string;
+	export let alt: string;
+	export let color = '';
+
+	let className = '';
+	export { className as class };
+</script>
+
+<div class={cn('relative', className)}>
+	<img {src} {alt} class="w-full h-full object-contain" />
+	<div
+		class={`absolute inset-0 bg-${color}`}
+		style="mask-image: url({src}); mask-size: contain; mask-repeat: no-repeat; mask-position: center;"
+	></div>
+</div>
diff --git a/frontend/src/windows/main/sidebar/sidebar-btn.svelte b/frontend/src/windows/main/sidebar/sidebar-btn.svelte
@@ -3,6 +3,7 @@
 	export let icon: string;
 	export let id: string;
 	import { createEventDispatcher } from 'svelte';
+	import ColorImage from '../components/color-image.svelte';
 
 	export let currentPage: string;
 	export let position: { total: number; index: number };
@@ -21,10 +22,7 @@
 			class={`absolute right-[-10px] h-14 w-10 bg-background -z-10 ${position.index === 0 ? 'top-20' : position.index === position.total - 1 && 'mb-6'}`}
 		></div>
 	{/if}
-	<div class="w-4 h-4 mx-4 relative">
-		<img src={icon} alt="Sidebar icon" class="w-full h-full object-contain" />
-		<div class="absolute inset-0 bg-foreground" style="mask-image: url({icon}); mask-size: contain; mask-repeat: no-repeat; mask-position: center;"></div>
-	</div>
+	<ColorImage src={icon} alt="Sidebar icon" color="foreground" class="w-4 h-4 mx-4"/>
 	<p
 		class={`${currentPage === id ? 'text-primary' : 'text-foreground'} transition duration-100 font-mono text-[14px] hover:saturate-150 hover:text-primary`}
 	>