Skip to content

Commit 311b1e9

Browse files
leaanthonyclaude
leaanthony
and
claude
committed
fix(setup): improve light mode styling and add Docker progress to sidebar
- Move Docker build progress indicator to sidebar (above bottom icons) - Fix light mode text colors in ProjectsPage settings rows - Add light mode CSS variants for settings-group and settings-row - Improve button positioning consistency across pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 50ced0e commit 311b1e9

File tree

6 files changed

+57
-22
lines changed

6 files changed

+57
-22
lines changed

v3/internal/setupwizard/frontend/dist/assets/index-BHYGl-ql.js renamed to v3/internal/setupwizard/frontend/dist/assets/index-BJCv0dgm.js

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎v3/internal/setupwizard/frontend/dist/assets/index-BrSDszdC.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎v3/internal/setupwizard/frontend/dist/assets/index-CJz6MyZB.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎v3/internal/setupwizard/frontend/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
10-
<script type="module" crossorigin src="/assets/index-BHYGl-ql.js"></script>
11-
<link rel="stylesheet" crossorigin href="/assets/index-BrSDszdC.css">
10+
<script type="module" crossorigin src="/assets/index-BJCv0dgm.js"></script>
11+
<link rel="stylesheet" crossorigin href="/assets/index-CJz6MyZB.css">
1212
</head>
1313
<body>
1414
<div id="root"></div>

