Skip to content

Commit 6d35d11

Browse files
cvs0cvs0
committed
UX Fixes / Settings cleanup / Styling fixes
* Made buttons have the cursor-pointer * Removed unused settings * Made inputs in the create password dialog more consistent * Changed onCopy toast to be more simple
1 parent 32b802a commit 6d35d11

File tree

4 files changed

+12
-45
lines changed

4 files changed

+12
-45
lines changed

‎src/components/ui/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
55
import { cn } from "@/lib/utils"
66

77
const buttonVariants = cva(
8-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none hover:cursor-pointer disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
99
{
1010
variants: {
1111
variant: {

‎src/components/vault/dialogs/create-password-dialog.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,14 @@ export const CreatePasswordDialog = ({
159159
<DialogTitle>Create Password</DialogTitle>
160160
</DialogHeader>
161161
<div className="space-y-4">
162-
<div className="relative">
162+
<div className="flex relative rounded-lg">
163163
<Input
164164
placeholder="Name"
165165
value={passwordItem.name}
166166
onChange={handleChange}
167167
maxLength={50}
168168
name="name"
169+
className="-ms-px h-12 rounded-tl-none rounded-bl-none"
169170
/>
170171
<div
171172
className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
@@ -175,13 +176,14 @@ export const CreatePasswordDialog = ({
175176
{passwordItem.name.length}/50
176177
</div>
177178
</div>
178-
<div className="relative">
179+
<div className="flex relative rounded-lg">
179180
<Input
180181
placeholder="Username"
181182
value={passwordItem.username}
182183
onChange={handleChange}
183184
maxLength={30}
184185
name="username"
186+
className="-ms-px h-12 rounded-tl-none rounded-bl-none"
185187
/>
186188
<div
187189
className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
@@ -211,14 +213,15 @@ export const CreatePasswordDialog = ({
211213
{passwordItem.website.length}/50
212214
</div>
213215
</div>
214-
<div className="relative">
216+
<div className="flex relative rounded-lg">
215217
<Input
216218
placeholder="Password"
217219
value={passwordItem.password}
218220
onChange={handleChange}
219221
type="password"
220222
name="password"
221223
maxLength={128}
224+
className="-ms-px h-12 rounded-tl-none rounded-bl-none"
222225
/>
223226
<div
224227
className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"

‎src/components/vault/password/password-details.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
9696
value={entry.website}
9797
onCopy={() => {
9898
navigator.clipboard.writeText(entry.website);
99-
toast.success("Copied website successfully");
99+
toast.success("Copied website");
100100
}}
101101
className="rounded-tl-xl rounded-tr-xl"
102102
>
@@ -112,7 +112,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
112112
value={entry.username}
113113
onCopy={() => {
114114
navigator.clipboard.writeText(entry.username);
115-
toast.success("Copied username successfully");
115+
toast.success("Copied username");
116116
}}
117117
className="py-6"
118118
/>
@@ -126,7 +126,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
126126
}
127127
onCopy={() => {
128128
navigator.clipboard.writeText(entry.password);
129-
toast.success("Copied password successfully");
129+
toast.success("Copied password");
130130
}}
131131
className="rounded-br-xl rounded-bl-xl"
132132
>
@@ -207,7 +207,7 @@ const DetailItem: React.FC<DetailItemProps> = ({
207207
<TooltipContent>Copy</TooltipContent>
208208
<TooltipTrigger
209209
onClick={onCopy}
210-
className="flex items-center space-x-2 max-w-[calc(100%-2rem)] overflow-hidden"
210+
className="flex items-center space-x-2 max-w-[calc(100%-2rem)] overflow-hidden hover:cursor-pointer"
211211
>
212212
{icon}
213213
<span className="text-gray-900 dark:text-gray-100 truncate">

‎src/components/vault/settings.tsx

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,6 @@ export function Settings() {
109109
<CardContent>
110110
<Tabs defaultValue="general" className="w-full">
111111
<TabsList className="grid w-full grid-cols-3 mb-8">
112-
<TabsTrigger value="general" className="flex items-center gap-2">
113-
<Settings2 className="h-4 w-4" />
114-
<span>General</span>
115-
</TabsTrigger>
116112
<TabsTrigger value="security" className="flex items-center gap-2">
117113
<Shield className="h-4 w-4" />
118114
<span>Security</span>
@@ -123,48 +119,16 @@ export function Settings() {
123119
</TabsTrigger>
124120
</TabsList>
125121

126-
<TabsContent value="general" className="space-y-6">
127-
<div className="space-y-4">
128-
<div className="flex items-center justify-between border-b pb-3">
129-
<div>
130-
<h3 className="font-medium">Dark Mode</h3>
131-
<p className="text-sm text-muted-foreground">
132-
Toggle between light and dark theme
133-
</p>
134-
</div>
135-
<Switch />
136-
</div>
137-
<div className="flex items-center justify-between border-b pb-3">
138-
<div>
139-
<h3 className="font-medium">Auto Lock</h3>
140-
<p className="text-sm text-muted-foreground">
141-
Automatically lock the vault after inactivity
142-
</p>
143-
</div>
144-
<Switch />
145-
</div>
146-
</div>
147-
</TabsContent>
148-
149122
<TabsContent value="security" className="space-y-6">
150123
<div className="space-y-4">
151-
<div className="flex items-center justify-between border-b pb-3">
152-
<div>
153-
<h3 className="font-medium">Biometric Lock</h3>
154-
<p className="text-sm text-muted-foreground">
155-
Use fingerprint or face ID to unlock the vault
156-
</p>
157-
</div>
158-
<Switch />
159-
</div>
160124
<div className="flex items-center justify-between border-b pb-3">
161125
<div>
162126
<h3 className="font-medium">Lock on Idle</h3>
163127
<p className="text-sm text-muted-foreground">
164128
Lock the vault when your device is idle
165129
</p>
166130
</div>
167-
<Switch />
131+
<Switch disabled />
168132
</div>
169133
</div>
170134
</TabsContent>

0 commit comments

Comments
 (0)