6529-Collections · ragnep · Apr 1, 2026 · Apr 1, 2026 · Apr 1, 2026 · Apr 1, 2026
diff --git a/components/waves/CreateDropActions.tsx b/components/waves/CreateDropActions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { publicEnv } from "@/config/env";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import React, { memo, useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
@@ -138,12 +139,10 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
                       <Tooltip
                         id="add-metadata-tooltip"
                         place="top"
+                        offset={8}
+                        opacity={1}
                         positionStrategy="fixed"
-                        style={{
-                          backgroundColor: "#1F2937",
-                          color: "white",
-                          padding: "4px 8px",
-                        }}
+                        style={TOOLTIP_STYLES}
                       >
                         <span className="tw-text-xs">Add metadata</span>
                       </Tooltip>
@@ -191,13 +190,10 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
                       <Tooltip
                         id="upload-file-tooltip"
                         place="top"
+                        offset={8}
+                        opacity={1}
                         positionStrategy="fixed"
-                        style={{
-                          backgroundColor: "#1F2937",
-                          color: "white",
-                          padding: "4px 8px",
-                          zIndex: 9999,
-                        }}
+                        style={TOOLTIP_STYLES}
                       >
                         <span className="tw-text-xs">Upload a file</span>
                       </Tooltip>
@@ -246,13 +242,10 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
                         <Tooltip
                           id="add-gif-tooltip"
                           place="top"
+                          offset={8}
+                          opacity={1}
                           positionStrategy="fixed"
-                          style={{
-                            backgroundColor: "#1F2937",
-                            color: "white",
-                            padding: "4px 8px",
-                            zIndex: 9999,
-                          }}
+                          style={TOOLTIP_STYLES}
                         >
                           <span className="tw-text-xs">Add GIF</span>
                         </Tooltip>

diff --git a/components/waves/CreateDropContent.tsx b/components/waves/CreateDropContent.tsx
@@ -1636,6 +1636,11 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
                   onDropModeChange={handleDropModeChange}
                   privileges={privileges}
                   exitLabel={dropModeToggleExitLabel}
+                  inactiveActionLabel={
+                    submissionExperience === WaveSubmissionExperience.IDENTITY
+                      ? "nominate"
+                      : "drop"
+                  }
                 />
               )}
             <CreateDropSubmit

