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

Author: cvs0

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "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",
+  "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",
   {
     variants: {
       variant: {

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

@@ -159,13 +159,14 @@ export const CreatePasswordDialog = ({
           <DialogTitle>Create Password</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
-          <div className="relative">
+          <div className="flex relative rounded-lg">
             <Input
               placeholder="Name"
               value={passwordItem.name}
               onChange={handleChange}
               maxLength={50}
               name="name"
+              className="-ms-px h-12 rounded-tl-none rounded-bl-none"
             />
             <div
               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 = ({
               {passwordItem.name.length}/50
             </div>
           </div>
-          <div className="relative">
+          <div className="flex relative rounded-lg">
             <Input
               placeholder="Username"
               value={passwordItem.username}
               onChange={handleChange}
               maxLength={30}
               name="username"
+              className="-ms-px h-12 rounded-tl-none rounded-bl-none"
             />
             <div
               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 = ({
               {passwordItem.website.length}/50
             </div>
           </div>
-          <div className="relative">
+          <div className="flex relative rounded-lg">
             <Input
               placeholder="Password"
               value={passwordItem.password}
               onChange={handleChange}
               type="password"
               name="password"
               maxLength={128}
+              className="-ms-px h-12 rounded-tl-none rounded-bl-none"
             />
             <div
               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

@@ -96,7 +96,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
           value={entry.website}
           onCopy={() => {
             navigator.clipboard.writeText(entry.website);
-            toast.success("Copied website successfully");
+            toast.success("Copied website");
           }}
           className="rounded-tl-xl rounded-tr-xl"
         >
@@ -112,7 +112,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
           value={entry.username}
           onCopy={() => {
             navigator.clipboard.writeText(entry.username);
-            toast.success("Copied username successfully");
+            toast.success("Copied username");
           }}
           className="py-6"
         />
@@ -126,7 +126,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
           }
           onCopy={() => {
             navigator.clipboard.writeText(entry.password);
-            toast.success("Copied password successfully");
+            toast.success("Copied password");
           }}
           className="rounded-br-xl rounded-bl-xl"
         >
@@ -207,7 +207,7 @@ const DetailItem: React.FC<DetailItemProps> = ({
       <TooltipContent>Copy</TooltipContent>
       <TooltipTrigger
         onClick={onCopy}
-        className="flex items-center space-x-2 max-w-[calc(100%-2rem)] overflow-hidden"
+        className="flex items-center space-x-2 max-w-[calc(100%-2rem)] overflow-hidden hover:cursor-pointer"
       >
         {icon}
         <span className="text-gray-900 dark:text-gray-100 truncate">

src/components/vault/settings.tsx

@@ -109,10 +109,6 @@ export function Settings() {
         <CardContent>
           <Tabs defaultValue="general" className="w-full">
             <TabsList className="grid w-full grid-cols-3 mb-8">
-              <TabsTrigger value="general" className="flex items-center gap-2">
-                <Settings2 className="h-4 w-4" />
-                <span>General</span>
-              </TabsTrigger>
               <TabsTrigger value="security" className="flex items-center gap-2">
                 <Shield className="h-4 w-4" />
                 <span>Security</span>
@@ -123,48 +119,16 @@ export function Settings() {
               </TabsTrigger>
             </TabsList>
 
-            <TabsContent value="general" className="space-y-6">
-              <div className="space-y-4">
-                <div className="flex items-center justify-between border-b pb-3">
-                  <div>
-                    <h3 className="font-medium">Dark Mode</h3>
-                    <p className="text-sm text-muted-foreground">
-                      Toggle between light and dark theme
-                    </p>
-                  </div>
-                  <Switch />
-                </div>
-                <div className="flex items-center justify-between border-b pb-3">
-                  <div>
-                    <h3 className="font-medium">Auto Lock</h3>
-                    <p className="text-sm text-muted-foreground">
-                      Automatically lock the vault after inactivity
-                    </p>
-                  </div>
-                  <Switch />
-                </div>
-              </div>
-            </TabsContent>
-
             <TabsContent value="security" className="space-y-6">
               <div className="space-y-4">
-                <div className="flex items-center justify-between border-b pb-3">
-                  <div>
-                    <h3 className="font-medium">Biometric Lock</h3>
-                    <p className="text-sm text-muted-foreground">
-                      Use fingerprint or face ID to unlock the vault
-                    </p>
-                  </div>
-                  <Switch />
-                </div>
                 <div className="flex items-center justify-between border-b pb-3">
                   <div>
                     <h3 className="font-medium">Lock on Idle</h3>
                     <p className="text-sm text-muted-foreground">
                       Lock the vault when your device is idle
                     </p>
                   </div>
-                  <Switch />
+                  <Switch disabled />
                 </div>
               </div>
             </TabsContent>