From 7e55c8783d949390703dd8fc0f3f80069ef00994 Mon Sep 17 00:00:00 2001
From: OrigamingWasTaken <74014262+OrigamingWasTaken@users.noreply.github.com>
Date: Sat, 19 Oct 2024 20:39:10 +0200
Subject: [PATCH] Make icons themable (again)

---
 .../src/windows/main/Sidebar/Sidebar.svelte    |  3 ++-
 .../windows/main/components/color-image.svelte | 18 ++++++++++++++++++
 .../windows/main/sidebar/sidebar-btn.svelte    |  6 ++----
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/windows/main/components/color-image.svelte

diff --git a/frontend/src/windows/main/Sidebar/Sidebar.svelte b/frontend/src/windows/main/Sidebar/Sidebar.svelte
index f34d513..27ae753 100644
--- 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
new file mode 100644
index 0000000..24f43fd
--- /dev/null
+++ 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
index f4c9eec..1836138 100644
--- 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`}
 	>