Skip to content

Commit 2d77331

Browse files
moinulmoinmoinulmoin
committed
feat: redesign Settings page with modern UI
- Update header to match Overview and History pages style - Add colored icon backgrounds for visual hierarchy - Simplify Language and Startup sections to single rows (no double headers) - Improve Recording section with better visual organization - Enhance accessibility warning with dark mode support - Update info tip styling with proper borders - Replace RefreshCw icon with Rocket for startup section
1 parent 7a18ce1 commit 2d77331

File tree

1 file changed

+78
-59
lines changed

1 file changed

+78
-59
lines changed

‎src/components/sections/GeneralSettings.tsx‎

Lines changed: 78 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useSettings } from "@/contexts/SettingsContext";
77
import { isMacOS } from "@/lib/platform";
88
import { disable, enable, isEnabled } from "@tauri-apps/plugin-autostart";
99
import { invoke } from "@tauri-apps/api/core";
10-
import { AlertCircle, Globe, Mic, RefreshCw } from "lucide-react";
10+
import { AlertCircle, Globe, Mic, Rocket, Info } from "lucide-react";
1111
import { useEffect, useState } from "react";
1212
import { toast } from "sonner";
1313
import { LanguageSelection } from "../LanguageSelection";
@@ -61,29 +61,41 @@ export function GeneralSettings() {
6161
};
6262

