fix: (website) improve button styles with shadow and border adjustments

Author: pheralb

website/app/components/header.tsx

@@ -26,7 +26,7 @@ const svgIconSize = {
 
 const linkClasses = buttonVariants({
   variant: "outline",
-  className: "rounded-3xl w-auto group",
+  className: "rounded-3xl w-auto group shadow-xs",
 });
 
 const arrowClasses = cn(

website/app/components/installCommand.tsx

@@ -74,7 +74,7 @@ const InstallCommand = (props: iInstallCommandProps) => {
       className={cn(
         buttonVariants({
           variant: "outline",
-          className: "cursor-default active:scale-100",
+          className: "cursor-default shadow-xs active:scale-100",
         }),
         "space-x-3 rounded-3xl text-zinc-600 select-all hover:bg-transparent dark:text-zinc-400 dark:hover:bg-transparent dark:hover:text-white",
         props.className,

website/app/ui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-red-500 text-zinc-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
         outline:
-          "border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+          "border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 hover:border-zinc-300 dark:hover:border-zinc-700",
         secondary:
           "bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
         ghost:
@@ -35,7 +35,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }