cleanup of ui elements (#1999)

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

Author: ahmetskilinc

apps/mail/components/labels/label-dialog.tsx

@@ -132,18 +132,21 @@ export function LabelDialog({
               <div className="space-y-2">
                 <Label>{m['common.labels.color']()}</Label>
                 <div className="w-full">
-                  <div className="flex flex-wrap gap-2 mt-2">
+                  <div className="relative mt-2 flex flex-wrap gap-2">
                     {LABEL_COLORS.map((color) => (
                       <button
-                        key={color.backgroundColor}
                         type="button"
+                        key={color.backgroundColor}
                         className={`h-10 w-10 rounded-[4px] border-[0.5px] border-white/10 ${
                           formColor?.backgroundColor.toString() === color.backgroundColor &&
                           formColor.textColor.toString() === color.textColor
                             ? 'scale-110 ring-2 ring-blue-500 ring-offset-1'
                             : 'hover:scale-105'
                         }`}
-                        style={{ backgroundColor: color.backgroundColor }}
+                        style={{
+                          backgroundColor: color.backgroundColor,
+                          filter: 'brightness(1.4)',
+                        }}
                         onClick={() =>
                           form.setValue('color', {
                             backgroundColor: color.backgroundColor,

apps/mail/components/ui/button.tsx

@@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 aria-busy:cursor-progress cursor-pointer',
+  {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -44,11 +45,23 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, isLoading = false, loadingText, children, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isLoading = false,
+      loadingText,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot.Slot : 'button';
     return (
-      <Comp 
-        className={cn(buttonVariants({ variant, size, className }))}
+      <Comp
+        className={cn(buttonVariants({ variant, size }), className)}
         disabled={isLoading || props.disabled}
         aria-busy={isLoading}
         aria-disabled={props.disabled}
@@ -57,10 +70,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {isLoading ? (
           <>
-            <span className="inline-block animate-spin mr-2">↻</span>
+            <span className="mr-2 inline-block animate-spin">↻</span>
             {loadingText || children}
           </>
-        ) : children}
+        ) : (
+          children
+        )}
       </Comp>
     );
   },

apps/mail/components/ui/nav-user.tsx

@@ -391,7 +391,7 @@ export function NavUser() {
                   }`}
                 >
                   <div className="relative">
-                    <Avatar className="size-6 rounded-[5px]">
+                    <Avatar className="size-7 rounded-[5px]">
                       <AvatarImage
                         className="rounded-[5px]"
                         src={activeAccount.picture || undefined}
@@ -509,15 +509,15 @@ export function NavUser() {
 
               {isPro ? (
                 <AddConnectionDialog>
-                  <button className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-[5px] border border-dashed dark:bg-[#262626] dark:text-[#929292]">
+                  <Button className="hover:bg-offsetLight/80 dark:hover:bg-offsetDark/80 flex h-7 w-7 cursor-pointer items-center justify-center rounded-[5px] border border-dashed bg-transparent px-0 text-black dark:bg-[#262626] dark:text-[#929292]">
                     <Plus className="size-4" />
-                  </button>
+                  </Button>
                 </AddConnectionDialog>
               ) : (
                 <>
                   <Button
                     onClick={() => setPricingDialog('true')}
-                    className="hover:bg-offsetLight/80 flex h-7 w-7 cursor-pointer items-center justify-center rounded-[5px] border border-dashed bg-transparent px-0 text-black dark:bg-[#262626] dark:text-[#929292]"
+                    className="hover:bg-offsetLight/80 dark:hover:bg-offsetDark/80 flex h-7 w-7 cursor-pointer items-center justify-center rounded-[5px] border border-dashed bg-transparent px-0 text-black dark:bg-[#262626] dark:text-[#929292]"
                   >
                     <Plus className="size-4" />
                   </Button>