6529-Collections · ragnep · Dec 10, 2025 · Dec 9, 2025 · Dec 10, 2025 · Dec 10, 2025
diff --git a/__tests__/components/memes/drops/MemesLeaderboardDropCard.test.tsx b/__tests__/components/memes/drops/MemesLeaderboardDropCard.test.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import MemesLeaderboardDropCard from '@/components/memes/drops/MemesLeaderboardDropCard';
 
 test.each([
-  [1, 'desktop-hover:hover:tw-border-[#fbbf24]/40'],
-  [2, 'desktop-hover:hover:tw-border-[#94a3b8]/40'],
-  [3, 'desktop-hover:hover:tw-border-[#CD7F32]/40'],
+  [1, 'desktop-hover:hover:tw-border-yellow-500/20'],
+  [2, 'desktop-hover:hover:tw-border-iron-400/25'],
+  [3, 'desktop-hover:hover:tw-border-amber-600/20'],
   [4, 'desktop-hover:hover:tw-border-iron-700'],
 ])('applies border class for rank %i', (rank, expected) => {
   const drop = { rank } as any;

diff --git a/__tests__/components/waves/drop/SingleWaveDropTraits.test.tsx b/__tests__/components/waves/drop/SingleWaveDropTraits.test.tsx
@@ -519,7 +519,7 @@
       // Find the metadata item container by looking for the specific class pattern
       const { container } = render(<SingleWaveDropTraits drop={drop} />);
       const metadataItems = container.querySelectorAll(
-        ".tw-px-2.tw-py-1.tw-rounded-md.tw-bg-iron-800"
+        ".tw-px-3.tw-py-1\\.5.tw-rounded-md.tw-bg-iron-900"
       );
       expect(metadataItems.length).toBeGreaterThan(0);
 

diff --git a/__tests__/components/waves/leaderboard/header/WaveleaderboardSort.test.tsx b/__tests__/components/waves/leaderboard/header/WaveleaderboardSort.test.tsx
@@ -21,7 +21,7 @@ describe('WaveleaderboardSort', () => {
     );
 
     const current = screen.getByText('Current Vote');
-    expect(current.className).toContain('tw-bg-iron-800');
+    expect(current.className).toContain('tw-bg-white/10');
 
     await user.click(screen.getByText('Projected Vote'));
     expect(onSortChange).toHaveBeenCalledWith(

diff --git a/components/brain/my-stream/votes/MyStreamWaveMyVote.tsx b/components/brain/my-stream/votes/MyStreamWaveMyVote.tsx
@@ -7,10 +7,12 @@ import UserCICAndLevel, {
   UserCICAndLevelSize,
 } from "@/components/user/utils/UserCICAndLevel";
 import { SingleWaveDropPosition } from "@/components/waves/drop/SingleWaveDropPosition";
-import { cicToType } from "@/helpers/Helpers";
+import { cicToType, formatNumberWithCommas } from "@/helpers/Helpers";
 import Link from "next/link";
 import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileTooltipWrapper";
 import { ImageScale } from "@/helpers/image.helpers";
+import { Tooltip } from "react-tooltip";
+import Image from "next/image";
 
 interface MyStreamWaveMyVoteProps {
   readonly drop: ExtendedDrop;
@@ -100,13 +102,11 @@ const MyStreamWaveMyVote: React.FC<MyStreamWaveMyVoteProps> = ({
         </div>
 
         <div className="tw-flex tw-flex-col tw-flex-1 tw-min-w-0">
-          <div className="tw-flex tw-flex-col @md:tw-flex-row @sm:tw-flex-col tw-gap-y-2 tw-gap-x-3">
-            <div>
-              {drop.rank && <SingleWaveDropPosition rank={drop.rank} />}
-            </div>
+          <div className="tw-flex tw-items-center tw-justify-between tw-gap-x-3">
             <h3 className="tw-text-base tw-font-semibold tw-text-iron-50 tw-mb-0">
               {drop.title}
             </h3>
+            {drop.rank && <SingleWaveDropPosition rank={drop.rank} />}
           </div>
           <div className="tw-flex tw-items-center tw-gap-2 tw-mt-4">
             <div className="tw-size-6 tw-relative tw-flex-shrink-0 tw-rounded-md tw-overflow-hidden tw-ring-1 tw-ring-white/10 tw-bg-iron-800">
@@ -144,24 +144,54 @@ const MyStreamWaveMyVote: React.FC<MyStreamWaveMyVoteProps> = ({
               <div onClick={(e) => e.stopPropagation()}>
                 <MyStreamWaveMyVoteVotes drop={drop} />
               </div>
-              <div className="tw-flex tw-items-center tw-gap-1.5">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  strokeWidth="2"
-                  stroke="currentColor"
-                  className="tw-size-4 tw-text-iron-400 tw-flex-shrink-0"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
-                  />
-                </svg>
-                <span className="tw-text-sm tw-font-medium tw-text-iron-200">
-                  {drop.raters_count}
+              <div className="tw-flex tw-items-center tw-gap-2">
+                <div className="tw-flex tw-items-center -tw-space-x-2">
+                  {drop.top_raters?.slice(0, 3).map((voter) => (
+                    <React.Fragment key={voter.profile.handle}>
+                      <Link
+                        href={`/${voter.profile.handle}`}
+                        onClick={(e) => e.stopPropagation()}
+                        data-tooltip-id={`my-vote-voter-${drop.id}-${voter.profile.handle}`}
+                      >
+                        {voter.profile.pfp ? (
+                          <Image
+                            className="tw-w-6 tw-h-6 tw-rounded-md tw-border-2 tw-border-solid tw-border-[#111] tw-bg-iron-800 tw-object-contain"
+                            src={voter.profile.pfp}
+                            alt="Recent voter"
+                            width={24}
+                            height={24}
+                          />
+                        ) : (
+                          <div className="tw-w-6 tw-h-6 tw-rounded-md tw-border-2 tw-border-solid tw-border-[#111] tw-bg-iron-800" />
+                        )}
+                      </Link>
+                      <Tooltip
+                        id={`my-vote-voter-${drop.id}-${voter.profile.handle}`}
+                        place="top"
+                        offset={8}
+                        opacity={1}
+                        style={{
+                          padding: "4px 8px",
+                          background: "#37373E",
+                          color: "white",
+                          fontSize: "13px",
+                          fontWeight: 500,
+                          borderRadius: "6px",
+                          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+                          zIndex: 99999,
+                          pointerEvents: "none",
+                        }}
+                      >
+                        {voter.profile.handle} - {formatNumberWithCommas(voter.rating)}
+                      </Tooltip>
+                    </React.Fragment>
+                  ))}
+                </div>
+                <span className="tw-text-white tw-font-bold tw-text-sm">
+                  {formatNumberWithCommas(drop.raters_count)}{" "}
+                  <span className="tw-text-iron-500 tw-font-normal">
+                    {drop.raters_count === 1 ? "voter" : "voters"}
+                  </span>
                 </span>
               </div>
             </div>

diff --git a/components/brain/my-stream/votes/MyStreamWaveMyVoteVotes.tsx b/components/brain/my-stream/votes/MyStreamWaveMyVoteVotes.tsx
@@ -14,7 +14,7 @@ const MyStreamWaveMyVoteVotes: React.FC<MyStreamWaveMyVoteVotesProps> = ({
   return (
     <div className="tw-flex tw-items-center tw-gap-x-1.5">
       <span
-        className={`tw-text-sm tw-font-semibold ${
+        className={`tw-text-sm tw-font-bold tw-font-mono tw-tracking-tight ${
           isPositive ? "tw-text-emerald-500" : "tw-text-rose-500"
         }`}
       >

diff --git a/components/drops/view/utils/DropVoteProgressing.tsx b/components/drops/view/utils/DropVoteProgressing.tsx
@@ -34,9 +34,9 @@ export default function DropVoteProgressing({
     arrowColor = "tw-text-iron-600";
   } else {
     color = isPositiveProgressing
-      ? "tw-text-emerald-400 tw-bg-emerald-900/40 tw-px-1.5 tw-py-0.5 tw-rounded-md"
-      : "tw-text-rose-400 tw-bg-rose-900/40 tw-px-1.5 tw-py-0.5 tw-rounded-md";
-    arrowColor = isPositiveProgressing ? "tw-text-emerald-400" : "tw-text-rose-400";
+      ? "tw-text-emerald-400 tw-bg-emerald-500/10 tw-px-2 tw-py-0.5 tw-rounded tw-border tw-border-solid tw-border-emerald-500/20 tw-font-mono"
+      : "tw-text-rose-400 tw-bg-rose-500/10 tw-px-2 tw-py-0.5 tw-rounded tw-border tw-border-solid tw-border-rose-500/20 tw-font-mono";
+    arrowColor = "tw-text-iron-600";
   }
 
   return (
@@ -52,7 +52,7 @@ export default function DropVoteProgressing({
           icon={faArrowRight}
           className={`tw-flex-shrink-0 tw-size-2.5 ${arrowColor}`}
         />
-        <span className={`tw-text-xs tw-font-medium ${color}`}>{formatNumberWithCommas(projected)}</span>
+        <span className={`${subtle ? 'tw-text-xs' : 'tw-text-sm'} tw-font-medium tw-tracking-tight ${color}`}>{formatNumberWithCommas(projected)}</span>
       </span>
       <Tooltip
         id={`drop-vote-progress-${current}-${projected}`}

diff --git a/components/memes/drops/MemeDropTrait.tsx b/components/memes/drops/MemeDropTrait.tsx
@@ -7,6 +7,7 @@ import useIsMobileDevice from "@/hooks/isMobileDevice";
 interface MemeDropTraitProps {
   readonly label: string;
   readonly value: string;
+  readonly dropId?: string;
 }
 
 const convertValue = (value: string) => {
@@ -24,33 +25,42 @@ const convertValue = (value: string) => {
   return value;
 };
 
-const MemeDropTrait: React.FC<MemeDropTraitProps> = ({ label, value }) => {
+const MemeDropTrait: React.FC<MemeDropTraitProps> = ({ label, value, dropId }) => {
   const isMobile = useIsMobileDevice();
   const convertedValue = convertValue(value);
+  const tooltipId = dropId ? `meme-drop-trait-${dropId}-${label}` : `meme-drop-trait-${label}`;
 
   if (label === FIELD_TO_LABEL_MAP.pointsLoki) {
     console.log(value, typeof value);
   }
 
   return (
-    <div className="tw-px-2 tw-py-1 tw-rounded-md tw-bg-iron-800 tw-flex tw-flex-col tw-gap-y-1.5">
-      <span className="tw-text-iron-400 tw-text-xs tw-mr-1.5 tw-font-normal">
-        {label}:
+    <div className="tw-bg-iron-900 tw-border tw-border-solid tw-border-white/10 tw-rounded-md tw-px-3 tw-py-1.5 tw-flex tw-flex-col">
+      <span className="tw-block tw-text-[9px] tw-uppercase tw-tracking-wider tw-text-iron-600 tw-font-bold tw-mb-0.5">
+        {label}
       </span>
       <>
-        <span 
-          className="tw-text-iron-50 tw-text-sm tw-font-medium tw-truncate"
-          data-tooltip-id={`meme-drop-trait-${label}`}>
+        <span
+          className="tw-text-xs tw-text-iron-400 tw-truncate"
+          data-tooltip-id={tooltipId}>
           {convertedValue}
         </span>
         {!isMobile && (
           <Tooltip
-            id={`meme-drop-trait-${label}`}
+            id={tooltipId}
             place="top"
+            offset={8}
+            opacity={1}
             style={{
-              backgroundColor: "#1F2937",
-              color: "white",
               padding: "4px 8px",
+              background: "#37373E",
+              color: "white",
+              fontSize: "13px",
+              fontWeight: 500,
+              borderRadius: "6px",
+              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+              zIndex: 99999,
+              pointerEvents: "none",
             }}>
             <span className="tw-text-xs">{convertedValue}</span>
           </Tooltip>

diff --git a/components/memes/drops/MemeDropTraits.tsx b/components/memes/drops/MemeDropTraits.tsx
@@ -38,7 +38,7 @@ const MemeDropTraits: React.FC<MemeDropTraitsProps> = ({ drop }) => {
   };
 
   return (
-    <div className="lg:tw-flex tw-flex-col tw-gap-2 tw-hidden tw-p-4">
+    <div className="lg:tw-flex tw-flex-col tw-gap-2 tw-hidden">
       <div className="tw-grid tw-grid-cols-2 sm:tw-grid-cols-4 tw-gap-2">
         {traits.slice(0, 2).map((trait) => (
           <MemeDropTrait
@@ -49,6 +49,7 @@ const MemeDropTraits: React.FC<MemeDropTraitsProps> = ({ drop }) => {
               ]
             }
             value={trait.data_value ?? ""}
+            dropId={drop.id}
           />
         ))}
 
@@ -63,18 +64,19 @@ const MemeDropTraits: React.FC<MemeDropTraitsProps> = ({ drop }) => {
                   ]
                 }
                 value={trait.data_value ?? ""}
+                dropId={drop.id}
               />
             ))}
             <button
               onClick={handleShowLess}
-              className="tw-text-xs tw-text-primary-400 desktop-hover:hover:tw-text-primary-300 tw-transition tw-duration-300 tw-ease-out tw-font-semibold tw-bg-transparent tw-border-0 tw-text-left">
+              className="tw-text-primary-400 tw-text-xs tw-text-left tw-font-medium desktop-hover:hover:tw-text-primary-300 tw-transition-colors tw-whitespace-nowrap tw-self-end tw-pb-1.5 tw-bg-transparent tw-border-0">
               Show less
             </button>
           </>
         ) : (
           <button
             onClick={handleShowAll}
-            className="tw-text-xs tw-text-primary-400 desktop-hover:hover:tw-text-primary-300 tw-transition tw-duration-300 tw-ease-out tw-font-semibold tw-bg-transparent tw-border-0 tw-text-left">
+            className="tw-text-primary-400 tw-text-xs tw-text-left tw-font-medium desktop-hover:hover:tw-text-primary-300 tw-transition-colors tw-whitespace-nowrap tw-self-end tw-pb-1.5 tw-bg-transparent tw-border-0">
             Show all
           </button>
         )}

diff --git a/components/memes/drops/MemeWinnerDrop.tsx b/components/memes/drops/MemeWinnerDrop.tsx
@@ -50,7 +50,7 @@ export default function MemeWinnerDrop({
 
   // First place shadow class from DefaultWaveWinnerDrop
   const firstPlaceShadow =
-    "tw-shadow-[inset_1px_0_0_#fbbf24,inset_0_1px_0_rgba(251,191,36,0.2),inset_-1px_0_0_rgba(251,191,36,0.2),inset_0_-1px_0_rgba(251,191,36,0.2)]";
+    "tw-shadow-[inset_1px_0_0_rgba(251,191,36,0.5),inset_0_1px_0_rgba(251,191,36,0.2),inset_-1px_0_0_rgba(251,191,36,0.2),inset_0_-1px_0_rgba(251,191,36,0.2)]";
 
   return (
     <div className="tw-w-full">