refactor(desktop): update button styles and settings modal dimensions

- Adjusted button size and styling for improved consistency across the application.
- Modified minimum height of the settings modal for better layout adaptability.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/settings/control.tsx

@@ -121,7 +121,7 @@ export const SettingActionItem = ({
 }) => (
   <div className={cn("relative mb-3 mt-4 flex items-center justify-between gap-4")}>
     <div className="text-sm font-medium">{label}</div>
-    <Button buttonClassName="text-xs absolute right-0" variant="outline" onClick={action}>
+    <Button variant="outline" size="sm" onClick={action}>
       {buttonText}
     </Button>
   </div>

apps/desktop/layer/renderer/src/modules/settings/modal/layout.tsx

@@ -117,7 +117,7 @@ export function SettingModalLayout(
               height: 800,
             }}
             maxHeight="90vh"
-            minHeight={600}
+            minHeight={400}
             minWidth={700}
             maxWidth="95vw"
             className="flex !select-none flex-col"

packages/internal/components/src/ui/button/variants.tsx

@@ -6,9 +6,10 @@ import { cva } from "class-variance-authority"
 
 export const styledButtonVariant = cva(
   [
-    "inline-flex cursor-button select-none items-center justify-center outline-offset-2 transition active:transition-none disabled:cursor-not-allowed",
-    "ring-accent/20 duration-200 disabled:ring-0",
+    "inline-flex cursor-button select-none items-center justify-center outline-offset-2 transition-colors active:transition-none disabled:cursor-not-allowed",
+    "duration-200 disabled:ring-0",
     "align-middle",
+    "focus:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2",
   ],
   {
     compoundVariants: [
@@ -36,9 +37,9 @@ export const styledButtonVariant = cva(
     ],
     variants: {
       size: {
-        sm: "px-3 py-1 rounded-md text-xs",
-        default: "px-4 py-1.5 rounded-lg text-sm",
-        lg: "px-5 py-2 rounded-lg text-base",
+        sm: "px-3 py-1 rounded-md text-sm font-medium",
+        default: "px-4 py-1.5 rounded-lg text-sm font-semibold",
+        lg: "px-5 py-2 rounded-lg text-base font-semibold",
       },
 
       status: {
@@ -48,27 +49,28 @@ export const styledButtonVariant = cva(
         primary: cn(
           "bg-accent",
           "hover:contrast-[1.10] hover:shadow-md hover:shadow-accent/20 active:contrast-125 active:shadow-none",
-          "font-semibold",
           "disabled:bg-theme-disabled disabled:dark:text-zinc-50 disabled:shadow-none",
           "text-zinc-100",
-          "focus:border-accent/80 focus:outline-none focus:ring-2",
-          "transition-all duration-300",
+          "focus-visible:ring-accent/30",
+          "transition-all duration-200",
         ),
 
         outline: cn(
-          "bg-theme-background font-semibold transition-colors duration-200",
+          "bg-theme-background transition-colors duration-200",
           "border border-border hover:border-accent/50 hover:bg-zinc-50/80 dark:bg-neutral-900/30 dark:hover:bg-neutral-900/80",
-          "focus:border-accent/80 focus:ring-1 focus:ring-accent/30",
+          "focus-visible:ring-accent/30",
           "hover:shadow-sm",
         ),
         text: cn(
-          "font-semibold text-accent",
+          "text-accent",
           "hover:contrast-[1.10] active:contrast-125 hover:bg-accent/10",
-          tw`focus:text-accent focus:outline-none p-0 inline align-baseline`,
+          "focus-visible:ring-accent/30",
+          "p-0 inline align-baseline",
         ),
         ghost: cn(
-          "px-2 font-semibold",
+          "px-2",
           "hover:bg-material-ultra-thick",
+          "focus-visible:ring-accent/30",
           "transition-all duration-200",
         ),
       },