chore: migrate remaining ui to token utilities

This commit is contained in:
Shantur Rathore
2025-10-28 21:22:19 +00:00
parent ad86154d47
commit 311c1bcd76
9 changed files with 274 additions and 162 deletions

View File

@@ -8,21 +8,20 @@ interface EmptyStateProps {
const EmptyState: Component<EmptyStateProps> = (props) => {
return (
<div class="flex h-full w-full items-center justify-center" style="background-color: var(--surface-secondary);">
<div class="flex h-full w-full items-center justify-center bg-surface-secondary">
<div class="max-w-[500px] px-8 py-12 text-center">
<div class="mb-8 flex justify-center">
<Folder class="h-16 w-16 text-gray-400 dark:text-gray-600" />
<Folder class="h-16 w-16 icon-muted" />
</div>
<h1 class="mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">Welcome to OpenCode Client</h1>
<h1 class="mb-4 text-2xl font-semibold text-primary">Welcome to OpenCode Client</h1>
<p class="mb-8 text-base text-gray-600 dark:text-gray-400">Select a folder to start coding with AI</p>
<p class="mb-8 text-base text-secondary">Select a folder to start coding with AI</p>
<button
onClick={props.onSelectFolder}
disabled={props.isLoading}
class="mb-4 inline-flex items-center gap-2 rounded-lg px-6 py-3 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:opacity-90"
style="background-color: var(--accent-primary); color: var(--text-inverted); ring-color: var(--accent-primary); ring-offset-color: var(--surface-base);"
class="mb-4 button-primary"
>
{props.isLoading ? (
<>
@@ -34,11 +33,11 @@ const EmptyState: Component<EmptyStateProps> = (props) => {
)}
</button>
<p class="text-sm text-gray-500 dark:text-gray-500">
<p class="text-sm text-muted">
Keyboard shortcut: {navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"}+N
</p>
<div class="mt-6 space-y-1 text-sm text-gray-400 dark:text-gray-600">
<div class="mt-6 space-y-1 text-sm text-muted">
<p>Examples: ~/projects/my-app</p>
<p>You can have multiple instances of the same folder</p>
</div>