💄 feat: Improve UI components with enhanced styling and new badge support

web/src/components/proxys.tsx

@@ -11,7 +11,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import {
-  Dialog,
+  Dialog, DialogClose,
   DialogContent,
   DialogFooter,
   DialogHeader,
@@ -32,6 +32,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import {Badge} from "@/components/ui/badge";
 
 export interface ProxysProps {
   enableSelect?: boolean;
@@ -177,7 +178,7 @@ export default function Proxys({
             key={proxy.name}
             className={cn("relative hover:shadow-lg", {
               "cursor-pointer": enableSelect,
-              "border border-primary":
+              "border-2 border-primary":
                 enableSelect && proxy.name === innerProxyName,
             })}
             onClick={() => {
@@ -191,30 +192,32 @@ export default function Proxys({
             {proxyName && proxy.name === proxyName && (
               <BorderBeam size={100} duration={12} delay={9} />
             )}
-            <CardHeader className="p-2 px-3">
-              <CardTitle className="text-xl font-semibold">
+            <CardHeader className="p-3">
+              <CardTitle className="font-semibold">
                 {proxy.name}
               </CardTitle>
             </CardHeader>
             <CardContent className="p-0 px-3">
               <div className="flex items-baseline space-x-2">
-                <p className="text-lg text-gray-700">
+                <Badge variant="outline">
                   {proxy.type.toUpperCase()}
-                </p>
+                </Badge>
                 <p className="text-sm text-gray-400">{`${proxy.server}:${proxy.port}`}</p>
               </div>
             </CardContent>
             <CardFooter className="flex justify-end space-x-2 p-1">
               <Button
-                size="xs"
+                size="icon"
                 variant="ghost"
+                className="h-6 w-6"
                 onClick={() => handleOpenDialog(proxy)}
               >
                 <Edit2 className="h-3 w-3" />
               </Button>
               <Button
-                size="xs"
+                size="icon"
                 variant="ghost"
+                className="h-6 w-6"
                 onClick={() => handleDeleteProxy(proxy)}
               >
                 <Trash2 className="h-3 w-3 text-red-600" />
@@ -224,7 +227,12 @@ export default function Proxys({
         ))}
       </div>
       {enableSelect && (
-        <div className="absolute bottom-0 flex w-full items-center justify-end space-x-4">
+        <div className="absolute bottom-0 flex w-full items-center justify-end gap-2 flex-col-reverse sm:flex-row">
+          <DialogClose asChild>
+            <Button className="w-full md:w-auto" variant="outline" type="button">
+              Cancel
+            </Button>
+          </DialogClose>
           <Button
             className="w-full md:w-auto"
             disabled={isToggleProxyMutating}

web/src/components/settings-dialog.tsx

@@ -47,7 +47,7 @@ export const SettingsDialog: React.FC = () => {
           defaultValue="general"
           className="mt-3 flex h-full flex-col overflow-hidden"
         >
-          <TabsList className="justify-start overflow-auto">
+          <TabsList className="justify-start overflow-auto min-h-9">
             <TabsTrigger value="general">General</TabsTrigger>
             <TabsTrigger value="statistics">Statistics</TabsTrigger>
             <TabsTrigger value="proxys">Proxys</TabsTrigger>

web/src/components/settings-form.tsx

@@ -1,4 +1,4 @@
-import {Bell, Copy} from "lucide-react";
+import { Bell, Copy } from "lucide-react";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -13,7 +13,8 @@ import { Button } from "@/components/ui/button";
 import React, { type FormEvent } from "react";
 import { useSettings } from "@/hooks/use-settings";
 import { useTelegramAccount } from "@/hooks/use-telegram-account";
-import {useCopyToClipboard} from "@/hooks/use-copy-to-clipboard";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import { DialogClose, DialogFooter } from "@/components/ui/dialog";
 
 export default function SettingsForm() {
   const { settings, setSetting, updateSettings } = useSettings();
@@ -46,7 +47,7 @@ export default function SettingsForm() {
         <div className="w-full rounded-md border p-4 shadow">
           <p className="mb-1 text-xs text-muted-foreground">Your root path</p>
           <div className="flex items-center justify-between space-x-1">
-            <p className="bg-gray-50 rounded-md p-2 text-xs text-muted-foreground dark:bg-gray-700">
+            <p className="rounded-md bg-gray-50 p-2 text-xs text-muted-foreground dark:bg-gray-700">
               {account?.rootPath}
             </p>
             <Button
@@ -154,9 +155,16 @@ export default function SettingsForm() {
           </div>
         </div>
       </div>
-      <div className="mt-2 flex flex-1 justify-end">
-        <Button className="w-full md:w-auto" type="submit">Submit</Button>
-      </div>
+      <DialogFooter className="mt-2 flex-1 gap-2">
+        <DialogClose asChild>
+          <Button className="w-full md:w-auto" variant="outline" type="button">
+            Cancel
+          </Button>
+        </DialogClose>
+        <Button className="w-full md:w-auto" type="submit">
+          Submit
+        </Button>
+      </DialogFooter>
     </form>
   );
 }