wrap settings row groups with styled container

This commit is contained in:
David Hill
2026-01-20 17:08:00 +00:00
parent 262aca1bca
commit 78bcbda2fa

View File

@@ -48,6 +48,7 @@ export const SettingsGeneral: Component = () => {
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h3 class="text-14-medium text-text-strong pb-2">Appearance</h3> <h3 class="text-14-medium text-text-strong pb-2">Appearance</h3>
<div class="bg-surface-raised-base px-4 rounded-lg">
<SettingsRow title="Appearance" description="Customise how OpenCode looks on your device"> <SettingsRow title="Appearance" description="Customise how OpenCode looks on your device">
<Select <Select
options={colorSchemeOptions} options={colorSchemeOptions}
@@ -102,11 +103,13 @@ export const SettingsGeneral: Component = () => {
/> />
</SettingsRow> </SettingsRow>
</div> </div>
</div>
{/* System notifications Section */} {/* System notifications Section */}
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h3 class="text-14-medium text-text-strong pb-2">System notifications</h3> <h3 class="text-14-medium text-text-strong pb-2">System notifications</h3>
<div class="bg-surface-raised-base px-4 rounded-lg">
<SettingsRow <SettingsRow
title="Agent" title="Agent"
description="Show system notification when the agent is complete or needs attention" description="Show system notification when the agent is complete or needs attention"
@@ -131,11 +134,13 @@ export const SettingsGeneral: Component = () => {
/> />
</SettingsRow> </SettingsRow>
</div> </div>
</div>
{/* Sound effects Section */} {/* Sound effects Section */}
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h3 class="text-14-medium text-text-strong pb-2">Sound effects</h3> <h3 class="text-14-medium text-text-strong pb-2">Sound effects</h3>
<div class="bg-surface-raised-base px-4 rounded-lg">
<SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention"> <SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention">
<Select <Select
options={soundOptions} options={soundOptions}
@@ -198,6 +203,7 @@ export const SettingsGeneral: Component = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }