6529-Collections · ragnep · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026
diff --git a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
@@ -22,7 +22,7 @@ const MemesLeaderboardDropArtistInfo = ({
     <div className="tw-flex tw-gap-x-3">
       <WaveDropAuthorPfp drop={drop} />
       <div className="tw-flex tw-h-12 tw-flex-col tw-justify-between">
-        <div className="-tw-mt-0.5 tw-flex tw-flex-wrap tw-items-center tw-gap-x-2">
+        <div className="-tw-mt-0.5 tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
           {drop.author.handle ? (
             <UserProfileTooltipWrapper user={drop.author.handle}>
               <Link

diff --git a/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx b/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
@@ -21,7 +21,7 @@ export default function MemeDropArtistInfo({ drop }: MemeDropArtistInfoProps) {
     <div className="tw-flex tw-items-center tw-gap-x-3">
       <WaveDropAuthorPfp drop={drop} />
       <div className="tw-flex tw-flex-col tw-gap-y-1.5">
-        <div className="tw-flex tw-items-center tw-gap-x-2">
+        <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
           {!!drop.author.level && (
             <UserCICAndLevel
               level={drop.author.level}

diff --git a/components/user/utils/UserCICAndLevel.tsx b/components/user/utils/UserCICAndLevel.tsx
@@ -6,16 +6,33 @@ export enum UserCICAndLevelSize {
 }
 
 const LEVEL_COLORS = [
-  { minLevel: 80, classes: "tw-text-[#55B075] tw-border-[#55B075]" },
-  { minLevel: 60, classes: "tw-text-[#AABE68] tw-border-[#AABE68]" },
-  { minLevel: 40, classes: "tw-text-[#DAC660] tw-border-[#DAC660]" },
-  { minLevel: 20, classes: "tw-text-[#DAAC60] tw-border-[#DAAC60]" },
-  { minLevel: 0, classes: "tw-text-[#DA8C60] tw-border-[#DA8C60]" },
+  {
+    minLevel: 80,
+    classes: "tw-text-[#55B075] tw-border-[#55B075] tw-bg-[#55B075]/10",
+  },
+  {
+    minLevel: 60,
+    classes: "tw-text-[#AABE68] tw-border-[#AABE68] tw-bg-[#AABE68]/10",
+  },
+  {
+    minLevel: 40,
+    classes: "tw-text-[#DAC660] tw-border-[#DAC660] tw-bg-[#DAC660]/10",
+  },
+  {
+    minLevel: 20,
+    classes: "tw-text-[#DAAC60] tw-border-[#DAAC60] tw-bg-[#DAAC60]/10",
+  },
+  {
+    minLevel: 0,
+    classes: "tw-text-[#DA8C60] tw-border-[#DA8C60] tw-bg-[#DA8C60]/10",
+  },
 ];
 
 const getLevelColorClasses = (level: number): string => {
   const found = LEVEL_COLORS.find((l) => l.minLevel <= level);
-  return found ? found.classes : "tw-text-[#DA8C60] tw-border-[#DA8C60]";
+  return found
+    ? found.classes
+    : "tw-text-[#DA8C60] tw-border-[#DA8C60] tw-bg-[#DA8C60]/10";
 };
 
 export default function UserCICAndLevel({
@@ -28,7 +45,7 @@ export default function UserCICAndLevel({
   readonly size?: UserCICAndLevelSize | undefined;
 }) {
   const LEVEL_SIZE_CLASSES: Record<UserCICAndLevelSize, string> = {
-    [UserCICAndLevelSize.SMALL]: "tw-h-5 tw-w-5 tw-text-[9px]",
+    [UserCICAndLevelSize.SMALL]: "tw-h-5 tw-w-5 tw-text-[8.5px]",
     [UserCICAndLevelSize.MEDIUM]: "tw-h-6 tw-w-6 tw-text-[0.65rem]",
     [UserCICAndLevelSize.LARGE]: "tw-h-8 tw-w-8 tw-text-[0.8rem]",
     [UserCICAndLevelSize.XLARGE]: "tw-h-10 tw-w-10 tw-text-[1rem]",
@@ -41,9 +58,11 @@ export default function UserCICAndLevel({
   return (
     <div className="tw-inline-flex">
       <div
-        className={`${LEVEL_SIZE_CLASSES[size]} tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-bg-iron-800 tw-font-bold tw-leading-none ${colorClasses}`}
+        className={`${LEVEL_SIZE_CLASSES[size]} tw-relative tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-font-bold tw-leading-none ${colorClasses}`}
       >
-        <span>{level}</span>
+        <span className="tw-absolute tw-left-1/2 tw-top-1/2 tw-inline-flex -tw-translate-x-1/2 -tw-translate-y-1/2 tw-items-center tw-justify-center tw-leading-none">
+          {level}
+        </span>
       </div>
     </div>
   );

diff --git a/components/user/utils/user-cic-type/UserCICTypeIconWrapper.tsx b/components/user/utils/user-cic-type/UserCICTypeIconWrapper.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import type { ApiIdentity } from "@/generated/models/ApiIdentity";
-import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { Tooltip } from "react-tooltip";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import UserCICTypeIconTooltip from "./tooltip/UserCICTypeIconTooltip";
 import UserCICTypeIcon from "./UserCICTypeIcon";
 
@@ -12,33 +12,28 @@ export default function UserCICTypeIconWrapper({
 }: {
   readonly profile: ApiIdentity;
 }) {
-  const tooltipId = `user-cic-type-tooltip-${profile.id}`;
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  const tooltipId = `user-cic-type-tooltip-${profile.id ?? "unknown"}`;
+  const canRenderTooltip = typeof document !== "undefined";
 
   return (
     <>
       <div data-tooltip-id={tooltipId} className="tw-cursor-pointer">
         <UserCICTypeIcon cic={profile.cic} />
       </div>
 
-      {mounted &&
+      {canRenderTooltip &&
         createPortal(
           <Tooltip
             id={tooltipId}
             clickable={true}
             place="right"
+            positionStrategy="fixed"
             opacity={1}
-            border="1px solid #333"
             style={{
-              backgroundColor: "#26272B",
-              borderRadius: "8px",
+              ...TOOLTIP_STYLES,
               padding: "0",
               maxWidth: "360px",
-              zIndex: 9999,
+              pointerEvents: "auto",
             }}
           >
             <UserCICTypeIconTooltip profile={profile} />

diff --git a/components/waves/drops/ArtistActivityBadge.tsx b/components/waves/drops/ArtistActivityBadge.tsx
@@ -4,30 +4,23 @@ import React, { useId } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPalette, faTrophy } from "@fortawesome/free-solid-svg-icons";
 import { Tooltip } from "react-tooltip";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import useIsMobileDevice from "@/hooks/isMobileDevice";
 import useDeviceInfo from "@/hooks/useDeviceInfo";
 import type { ArtistPreviewTab } from "@/hooks/useArtistPreviewModal";
 
-const TOOLTIP_STYLES = {
-  backgroundColor: "#1F2937",
-  color: "white",
-  padding: "6px 12px",
-  fontSize: "12px",
-  zIndex: 50,
-  boxShadow: "0 4px 16px 0 rgba(0,0,0,0.30), 0 2px 8px 0 rgba(55,55,62,0.25)",
-} as const;
-
 const PALETTE_BUTTON_CLASS =
-  "tw-relative tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded-md tw-border tw-border-solid tw-border-blue-400/40 tw-bg-gradient-to-br tw-from-blue-800 tw-to-blue-900 tw-text-blue-100/90 tw-shadow-[0_1px_3px_rgba(0,0,0,0.45)] tw-transition-all tw-duration-200 tw-ease-out desktop-hover:hover:tw-from-blue-700 desktop-hover:hover:tw-to-blue-800 desktop-hover:hover:tw-scale-[1.05] focus:tw-ring-1 focus:tw-ring-blue-300/40";
+  "tw-relative tw-inline-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-blue-400/20 tw-bg-blue-500/10 tw-text-blue-400 tw-transition-colors tw-duration-200 tw-ease-out focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-blue-400/30 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-offset-iron-950 desktop-hover:hover:tw-border-blue-300/30 desktop-hover:hover:tw-bg-blue-500/15 desktop-hover:hover:tw-text-blue-300";
 
 const TROPHY_BUTTON_CLASS =
-  "tw-relative tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded-md tw-border tw-border-solid tw-border-amber-400/20 tw-bg-amber-400/10 tw-text-amber-300 tw-shadow-[inset_0_0_2px_rgba(255,255,255,0.08),0_1px_4px_rgba(0,0,0,0.25)] tw-transition-all tw-duration-200 desktop-hover:hover:tw-border-amber-400/30 desktop-hover:hover:tw-bg-amber-900/30 desktop-hover:hover:tw-scale-[1.05] desktop-hover:hover:tw-shadow-[inset_0_0_3px_rgba(255,255,255,0.12),0_2px_6px_rgba(0,0,0,0.3)] focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-amber-400/50 focus-visible:tw-ring-offset-2";
+  "tw-relative tw-inline-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-yellow-500/20 tw-bg-yellow-500/10 tw-text-[#ffc107] tw-transition-colors tw-duration-200 tw-ease-out focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-yellow-500/20 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-offset-iron-950 desktop-hover:hover:tw-border-yellow-400/30 desktop-hover:hover:tw-bg-yellow-500/15 desktop-hover:hover:tw-text-yellow-300";
 
-const PALETTE_ICON_CLASS = "tw-w-2.5 tw-h-2.5 tw-text-white tw-flex-shrink-0";
+const PALETTE_ICON_CLASS =
+  "tw-h-2.5 tw-w-2.5 tw-flex-shrink-0 tw-text-blue-400";
 const TROPHY_ICON_CLASS =
-  "tw-w-2.5 tw-h-2.5 tw-text-amber-400 tw-flex-shrink-0 desktop-hover:hover:tw-text-amber-300/90";
+  "tw-h-2.5 tw-w-2.5 tw-flex-shrink-0 tw-text-[#ffc107]";
 const BOTH_STATE_DOT_CLASS =
-  "tw-pointer-events-none tw-absolute -tw-top-1 -tw-right-1 tw-size-[9px] tw-rounded-full tw-bg-blue-500 tw-border tw-border-solid tw-border-iron-900 tw-shadow-[0_0_0_1px_rgba(0,0,0,0.25)]";
+  "tw-pointer-events-none tw-absolute -tw-right-1 -tw-top-1 tw-h-2 tw-w-2 tw-rounded-full tw-border tw-border-solid tw-border-black tw-bg-[#4285f4] tw-shadow-[0_0_4px_rgba(66,133,244,0.6)]";
 
 type BadgeState = "none" | "active" | "winners" | "both";
 
@@ -157,15 +150,15 @@ export const ArtistActivityBadge: React.FC<ArtistActivityBadgeProps> = ({
       {showTooltip && (
         <Tooltip
           id={uniqueTooltipId}
-          role="tooltip"
           place="top"
-          positionStrategy="absolute"
-          content={tooltipContent}
-          delayShow={300}
+          positionStrategy="fixed"
+          offset={8}
           opacity={1}
           style={TOOLTIP_STYLES}
           isOpen={isTooltipOpen}
-        />
+        >
+          <span className="tw-text-xs">{tooltipContent}</span>
+        </Tooltip>
       )}
     </>
   );

diff --git a/components/waves/drops/DropAuthorBadges.tsx b/components/waves/drops/DropAuthorBadges.tsx
@@ -54,7 +54,7 @@ interface DropAuthorBadgesProps {
     | undefined;
 }
 
-const DEFAULT_CONTAINER_CLASS = "tw-inline-flex tw-items-center tw-gap-x-1";
+const DEFAULT_CONTAINER_CLASS = "tw-inline-flex tw-items-center tw-gap-x-1.5";
 
 const toApiProfileMin = (profile: DropAuthorBadgesProfile): ApiProfileMin => {
   const primaryAddress =

diff --git a/components/waves/drops/WaveCreatorBadge.tsx b/components/waves/drops/WaveCreatorBadge.tsx
@@ -4,17 +4,9 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWater } from "@fortawesome/free-solid-svg-icons";
 import { Tooltip } from "react-tooltip";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import useIsMobileDevice from "@/hooks/isMobileDevice";
 
-const TOOLTIP_STYLES = {
-  backgroundColor: "#1F2937",
-  color: "white",
-  padding: "6px 12px",
-  fontSize: "12px",
-  zIndex: 50,
-  boxShadow: "0 4px 16px 0 rgba(0,0,0,0.30), 0 2px 8px 0 rgba(55,55,62,0.25)",
-} as const;
-
 interface WaveCreatorBadgeProps {
   readonly tooltipId?: string | undefined;
   readonly onBadgeClick?: (() => void) | undefined;
@@ -29,7 +21,7 @@
   const uniqueTooltipId = `${tooltipId}-${id}`;
   const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
 
-  const dataTooltipId = isMobile && uniqueTooltipId;
+  const dataTooltipId = !isMobile ? uniqueTooltipId : undefined;
 
   return (
     <>
@@ -43,28 +35,27 @@
         }}
         onMouseEnter={() => setIsTooltipOpen(true)}
         onMouseLeave={() => setIsTooltipOpen(false)}
-        className="tw-inline-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-blue-400/20 tw-bg-blue-400/10 tw-text-xs tw-text-blue-300 tw-shadow-[inset_0_0_2px_rgba(255,255,255,0.08),0_1px_4px_rgba(0,0,0,0.25)] tw-outline-none tw-ring-0 tw-transition-all tw-duration-200 focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-blue-400/50 focus-visible:tw-ring-offset-2 desktop-hover:hover:tw-scale-[1.05] desktop-hover:hover:tw-border-blue-400/30 desktop-hover:hover:tw-bg-blue-900/30 desktop-hover:hover:tw-shadow-[inset_0_0_3px_rgba(255,255,255,0.12),0_2px_6px_rgba(0,0,0,0.3)] md:tw-h-5 md:tw-w-5"
+        className="tw-inline-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-white/15 tw-bg-white/5 tw-text-white/60 tw-outline-none tw-ring-0 tw-transition-colors tw-duration-200 focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-white/20 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-offset-iron-950 desktop-hover:hover:tw-border-white/20 desktop-hover:hover:tw-bg-white/10 desktop-hover:hover:tw-text-white/70"
         aria-label="View created waves"
-        {...(typeof dataTooltipId === "string" && {
-          "data-tooltip-id": dataTooltipId,
-        })}
+        {...(dataTooltipId && { "data-tooltip-id": dataTooltipId })}
       >
         <FontAwesomeIcon
           icon={faWater}
-          className="tw-h-3 tw-w-3 tw-flex-shrink-0 tw-text-blue-400 desktop-hover:hover:tw-text-blue-300/90 md:tw-h-2.5 md:tw-w-2.5"
+          className="tw-h-2.5 tw-w-2.5 tw-flex-shrink-0 tw-text-current"
         />
       </button>
       {!isMobile && (
         <Tooltip
           id={uniqueTooltipId}
           place="top"
-          positionStrategy="absolute"
-          content="View created waves"
-          delayShow={300}
+          positionStrategy="fixed"
+          offset={8}
           opacity={1}
           style={TOOLTIP_STYLES}
           isOpen={isTooltipOpen}
-        />
+        >
+          <span className="tw-text-xs">View created waves</span>
+        </Tooltip>
       )}
     </>
   );

diff --git a/components/waves/drops/WaveDropHeader.tsx b/components/waves/drops/WaveDropHeader.tsx
@@ -53,8 +53,8 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
   return (
     <>
       <div className="tw-flex tw-items-center tw-justify-between tw-gap-x-2">
-        <div className="tw-flex tw-items-center tw-gap-x-2">
-          <div className="tw-flex tw-items-center tw-gap-x-2">
+        <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
+          <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
             <p
               className={`tw-mb-0 tw-font-semibold tw-leading-none ${compact ? "tw-text-sm" : "tw-text-md"}`}
             >

diff --git a/components/waves/winners/drops/MemesWaveWinnerDrop.tsx b/components/waves/winners/drops/MemesWaveWinnerDrop.tsx
@@ -87,7 +87,7 @@ export const MemesWaveWinnersDrop: React.FC<MemesWaveWinnersDropProps> = ({
               <div className="tw-flex tw-gap-x-2">
                 <WaveWinnersDropHeaderAuthorPfp winner={winner} size="sm" />
                 <div className="tw-flex tw-items-center">
-                  <div className="-tw-mt-0.5 tw-flex tw-flex-wrap tw-items-center tw-gap-x-2">
+                  <div className="-tw-mt-0.5 tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
                     {winner.drop.author.handle ? (
                       <UserProfileTooltipWrapper
                         user={winner.drop.author.handle}

diff --git a/components/waves/winners/drops/header/WaveWinnersDropHeader.tsx b/components/waves/winners/drops/header/WaveWinnersDropHeader.tsx
@@ -22,7 +22,7 @@ export const WaveWinnersDropHeader: React.FC<WaveWinnersDropHeaderProps> = ({
       className="tw-flex tw-w-full tw-flex-wrap tw-justify-between tw-gap-y-2 xl:tw-flex-nowrap"
     >
       <div className="tw-flex tw-w-full tw-flex-col tw-items-start tw-gap-y-2.5 xl:tw-w-auto">
-        <div className="tw-flex tw-items-center tw-gap-x-2">
+        <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1">
           <WaveWinnersDropHeaderAuthorHandle winner={winner} />
           <DropAuthorBadges
             profile={winner.drop.author}