ui enhancements

components/social/post-actions-footer.tsx

@@ -16,13 +16,24 @@
  */
 
 import { useState } from "react";
-import { FolderPlus, Heart, MessageCircle, Repeat2 } from "lucide-react";
+import {
+  HiOutlineArrowPath,
+  HiOutlineChatBubbleOvalLeft,
+  HiOutlineFolderPlus,
+  HiOutlineHeart,
+} from "react-icons/hi2";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
 
+// All four icons come from the Heroicons v2 outline family (react-icons
+// `hi2` namespace), so they share one design language — uniform stroke
+// weight, matching corner radius, matching optical sizing. No more
+// Lucide cross-icon visual drift.
+const ICON_CLASS = "size-[1.375rem]";
+
 export function PostActionsFooter({ postID }: { postID: string }) {
   const { requireAuth } = useAuthGate();
   const isMobile = useMediaQuery("(max-width: 767px)");
@@ -44,7 +55,7 @@ export function PostActionsFooter({ postID }: { postID: string }) {
                 toast("Likes are coming soon", { duration: 2000 });
               })
             }
-            icon={<Heart className="size-5" />}
+            icon={<HiOutlineHeart className={ICON_CLASS} />}
           />
           <ActionButton
             label="Comment"
@@ -53,7 +64,7 @@ export function PostActionsFooter({ postID }: { postID: string }) {
                 toast("Comments are coming soon", { duration: 2000 });
               })
             }
-            icon={<MessageCircle className="size-5" />}
+            icon={<HiOutlineChatBubbleOvalLeft className={ICON_CLASS} />}
           />
           <ActionButton
             label="Reshare"
@@ -62,13 +73,13 @@ export function PostActionsFooter({ postID }: { postID: string }) {
                 toast("Resharing is coming soon", { duration: 2000 });
               })
             }
-            icon={<Repeat2 className="size-5" />}
+            icon={<HiOutlineArrowPath className={ICON_CLASS} />}
           />
         </div>
         <ActionButton
           label="Save to collection"
           onClick={() => withAuth(() => setCollectionsOpen(true))}
-          icon={<FolderPlus className="size-5" />}
+          icon={<HiOutlineFolderPlus className={ICON_CLASS} />}
         />
       </div>