diff --git a/components/waves/CreateDropDropModeToggle.tsx b/components/waves/CreateDropDropModeToggle.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { UserPlusIcon } from "@heroicons/react/24/outline";
 import { Tooltip } from "react-tooltip";
 import React, { useMemo } from "react";
 import type { DropPrivileges } from "@/hooks/useDropPriviledges";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import {
   ChatRestriction,
   SubmissionRestriction,
@@ -13,16 +15,24 @@ interface CreateDropDropModeToggleProps {
   readonly onDropModeChange: (isDropMode: boolean) => void;
   readonly privileges: DropPrivileges;
   readonly exitLabel?: string | null;
+  readonly inactiveActionLabel?: "drop" | "nominate";
 }
 
 export const CreateDropDropModeToggle: React.FC<
   CreateDropDropModeToggleProps
-> = ({ isDropMode, onDropModeChange, privileges, exitLabel = null }) => {
+> = ({
+  isDropMode,
+  onDropModeChange,
+  privileges,
+  exitLabel = null,
+  inactiveActionLabel = "drop",
+}) => {
   const { chatRestriction, submissionRestriction } = privileges;
   const hasExitLabel = exitLabel !== null;
   const hasChatRestriction = chatRestriction !== null;
   const hasSubmissionRestriction = submissionRestriction !== null;
   const isExitOnly = isDropMode && hasExitLabel;
+  const isIdentityEntry = inactiveActionLabel === "nominate";
   const isDisabled =
     !isExitOnly &&
     ((isDropMode && hasChatRestriction) ||
@@ -36,40 +46,43 @@ export const CreateDropDropModeToggle: React.FC<
   const handleToggleClick = canToggle
     ? () => onDropModeChange(isExitOnly ? false : !isDropMode)
     : undefined;
+  const inactiveModeLabel = isIdentityEntry ? "Nominate" : "Drop";
+  const targetModeLabel = isDropMode ? "Chat" : inactiveModeLabel;
 
   const buttonClassName = useMemo(() => {
     const baseClasses =
-      "tw-group tw-relative tw-flex tw-h-9 tw-w-9 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-transparent tw-text-sm tw-transition-all active:tw-scale-95 md:tw-h-10 md:tw-w-10 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2";
+      "tw-group tw-relative tw-flex tw-h-9 tw-w-9 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-text-sm tw-transition-all active:tw-scale-95 md:tw-h-10 md:tw-w-10 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2";
 
     if (isDisabled) {
       return `${baseClasses} tw-opacity-50 tw-cursor-not-allowed ${
         isDropMode
-          ? "tw-bg-primary-600 tw-text-white"
-          : "tw-bg-white/[0.06] tw-text-iron-500"
+          ? "tw-border tw-border-solid tw-border-primary-500/20 tw-bg-primary-500/10 tw-text-primary-400"
+          : "tw-border tw-border-transparent tw-bg-iron-700 tw-text-iron-500"
       }`;
     }
 
     if (isDropMode) {
-      return `${baseClasses} tw-bg-primary-600 tw-text-white desktop-hover:hover:tw-bg-primary-500 focus-visible:tw-outline-primary-500`;
+      return `${baseClasses} tw-border tw-border-solid tw-border-primary-500/20 tw-bg-primary-500/10 tw-text-primary-400 desktop-hover:hover:tw-border-primary-500/30 desktop-hover:hover:tw-bg-primary-500/20 desktop-hover:hover:tw-text-primary-400 focus-visible:tw-outline-primary-500`;
     }
 
-    return `${baseClasses} tw-bg-white/[0.06] tw-text-iron-300 desktop-hover:hover:tw-bg-white/[0.12] desktop-hover:hover:tw-text-white focus-visible:tw-outline-iron-500`;
+    return `${baseClasses} tw-border tw-border-transparent tw-bg-iron-700 tw-text-iron-300 desktop-hover:hover:tw-bg-iron-700/70 focus-visible:tw-outline-iron-500`;
   }, [isDisabled, isDropMode]);
 
   const getRestrictionMessage = (
     restriction: ChatRestriction | SubmissionRestriction,
     isChat: boolean
   ): string => {
+    const actionLabel = isChat ? inactiveActionLabel : "chat";
     switch (restriction) {
       case ChatRestriction.NOT_LOGGED_IN:
       case SubmissionRestriction.NOT_LOGGED_IN:
-        return `Please log in to ${isChat ? "drop" : "chat"}`;
+        return `Please log in to ${actionLabel}`;
       case ChatRestriction.PROXY_USER:
       case SubmissionRestriction.PROXY_USER:
-        return `Proxy users cannot ${isChat ? "drop" : "chat"}`;
+        return `Proxy users cannot ${actionLabel}`;
       case ChatRestriction.NO_PERMISSION:
       case SubmissionRestriction.NO_PERMISSION:
-        return `You don't have permission to ${isChat ? "drop" : "chat"}`;
+        return `You don't have permission to ${actionLabel}`;
       case ChatRestriction.DISABLED:
         return "Chat is currently disabled";
       case SubmissionRestriction.NOT_STARTED:
@@ -79,7 +92,7 @@ export const CreateDropDropModeToggle: React.FC<
       case SubmissionRestriction.MAX_DROPS_REACHED:
         return "You have reached the maximum number of drops allowed";
       default:
-        return `${isChat ? "Drop" : "Chat"} mode is unavailable`;
+        return `${isChat ? inactiveActionLabel : "chat"} mode is unavailable`;
     }
   };
 
@@ -90,9 +103,7 @@ export const CreateDropDropModeToggle: React.FC<
 
     if (!isDisabled && canToggle) {
       return (
-        <span className="tw-text-xs">
-          Switch to {isDropMode ? "Chat" : "Drop"} Mode
-        </span>
+        <span className="tw-text-xs">Switch to {targetModeLabel} Mode</span>
       );
     }
 
@@ -105,9 +116,7 @@ export const CreateDropDropModeToggle: React.FC<
     }
 
     return (
-      <span className="tw-text-xs">
-        {isDropMode ? "Chat" : "Drop"} mode is unavailable
-      </span>
+      <span className="tw-text-xs">{targetModeLabel} mode is unavailable</span>
     );
   }, [
     isDropMode,
@@ -116,6 +125,8 @@ export const CreateDropDropModeToggle: React.FC<
     targetRestriction,
     isExitOnly,
     exitLabel,
+    inactiveActionLabel,
+    targetModeLabel,
   ]);
 
   return (
@@ -128,36 +139,36 @@ export const CreateDropDropModeToggle: React.FC<
           className={buttonClassName}
           data-tooltip-id="drop-mode-toggle"
         >
-          <svg
-            className="tw-h-4.5 tw-w-4.5 tw-flex-shrink-0 tw-transition-colors md:tw-h-5 md:tw-w-5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" />
-            <path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" />
-          </svg>
-          {!isDropMode && (
-            <span className="tw-absolute tw-right-1 tw-top-1 tw-flex tw-h-2.5 tw-w-2.5 tw-items-center tw-justify-center tw-rounded-full tw-bg-iron-950">
-              <span className="tw-text-[9px] tw-font-black tw-leading-none tw-text-primary-400">
-                +
-              </span>
-            </span>
+          {isIdentityEntry ? (
+            <UserPlusIcon
+              className="tw-h-4.5 tw-w-4.5 tw-flex-shrink-0 tw-transition-colors md:tw-h-5 md:tw-w-5"
+              aria-hidden="true"
+            />
+          ) : (
+            <svg
+              className="tw-h-4.5 tw-w-4.5 tw-flex-shrink-0 tw-transition-colors md:tw-h-5 md:tw-w-5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" />
+              <path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" />
+            </svg>
           )}
         </button>
       </div>
       <Tooltip
         id="drop-mode-toggle"
-        style={{
-          backgroundColor: "#1F2937",
-          color: "white",
-          padding: "4px 8px",
-        }}
+        place="top"
+        offset={8}
+        opacity={1}
+        positionStrategy="fixed"
+        style={TOOLTIP_STYLES}
       >
         {tooltipContent}
       </Tooltip>

diff --git a/components/waves/StormButton.tsx b/components/waves/StormButton.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Tooltip } from "react-tooltip";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 
 interface StormButtonProps {
   readonly isStormMode: boolean;
@@ -20,41 +21,42 @@ const StormButton: React.FC<StormButtonProps> = ({
         onClick={breakIntoStorm}
         disabled={!canAddPart || submitting}
         type="button"
-        className={`tw-flex tw-items-center tw-justify-center tw-flex-shrink-0  tw-rounded-full tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0 ${
+        className={`tw-flex tw-size-8 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-transition tw-duration-300 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-iron-500 focus-visible:tw-ring-offset-2 lg:tw-size-7 ${
           canAddPart && !submitting
-            ? "tw-cursor-pointer tw-text-iron-300 desktop-hover:hover:tw-text-primary-400 desktop-hover:hover:tw-bg-primary-300/20 tw-bg-iron-700"
-            : "tw-cursor-default tw-text-iron-600 desktop-hover:hover:tw-text-iron-600 tw-bg-iron-900"
+            ? "tw-cursor-pointer tw-bg-iron-700 tw-text-iron-300 desktop-hover:hover:tw-bg-primary-300/20 desktop-hover:hover:tw-text-primary-400"
+            : "tw-cursor-default tw-bg-iron-900 tw-text-iron-600 desktop-hover:hover:tw-text-iron-600"
         }`}
         data-tooltip-id="storm-button-tooltip"
       >
-          <svg
-            className={`tw-h-[1.1rem] tw-w-[1.1rem] lg:tw-size-4 tw-flex-shrink-0 ${
-              !canAddPart || submitting ? "tw-opacity-50" : ""
-            }`}
-            viewBox="0 0 24 24"
-            fill="none"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M21 4H3M20 8L6 8M18 12L9 12M15 16L8 16M17 20H12"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
+        <svg
+          className={`tw-h-[1.1rem] tw-w-[1.1rem] tw-flex-shrink-0 lg:tw-size-4 ${
+            !canAddPart || submitting ? "tw-opacity-50" : ""
+          }`}
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M21 4H3M20 8L6 8M18 12L9 12M15 16L8 16M17 20H12"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
       <Tooltip
         id="storm-button-tooltip"
         place="top"
+        offset={8}
+        opacity={1}
         positionStrategy="fixed"
-        style={{
-          backgroundColor: "#1F2937",
-          color: "white",
-          padding: "4px 8px",
-        }}>
-        <span className="tw-text-xs">{isStormMode ? "Add a part" : "Break into storm"}</span>
+        style={TOOLTIP_STYLES}
+      >
+        <span className="tw-text-xs">
+          {isStormMode ? "Add a part" : "Break into storm"}
+        </span>
       </Tooltip>
     </div>
   );

diff --git a/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx b/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
@@ -76,13 +76,13 @@ export const DefaultWaveLeaderboardDrop: React.FC<
               </div>
             </div>
             <WaveLeaderboardDropContent drop={drop} isCompetitionDrop={true} />
-            <div className="tw-mt-3 tw-inline-flex tw-flex-col tw-justify-between tw-gap-x-2 tw-space-y-3 @[700px]:tw-flex-row @[700px]:tw-items-center @[700px]:tw-space-y-0">
+            <div className="tw-mt-3 tw-flex tw-w-full tw-flex-col tw-justify-between tw-gap-x-2 tw-space-y-3 @[700px]:tw-flex-row @[700px]:tw-items-center @[700px]:tw-space-y-0">
               <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-4 tw-gap-y-2">
                 <WaveLeaderboardDropRaters drop={drop} />
                 <WaveLeaderboardDropFooter drop={drop} />
               </div>
               <div
-                className="tw-flex tw-items-center tw-justify-center tw-gap-1.5 tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-800 tw-pt-4 @[700px]:tw-ml-auto @[700px]:tw-border-t-0 @[700px]:tw-pt-0"
+                className="tw-flex tw-w-full tw-items-center tw-justify-end tw-gap-1.5 tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-800 tw-pt-4 @[700px]:tw-ml-auto @[700px]:tw-w-auto @[700px]:tw-border-t-0 @[700px]:tw-pt-0"
                 onClick={(e) => e.stopPropagation()}
               >
                 <DropCurationButton