diff --git a/components/waves/CreateDropActions.tsx b/components/waves/CreateDropActions.tsx index bbf87a31e7..aea41839fb 100644 --- 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 = memo( Add metadata @@ -191,13 +190,10 @@ const CreateDropActions: React.FC = memo( Upload a file @@ -246,13 +242,10 @@ const CreateDropActions: React.FC = memo( Add GIF diff --git a/components/waves/CreateDropContent.tsx b/components/waves/CreateDropContent.tsx index 06e04205c1..3b4f8aa93a 100644 --- a/components/waves/CreateDropContent.tsx +++ b/components/waves/CreateDropContent.tsx @@ -1636,6 +1636,11 @@ const CreateDropContent: React.FC = ({ onDropModeChange={handleDropModeChange} privileges={privileges} exitLabel={dropModeToggleExitLabel} + inactiveActionLabel={ + submissionExperience === WaveSubmissionExperience.IDENTITY + ? "nominate" + : "drop" + } /> )} 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 ( - - Switch to {isDropMode ? "Chat" : "Drop"} Mode - + Switch to {targetModeLabel} Mode ); } @@ -105,9 +116,7 @@ export const CreateDropDropModeToggle: React.FC< } return ( - - {isDropMode ? "Chat" : "Drop"} mode is unavailable - + {targetModeLabel} mode is unavailable ); }, [ 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" > - - {!isDropMode && ( - - - + - - + {isIdentityEntry ? ( +