6363
return (
64-
<div className="h-full flex flex-col p-6">
65-
<div className="flex-shrink-0 mb-4 space-y-3">
66-
<h2 className="text-lg font-semibold">General Settings</h2>
67-
<p className="text-sm text-muted-foreground">
68-
Configure your recording preferences and app behavior
69-
</p>
64+
<div className="h-full flex flex-col">
65+
{/* Header */}
66+
<div className="px-6 py-4 border-b border-border/40">
67+
<div className="flex items-center justify-between">
68+
<div>
69+
<h1 className="text-2xl font-semibold">Settings</h1>
70+
<p className="text-sm text-muted-foreground mt-1">
71+
Configure your recording preferences and app behavior
72+
</p>
73+
</div>
74+
</div>
7075
</div>
7176

72-
<ScrollArea className="flex-1 min-h-0">
73-
<div className="space-y-6">
77+
<ScrollArea className="flex-1">
78+
<div className="p-6 space-y-4">
7479
{/* Recording Section */}
75-
<div className="rounded-lg border bg-card p-4 space-y-4">
76-
<div className="flex items-center gap-2 mb-2">
77-
<Mic className="h-4 w-4 text-muted-foreground" />
78-
<h3 className="text-sm font-medium">Recording</h3>
80+
<div className="rounded-lg border border-border/50 bg-card">
81+
<div className="px-4 py-3 border-b border-border/50">
82+
<div className="flex items-center gap-2">
83+
<div className="p-1.5 rounded-md bg-primary/10">
84+
<Mic className="h-4 w-4 text-primary" />
85+
</div>
86+
<div>
87+
<h3 className="font-medium">Recording</h3>
88+
<p className="text-xs text-muted-foreground">Voice capture and hotkey settings</p>
89+
</div>
90+
</div>
7991
</div>
8092

81-
<div className="space-y-4">
93+
<div className="p-4 space-y-4">
8294
<div className="flex items-center justify-between">
83-
<div>
84-
<Label htmlFor="hotkey">Hotkey</Label>
85-
<p className="text-xs text-muted-foreground mt-0.5">
86-
Global shortcut to start recording
95+
<div className="space-y-0.5">
96+
<Label htmlFor="hotkey" className="text-sm font-medium">Recording Hotkey</Label>
97+
<p className="text-xs text-muted-foreground">
98+
Global shortcut to start voice typing
8799
</p>
88100
</div>
89101
<HotkeyInput
@@ -105,20 +117,24 @@ export function GeneralSettings() {
105117
</div>
106118

107119
{!canAutoInsert && showAccessibilityWarning && (
108-
<div className="flex items-center gap-2 p-2 text-sm text-amber-600 bg-amber-50 rounded-md">
109-
<AlertCircle className="w-4 h-4 flex-shrink-0" />
110-
<span>
111-
Grant accessibility permission in Advanced settings for
112-
hotkeys to work
113-
</span>
120+
<div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
121+
<AlertCircle className="w-4 h-4 flex-shrink-0 text-amber-600 dark:text-amber-500 mt-0.5" />
122+
<div className="flex-1 space-y-1">
123+
<p className="text-sm font-medium text-amber-900 dark:text-amber-400">
124+
Accessibility permission required
125+
</p>
126+
<p className="text-xs text-amber-800 dark:text-amber-500">
127+
Grant permission in Advanced settings for hotkeys to work system-wide
128+
</p>
129+
</div>
114130
</div>
115131
)}
116132

117133
<div className="flex items-center justify-between">
118-
<div>
119-
<Label htmlFor="microphone">Microphone</Label>
120-
<p className="text-xs text-muted-foreground mt-0.5">
121-
Select audio input device
134+
<div className="space-y-0.5">
135+
<Label htmlFor="microphone" className="text-sm font-medium">Microphone</Label>
136+
<p className="text-xs text-muted-foreground">
137+
Select your preferred audio input device
122138
</p>
123139
</div>
124140
<MicrophoneSelection
@@ -138,10 +154,10 @@ export function GeneralSettings() {
138154
</div>
139155

140156
<div className="flex items-center justify-between">
141-
<div>
142-
<Label htmlFor="compact-recording">Compact status</Label>
143-
<p className="text-xs text-muted-foreground mt-0.5">
144-
Show minimal recording indicator
157+
<div className="space-y-0.5">
158+
<Label htmlFor="compact-recording" className="text-sm font-medium">Compact Status</Label>
159+
<p className="text-xs text-muted-foreground">
160+
Show minimal recording indicator window
145161
</p>
146162
</div>
147163
<Switch
@@ -154,26 +170,29 @@ export function GeneralSettings() {
154170
</div>
155171
</div>
156172

157-
<div className="text-xs text-muted-foreground pt-2">
158-
💡 Tip: Press{" "}
159-
<kbd className="px-1 py-0.5 rounded text-xs bg-muted">ESC</kbd>{" "}
160-
twice while recording to cancel
173+
<div className="px-4 pb-4">
174+
<div className="flex items-center gap-2 p-3 rounded-lg bg-primary/5 border border-primary/10">
175+
<Info className="h-4 w-4 text-primary" />
176+
<p className="text-xs text-muted-foreground">
177+
Press <kbd className="px-1.5 py-0.5 rounded text-xs bg-background border">ESC</kbd> twice while recording to cancel
178+
</p>
179+
</div>
161180
</div>
162181
</div>
163182

164183
{/* Language Section */}
165-
<div className="rounded-lg border bg-card p-4 space-y-4">
166-
<div className="flex items-center gap-2 mb-2">
167-
<Globe className="h-4 w-4 text-muted-foreground" />
168-
<h3 className="text-sm font-medium">Language</h3>
169-
</div>
170-
184+
<div className="rounded-lg border border-border/50 bg-card p-4">
171185
<div className="flex items-center justify-between">
172-
<div>
173-
<Label htmlFor="language">Spoken language</Label>
174-
<p className="text-xs text-muted-foreground mt-0.5">
175-
Language you speak for transcription
176-
</p>
186+
<div className="flex items-center gap-3">
187+
<div className="p-1.5 rounded-md bg-blue-500/10">
188+
<Globe className="h-4 w-4 text-blue-500" />
189+
</div>
190+
<div className="space-y-0.5">
191+
<Label htmlFor="language" className="text-sm font-medium">Spoken Language</Label>
192+
<p className="text-xs text-muted-foreground">
193+
The language you'll be speaking in
194+
</p>
195+
</div>
177196
</div>
178197
<LanguageSelection
179198
value={settings.language || "en"}
@@ -194,18 +213,18 @@ export function GeneralSettings() {
194213
</div>
195214

196215
{/* Startup Section */}
197-
<div className="rounded-lg border bg-card p-4 space-y-4">
198-
<div className="flex items-center gap-2 mb-2">
199-
<RefreshCw className="h-4 w-4 text-muted-foreground" />
200-
<h3 className="text-sm font-medium">Startup</h3>
201-
</div>
202-
216+
<div className="rounded-lg border border-border/50 bg-card p-4">
203217
<div className="flex items-center justify-between">
204-
<div>
205-
<Label htmlFor="autostart">Launch at startup</Label>
206-
<p className="text-xs text-muted-foreground mt-0.5">
207-
Start VoiceTypr when you log in
208-
</p>
218+
<div className="flex items-center gap-3">
219+
<div className="p-1.5 rounded-md bg-green-500/10">
220+
<Rocket className="h-4 w-4 text-green-500" />
221+
</div>
222+
<div className="space-y-0.5">
223+
<Label htmlFor="autostart" className="text-sm font-medium">Launch at Startup</Label>
224+
<p className="text-xs text-muted-foreground">
225+
Automatically start VoiceTypr when you log in
226+
</p>
227+
</div>
209228
</div>
210229
<Switch
211230
id="autostart"
@@ -219,4 +238,4 @@ export function GeneralSettings() {
219238
</ScrollArea>
220239
</div>
221240
);
222-
}
241+
}

0 commit comments

Comments
 (0)