refactor: restyle chips via tokens

This commit is contained in:
Shantur Rathore
2025-10-28 20:18:36 +00:00
parent c6889bef1f
commit d473c73771
8 changed files with 111 additions and 48 deletions

View File

@@ -66,8 +66,8 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black/50 z-50" />
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full max-w-lg p-6">
<Dialog.Title class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
<Dialog.Content class="modal-surface w-full max-w-lg p-6">
<Dialog.Title class="text-xl font-semibold mb-4" style="color: var(--text-primary);">
OpenCode {instance()?.folder.split("/").pop()}
</Dialog.Title>
@@ -109,19 +109,19 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
<div class="w-full border-t border-gray-300 dark:border-gray-700" />
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400">or</span>
<span class="px-2" style="background-color: var(--surface-base); color: var(--text-muted);">or</span>
</div>
</div>
<div>
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start new session:</h3>
<h3 class="text-sm font-medium mb-2" style="color: var(--text-secondary);">Start new session:</h3>
<div class="space-y-3">
<Show
when={agentList().length > 0}
fallback={<div class="text-sm text-gray-500 dark:text-gray-400">Loading agents...</div>}
>
<select
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 dark:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
class="selector-input"
value={selectedAgent()}
onChange={(e) => setSelectedAgent(e.currentTarget.value)}
>
@@ -130,7 +130,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
</Show>
<button
class="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-500 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/40"
class="selector-button-primary w-full"
onClick={handleNewSession}
disabled={isCreating() || agentList().length === 0}
>