fix more icons

components/comments/comment-actions.tsx

@@ -51,15 +51,15 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
         />
       ) : (
         <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={() => setIsReplying(!isReplying)} className="h-8 px-2">
-            <ReplyIcon className="mr-1 h-3.5 w-3.5" />
+          <Button variant="outline" size="sm" onClick={() => setIsReplying(!isReplying)}>
+            <ReplyIcon />
             Reply
           </Button>
 
           {session.user.id === comment.user.id && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm" className="h-8 px-2 text-xs">
+                <Button variant="outline" size="sm">
                   <EllipsisIcon />
                   <span className="sr-only">Actions Menu</span>
                 </Button>

components/comments/comment-form.tsx

@@ -171,7 +171,7 @@ const CommentForm = ({
               <Button type="submit" disabled={isPending || !content.trim()}>
                 {isPending ? (
                   <>
-                    <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
+                    <Loader2Icon className="animate-spin" />
                     {isEditing ? "Updating..." : "Posting..."}
                   </>
                 ) : isEditing ? (

components/contact-form.tsx

@@ -105,11 +105,13 @@ const ContactForm = () => {
           <Button type="submit" size="lg" disabled={pending}>
             {pending ? (
               <>
-                <Loader2Icon className="animate-spin" /> Sending...
+                <Loader2Icon className="animate-spin" />
+                Sending...
               </>
             ) : (
               <>
-                <SendIcon /> Send
+                <SendIcon />
+                Send
               </>
             )}
           </Button>

components/image-diff.tsx

@@ -118,7 +118,7 @@ const ImageDiff = ({ children, className }: { children: React.ReactElement[]; cl
         onMouseDown={handleMouseDown}
         onTouchStart={handleMouseDown}
         onTouchEnd={handleMouseUp}
-        className="bg-muted absolute top-1/2 left-[var(--slider-position)] flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize touch-none items-center justify-center rounded-full border-2 drop-shadow-md"
+        className="bg-muted absolute top-1/2 left-[var(--slider-position)] flex size-10 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize touch-none items-center justify-center rounded-full border-2 drop-shadow-md"
         aria-hidden="true"
       >
         <ChevronsLeftRightIcon className="text-foreground/70 size-6" />

components/layout/menu-item.tsx

@@ -31,7 +31,7 @@ const MenuItem = ({
         aria-label={text}
         data-current={current || undefined}
         className={cn(
-          "text-foreground/85 hover:border-ring data-current:border-primary/40! inline-flex items-center p-2.5 hover:border-b-[3px] hover:no-underline data-current:border-b-[3px]",
+          "text-foreground/85 hover:border-ring data-current:border-primary/40! inline-flex items-center hover:border-b-[3px] hover:no-underline data-current:border-b-[3px]",
           className
         )}
         {...rest}

components/layout/menu.tsx

@@ -44,7 +44,7 @@ const Menu = ({ className, ...rest }: React.ComponentProps<"div">) => {
         const isCurrent = item.href?.split("/")[1] === segment;
 
         return (
-          <div className="mt-[3px] inline-block last:-mr-2.5 max-sm:first:hidden" key={index}>
+          <div className="mt-[3px] inline-block last:-mr-2.5 max-sm:first:hidden [&_a,&_button]:p-2.5" key={index}>
             <MenuItem {...item} current={isCurrent} />
           </div>
         );

components/layout/theme-toggle.tsx

@@ -13,7 +13,7 @@ const ThemeToggle = ({ className, ...rest }: React.ComponentProps<"button">) =>
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       aria-label="Toggle theme"
       className={cn(
-        "hover:*:stroke-warning block cursor-pointer bg-transparent p-2.5 not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden",
+        "hover:*:stroke-warning block cursor-pointer bg-transparent not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden",
         className
       )}
       {...rest}