‎v3/internal/setupwizard/frontend/src/App.tsx‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,11 @@ const pageVariants = {
8181

8282

8383
// Sidebar with progress steps (1:4 ratio - sidebar is 20% of total width)
84-
function Sidebar({ currentStep }: { currentStep: OOBEStep }) {
84+
function Sidebar({ currentStep, dockerStatus, buildingDocker }: {
85+
currentStep: OOBEStep;
86+
dockerStatus: DockerStatus | null;
87+
buildingDocker: boolean;
88+
}) {
8589
const { theme, toggleTheme } = useTheme();
8690
const currentStage = getWizardStage(currentStep);
8791
const currentIndex = getStageIndex(currentStage);
@@ -99,6 +103,8 @@ function Sidebar({ currentStep }: { currentStep: OOBEStep }) {
99103
window.open('https://github.com/sponsors/leaanthony', '_blank', 'noopener,noreferrer');
100104
};
101105

106+
const showDockerProgress = buildingDocker || (dockerStatus?.pullStatus === 'pulling');
107+
102108
return (
103109
<div className="w-48 flex-shrink-0 bg-gray-100/80 dark:bg-transparent dark:glass-sidebar border-r border-gray-200 dark:border-transparent flex flex-col">
104110
{/* Wails logo - 3x bigger */}
@@ -159,6 +165,25 @@ function Sidebar({ currentStep }: { currentStep: OOBEStep }) {
159165
</ul>
160166
</nav>
161167

168+
{/* Docker build progress */}
169+
{showDockerProgress && (
170+
<div className="px-4 py-3 border-t border-gray-200 dark:border-white/10">
171+
<div className="flex items-center gap-2 mb-2">
172+
<div className="w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin" />
173+
<span className="text-xs text-gray-600 dark:text-gray-400">Docker image</span>
174+
</div>
175+
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
176+
<div
177+
className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
178+
style={{ width: `${dockerStatus?.pullProgress || 0}%` }}
179+
/>
180+
</div>
181+
<span className="text-[10px] text-gray-500 dark:text-gray-500 mt-1 block">
182+
{dockerStatus?.pullProgress ? `${Math.round(dockerStatus.pullProgress)}%` : 'Starting...'}
183+
</span>
184+
</div>
185+
)}
186+
162187
{/* Bottom controls - centered */}
163188
<div className="p-4 flex justify-center gap-3">
164189
<button
@@ -1167,16 +1192,16 @@ function ProjectsPage({
11671192
onBlur={handleSaveField}
11681193
autoFocus
11691194
placeholder="Acme Corp"
1170-
className="w-full bg-transparent border-none text-sm text-white placeholder-gray-500 focus:outline-none"
1195+
className="w-full bg-transparent border-none text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none"
11711196
/>
11721197
</div>
11731198
</div>
11741199
) : (
11751200
<div className="settings-row" onClick={() => handleRowClick('company')}>
1176-
<span className="text-sm font-medium text-white/90">Company</span>
1177-
<div className="flex items-center gap-2 text-sm text-white/65">
1201+
<span className="text-sm font-medium text-gray-800 dark:text-white/90">Company</span>
1202+
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-white/65">
11781203
<span>{defaults.author.company || 'Not set'}</span>
1179-
<span className="text-white/40 text-xs">&#9656;</span>
1204+
<span className="text-gray-400 dark:text-white/40 text-xs">&#9656;</span>
11801205
</div>
11811206
</div>
11821207
)}
@@ -1193,21 +1218,21 @@ function ProjectsPage({
11931218
onBlur={handleSaveField}
11941219
autoFocus
11951220
placeholder="com.example"
1196-
className="w-full bg-transparent border-none text-sm text-white placeholder-gray-500 focus:outline-none font-mono"
1221+
className="w-full bg-transparent border-none text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none font-mono"
11971222
/>
11981223
</div>
11991224
</div>
12001225
) : (
12011226
<div className="settings-row" onClick={() => handleRowClick('bundleId')}>
1202-
<span className="text-sm font-medium text-white/90">Bundle identifier</span>
1203-
<div className="flex items-center gap-2 text-sm text-white/65">
1227+
<span className="text-sm font-medium text-gray-800 dark:text-white/90">Bundle identifier</span>
1228+
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-white/65">
12041229
<span className="font-mono">{defaults.project.productIdentifierPrefix || 'com.example'}</span>
1205-
<span className="text-white/40 text-xs">&#9656;</span>
1230+
<span className="text-gray-400 dark:text-white/40 text-xs">&#9656;</span>
12061231
</div>
12071232
</div>
12081233
)}
12091234
</div>
1210-
<p className="text-xs text-white/40 mt-3 text-center">
1235+
<p className="text-xs text-gray-500 dark:text-white/40 mt-3 text-center">
12111236
These defaults are used when creating new projects
12121237
</p>
12131238
</div>
@@ -1494,7 +1519,7 @@ export default function App() {
14941519
{/* Main content card - max 75% width/height, sidebar:content = 1:4 ratio */}
14951520
<div className="w-[75vw] max-w-[75vw] h-[75vh] max-h-[75vh] glass-card rounded-2xl flex overflow-hidden relative z-10">
14961521
{/* Sidebar */}
1497-
<Sidebar currentStep={step} />
1522+
<Sidebar currentStep={step} dockerStatus={dockerStatus} buildingDocker={backgroundDockerStarted && (buildingImage || dockerStatus?.pullStatus === 'pulling')} />
14981523

14991524
{/* Content area - distinct from sidebar in dark mode */}
15001525
<div className="flex-1 flex flex-col min-w-0 bg-white/50 dark:bg-white/[0.03]">

‎v3/internal/setupwizard/frontend/src/index.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,20 +68,30 @@ html, body, #root {
6868
transition: background-color 0.12s ease;
6969
}
7070
.settings-row:hover {
71+
background: rgba(0, 0, 0, 0.04);
72+
}
73+
.dark .settings-row:hover {
7174
background: rgba(255, 255, 255, 0.06);
7275
}
7376
.settings-row + .settings-row {
77+
border-top: 1px solid rgba(0, 0, 0, 0.1);
78+
}
79+
.dark .settings-row + .settings-row {
7480
border-top: 1px solid var(--glass-border);
7581
}
7682

7783
/* Settings group container */
7884
.settings-group {
7985
border-radius: 12px;
86+
background: rgba(0, 0, 0, 0.04);
87+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
88+
overflow: hidden;
89+
}
90+
.dark .settings-group {
8091
background: rgba(255, 255, 255, 0.10);
8192
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--glass-border) inset;
8293
backdrop-filter: blur(10px);
8394
-webkit-backdrop-filter: blur(10px);
84-
overflow: hidden;
8595
}
8696

8797
/* Subtle grid background */

0 commit comments

Comments
 (0)