fix(desktop): unify onboarding step UI — consistent dark theme with top bar#6026
Merged
Conversation
…op bar Both shortcut steps (keyboard + voice) were using a split-pane layout with light/yellow right pane, no top bar, and Skip buried in the corner. The demo and tasks steps used a clean single-pane dark layout with a top header bar. Now all 5 post-chat onboarding steps use the same pattern: - Dark background (OmiColors.backgroundPrimary) - Top header bar with step title + Skip button - Centered content area - Consistent dark theme colors throughout Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
Greptile SummaryThis PR unifies the layout of two onboarding steps ( Key changes:
Confidence Score: 5/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A([View appears]) --> B[onAppear\nunregisterShortcuts / installKeyMonitor\nor setup FloatingControlBar + PTT]
B --> C[Header Bar\nTitle + Skip button]
C --> D[Content Area\nShortcut key preview\nChoice buttons\nChange Shortcut button]
D --> E{Shortcut\ndetected?}
E -- No --> D
E -- Yes --> F[Animate in\nContinue button]
F --> G([onComplete callback])
C -- Skip --> H([onSkip callback])
A -.->|onDisappear| I[removeMonitor\nregisterShortcuts\nor toggleAIInput]
Reviews (1): Last reviewed commit: "fix(desktop): unify onboarding step UI —..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+58
to
68
| VStack(spacing: 12) { | ||
| Text("Choose a different shortcut:") | ||
| .font(.system(size: 14, weight: .medium)) | ||
| .foregroundColor(OmiColors.textSecondary) | ||
|
|
||
| RoundedRectangle(cornerRadius: 16, style: .continuous) | ||
| .fill(Color(red: 0.95, green: 0.94, blue: 0.92)) | ||
| .frame(height: 128) | ||
| .overlay { | ||
| shortcutKeyPreview | ||
| } | ||
|
|
||
| VStack(alignment: .leading, spacing: 12) { | ||
| Text("Choose a different shortcut:") | ||
| .font(.system(size: 14, weight: .medium)) | ||
| .foregroundColor(Color.black.opacity(0.68)) | ||
|
|
||
| HStack(spacing: 10) { | ||
| ForEach(ShortcutSettings.AskOmiKey.allCases, id: \.self) { key in | ||
| shortcutChoiceButton(key) | ||
| } | ||
| HStack(spacing: 10) { | ||
| ForEach(ShortcutSettings.AskOmiKey.allCases, id: \.self) { key in | ||
| shortcutChoiceButton(key) | ||
| } | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
The old layout had a 1pt stroke on shortcut choice buttons (both selected and unselected) to define their hit area:
.overlay(
RoundedRectangle(cornerRadius: 12, style: .continuous)
.stroke(isSelected ? OmiColors.purplePrimary : Color.black.opacity(0.08), lineWidth: 1)
)This overlay was removed in both files. On a dark background, the unselected state now relies entirely on OmiColors.backgroundSecondary fill for visibility. If backgroundSecondary is close in luminance to backgroundPrimary, the buttons may be hard to perceive as tappable targets.
Consider either re-adding a subtle border or verifying that the secondary/primary background contrast is sufficient in both light and dark appearances.
Comment on lines
+57
to
67
| VStack(spacing: 12) { | ||
| Text("Try another key if it doesn't react:") | ||
| .font(.system(size: 14, weight: .medium)) | ||
| .foregroundColor(OmiColors.textSecondary) | ||
|
|
||
| RoundedRectangle(cornerRadius: 16, style: .continuous) | ||
| .fill(Color(red: 0.95, green: 0.94, blue: 0.92)) | ||
| .frame(height: 128) | ||
| .overlay { | ||
| shortcutKeyPreview | ||
| } | ||
|
|
||
| VStack(alignment: .leading, spacing: 12) { | ||
| Text("Try another key if it doesn't react:") | ||
| .font(.system(size: 14, weight: .medium)) | ||
| .foregroundColor(Color.black.opacity(0.68)) | ||
|
|
||
| HStack(spacing: 10) { | ||
| ForEach(ShortcutSettings.PTTKey.allCases, id: \.self) { key in | ||
| shortcutChoiceButton(key) | ||
| } | ||
| HStack(spacing: 10) { | ||
| ForEach(ShortcutSettings.PTTKey.allCases, id: \.self) { key in | ||
| shortcutChoiceButton(key) | ||
| } | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Same as OnboardingFloatingBarShortcutStepView — the shortcutChoiceButton stroke overlay was removed, leaving only the backgroundSecondary fill to distinguish the buttons from the surrounding backgroundPrimary background. Ensure adequate contrast or re-add a low-opacity stroke for the unselected state.
Glucksberg
pushed a commit
to Glucksberg/omi-local
that referenced
this pull request
Apr 28, 2026
…op bar (BasedHardware#6026) All 5 post-chat steps now use same layout: dark bg, top header bar with Skip, centered content. No more split-pane grey/white/yellow inconsistency.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
All 5 post-chat steps now use same layout: dark bg, top header bar with Skip, centered content. No more split-pane grey/white/yellow inconsistency.