chore: Did some work on settings page

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>
 	);

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>
 	);
 }