From dfb4c09be73ed3e2ca7dfdd2915a126ce6963717 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Fri, 17 May 2024 18:36:35 +0200
Subject: [PATCH] chore: Did some work on settings page

---
 desktop/src/ui/pages/settings/components.tsx  |  6 +++---
 .../settings/launcher/SettingsAppearance.tsx  | 20 ++++++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/desktop/src/ui/pages/settings/components.tsx b/desktop/src/ui/pages/settings/components.tsx
index dbb1456c..5485af30 100644
--- a/desktop/src/ui/pages/settings/components.tsx
+++ b/desktop/src/ui/pages/settings/components.tsx
@@ -11,18 +11,18 @@ function SettingsRow(props: SettingsRowProps) {
 	const interactableClass = createEffect(() => props.clickable ? 'hover:bg-component-bg-hover active:bg-component-bg-pressed' : '');
 
 	return (
-		<div class={`flex flex-row bg-component-bg rounded-xl gap-4 p-4 ${interactableClass} items-center`}>
+		<div class={`flex flex-row bg-component-bg rounded-xl gap-4 px-5 p-4 ${interactableClass} items-center`}>
 			<div class="flex justify-center items-center h-8 w-8">
 				{props.icon}
 			</div>
 
-			<div class="flex flex-col gap-1 flex-1">
+			<div class="flex flex-col gap-2 flex-1">
 				<h3>{props.title}</h3>
 				<p class="text-wrap">{props.description}</p>
 			</div>
 
 			<div class="">
-				<span>test</span>
+				{props.children}
 			</div>
 		</div>
 	);
diff --git a/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx b/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx
index 1df4deaf..ce250042 100644
--- a/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx
+++ b/desktop/src/ui/pages/settings/launcher/SettingsAppearance.tsx
@@ -1,8 +1,22 @@
+import { ColorsIcon, PaintPourIcon } from '@untitled-theme/icons-solid';
+import SettingsRow from '../components';
+import ScrollableContainer from '~ui/components/ScrollableContainer';
+import Button from '~ui/components/base/Button';
+
 function SettingsAppearance() {
 	return (
-		<div>
-			<h1>Appearance</h1>
-		</div>
+		<ScrollableContainer title="Appearance">
+			<div class="flex flex-row items-center flex-1">
+				<p>theme placeholder</p>
+			</div>
+			<SettingsRow
+				title="Accent Color"
+				description="The main color used across the launcher. This doesn’t edit your theme."
+				icon={<PaintPourIcon />}
+			>
+				<Button iconLeft={<ColorsIcon />}>#ff0000</Button>
+			</SettingsRow>
+		</ScrollableContainer>
 	);
 }