From 43ad883b2be2304b9a9f9e7f4ee99345a0f0e220 Mon Sep 17 00:00:00 2001
From: zho <medenicablazo@gmail.com>
Date: Wed, 11 Sep 2024 11:33:40 +0200
Subject: [PATCH] chore: rm onMenuStateChange for menu component (#2326)

* chore: rm onMenuStateChange for menu component

* chore: rm all menu state change implementations

* chore: rm shadow from sort proposal

* chore: revert shadow on dropdown

* chore: add shadow on share dropdown too
---
 .../components/Share/index.tsx                | 223 ++++++++----------
 .../components/Sort/index.tsx                 |   5 +-
 .../TokenSearchModal/ERC20/index.tsx          |  21 +-
 .../components/TokenSearchModal/NFT/index.tsx |  21 +-
 .../components/ChainDropdown/index.tsx        |  11 +-
 .../NftList/component/Nft/index.tsx           |   7 +-
 .../components/NftList/index.tsx              |  10 +-
 .../components/SearchInput/index.tsx          |  11 +-
 .../_pages/Contest/Contest/index.tsx          |  12 +-
 .../CreatePool/components/Dropdown/index.tsx  |   4 -
 .../components/SortDropdown/index.tsx         |  77 +++---
 .../components/ProposalStatistics/index.tsx   |   9 +-
 .../components/DefaultDropdown/index.tsx      |  11 +-
 .../components/TemplateDropdown/index.tsx     |  10 +-
 .../Metadata/components/Dropdown/index.tsx    |   4 -
 .../Fields/components/Field/index.tsx         |   8 +-
 .../SubmissionRequirements/index.tsx          |  15 +-
 .../components/SubmissionPeriod/index.tsx     |   8 +-
 .../components/VotingPeriod/index.tsx         |   8 +-
 .../Create/pages/ContestUseTemplate/index.tsx |   6 +-
 .../components/VotingRequirements/index.tsx   |  24 +-
 .../components/_pages/ListContests/index.tsx  |   5 +-
 .../layouts/LayoutViewContest/index.tsx       |  10 +-
 23 files changed, 175 insertions(+), 345 deletions(-)

diff --git a/packages/react-app-revamp/components/Share/index.tsx b/packages/react-app-revamp/components/Share/index.tsx
index bc9fbabe6..32e2f80ba 100644
--- a/packages/react-app-revamp/components/Share/index.tsx
+++ b/packages/react-app-revamp/components/Share/index.tsx
@@ -18,10 +18,9 @@ interface ShareDropdownProps {
   contestName: string;
   contestAddress: string;
   chain: string;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
-const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, chain, onMenuStateChange }) => {
+const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, chain }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   useEffect(() => {
@@ -41,124 +40,110 @@ const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, ch
 
   return (
     <Menu as="div" className="relative inline-block text-left">
-      {({ open }) => {
-        onMenuStateChange?.(open);
+      <MediaQuery maxWidth={768}>
+        <MenuButton className="w-8 h-8 flex items-center rounded-[10px] border border-neutral-11">
+          <Image src="/forward.svg" alt="share" className="m-auto" width={15} height={13} />
+        </MenuButton>
+      </MediaQuery>
+      <MediaQuery minWidth={769}>
+        <MenuButton className="p-4 h-8 flex items-center gap-2 text-neutral-11 text-[16px] font-bold rounded-[10px] border border-neutral-11">
+          Share <Image src="/forward.svg" alt="share" className="ml-1" width={20} height={20} />
+        </MenuButton>
+      </MediaQuery>
 
-        return (
-          <>
-            <MediaQuery maxWidth={768}>
-              <MenuButton className="w-8 h-8 flex items-center rounded-[10px] border border-neutral-11">
-                <Image src="/forward.svg" alt="share" className="m-auto" width={15} height={13} />
-              </MenuButton>
-            </MediaQuery>
-            <MediaQuery minWidth={769}>
-              <MenuButton className="p-4 h-8 flex items-center gap-2 text-neutral-11 text-[16px] font-bold rounded-[10px] border border-neutral-11">
-                Share <Image src="/forward.svg" alt="share" className="ml-1" width={20} height={20} />
-              </MenuButton>
-            </MediaQuery>
-
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems className="absolute right-0 z-10 mt-2 w-52 origin-top-right rounded-md bg-true-black shadow-lg ring-1 ring-inset ring-primary-9 ring-opacity-10 focus:outline-none">
-                <MenuItem>
-                  {({ focus, close }) => (
-                    <a
-                      target="_blank"
-                      href={generateLensShareUrlForContest(contestName, contestAddress, chain)}
-                      className={classNames(
-                        focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
-                        "flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
-                      )}
-                      rel="noreferrer"
-                      onClick={close}
-                    >
-                      <Image
-                        src="/socials/lens.svg"
-                        alt="Lens"
-                        width={32}
-                        height={32}
-                        className="object-fit-cover mr-2"
-                      />
-                      <span className="text-left">share on Lens</span>
-                    </a>
-                  )}
-                </MenuItem>
-                <MenuItem>
-                  {({ focus, close }) => (
-                    <a
-                      href={generateTwitterShareUrlForContest(contestName, contestAddress, chain)}
-                      target="_blank"
-                      className={classNames(
-                        focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
-                        "flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
-                      )}
-                      rel="noreferrer"
-                      onClick={close}
-                    >
-                      <Image
-                        src="/socials/twitter.svg"
-                        alt="Twitter"
-                        width={32}
-                        height={32}
-                        className="object-fit-cover mr-2"
-                      />
-                      <span className="text-left">share on Twitter</span>
-                    </a>
-                  )}
-                </MenuItem>
-                <MenuItem>
-                  {({ focus, close }) => (
-                    <a
-                      href={generateFarcasterShareUrlForContest(contestName, contestAddress, chain)}
-                      target="_blank"
-                      className={classNames(
-                        focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
-                        "flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
-                      )}
-                      rel="noreferrer"
-                      onClick={close}
-                    >
-                      <Image
-                        src="/socials/farcaster.svg"
-                        alt="Twitter"
-                        width={32}
-                        height={32}
-                        className="object-fit-cover mr-2"
-                      />
-                      <span className="text-left">share on farcaster</span>
-                    </a>
-                  )}
-                </MenuItem>
-                <MenuItem>
-                  {({ focus }) => (
-                    <a
-                      onClick={handleCopyLink}
-                      className={classNames(
-                        focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
-                        "flex items-center gap-1 px-4 py-2 text-[16px] hover:bg-gray-100 hover:text-gray-900 cursor-pointer",
-                      )}
-                    >
-                      {isCopied ? (
-                        <CheckIcon className="h-8 w-8 text-neutral-11 500 mr-2" />
-                      ) : (
-                        <DocumentDuplicateIcon className="h-8 w-8 text-neutral-11 mr-2" />
-                      )}
-                      <span className="text-left">copy link</span>
-                    </a>
-                  )}
-                </MenuItem>
-              </MenuItems>
-            </Transition>
-          </>
-        );
-      }}
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <MenuItems className="absolute right-0 z-10 mt-2 w-52 overflow-x-auto origin-top-right rounded-md bg-true-black shadow-sortProposalDropdown focus:outline-none">
+          <MenuItem>
+            {({ focus, close }) => (
+              <a
+                target="_blank"
+                href={generateLensShareUrlForContest(contestName, contestAddress, chain)}
+                className={classNames(
+                  focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
+                  "flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
+                )}
+                rel="noreferrer"
+                onClick={close}
+              >
+                <Image src="/socials/lens.svg" alt="Lens" width={32} height={32} className="object-fit-cover mr-2" />
+                <span className="text-left">share on Lens</span>
+              </a>
+            )}
+          </MenuItem>
+          <MenuItem>
+            {({ focus, close }) => (
+              <a
+                href={generateTwitterShareUrlForContest(contestName, contestAddress, chain)}
+                target="_blank"
+                className={classNames(
+                  focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
+                  "flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
+                )}
+                rel="noreferrer"
+                onClick={close}
+              >
+                <Image
+                  src="/socials/twitter.svg"
+                  alt="Twitter"
+                  width={32}
+                  height={32}
+                  className="object-fit-cover mr-2"
+                />
+                <span className="text-left">share on Twitter</span>
+              </a>
+            )}
+          </MenuItem>
+          <MenuItem>
+            {({ focus, close }) => (
+              <a
+                href={generateFarcasterShareUrlForContest(contestName, contestAddress, chain)}
+                target="_blank"
+                className={classNames(
+                  focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
+                  "flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
+                )}
+                rel="noreferrer"
+                onClick={close}
+              >
+                <Image
+                  src="/socials/farcaster.svg"
+                  alt="Twitter"
+                  width={32}
+                  height={32}
+                  className="object-fit-cover mr-2"
+                />
+                <span className="text-left">share on farcaster</span>
+              </a>
+            )}
+          </MenuItem>
+          <MenuItem>
+            {({ focus }) => (
+              <a
+                onClick={handleCopyLink}
+                className={classNames(
+                  focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
+                  "flex items-center gap-1 px-4 py-2 text-[16px] hover:bg-gray-100 hover:text-gray-900 cursor-pointer",
+                )}
+              >
+                {isCopied ? (
+                  <CheckIcon className="h-8 w-8 text-neutral-11 500 mr-2" />
+                ) : (
+                  <DocumentDuplicateIcon className="h-8 w-8 text-neutral-11 mr-2" />
+                )}
+                <span className="text-left">copy link</span>
+              </a>
+            )}
+          </MenuItem>
+        </MenuItems>
+      </Transition>
     </Menu>
   );
 };
diff --git a/packages/react-app-revamp/components/Sort/index.tsx b/packages/react-app-revamp/components/Sort/index.tsx
index c5f921a8c..3b30d43ab 100644
--- a/packages/react-app-revamp/components/Sort/index.tsx
+++ b/packages/react-app-revamp/components/Sort/index.tsx
@@ -16,10 +16,9 @@ export type SortOption = {
 export interface SortProps {
   sortOptions: SortOption[];
   onSortChange?: (sortBy: string) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
-const Sort: FC<SortProps> = ({ sortOptions, onSortChange, onMenuStateChange }) => {
+const Sort: FC<SortProps> = ({ sortOptions, onSortChange }) => {
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
   const [label, setLabel] = useState<string | null>(null);
   const query = useSearchParams();
@@ -79,8 +78,6 @@ const Sort: FC<SortProps> = ({ sortOptions, onSortChange, onMenuStateChange }) =
   return (
     <Menu as="div" className="relative inline-block text-left w-full md:w-[220px] text-[16px]">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
         return (
           <>
             <div
diff --git a/packages/react-app-revamp/components/TokenSearchModal/ERC20/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/ERC20/index.tsx
index e7aec9f9c..8e6e1874f 100644
--- a/packages/react-app-revamp/components/TokenSearchModal/ERC20/index.tsx
+++ b/packages/react-app-revamp/components/TokenSearchModal/ERC20/index.tsx
@@ -17,7 +17,6 @@ const TokenSearchModalERC20: FC<TokenSearchModalERC20Props> = ({ chains: erc20Ch
   const [searchValue, setSearchValue] = useState<string>("");
   const chainId = chains.find(chain => chain.name === erc20SelectedChain)?.id || 1;
   const isChainSupportedBySearch = TOKENLISTOOOR_SUPPORTED_CHAIN_IDS.includes(chainId);
-  const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false);
 
   return (
     <div className="flex flex-col gap-8">
@@ -28,29 +27,15 @@ const TokenSearchModalERC20: FC<TokenSearchModalERC20Props> = ({ chains: erc20Ch
             defaultOption={erc20Chains[0]}
             options={erc20Chains}
             onChange={option => setErc20SelectedChain(option)}
-            onMenuStateChange={isOpen => setIsChainDropdownOpen(isOpen)}
           />
         </div>
       ) : null}
       {!hideChains ? <div className="bg-primary-5 h-[2px]" /> : null}
-      <TokenSearchModalSearchInput
-        onSearchChange={value => setSearchValue(value)}
-        isChainDropdownOpen={isChainDropdownOpen}
-        chainId={chainId}
-      />
+      <TokenSearchModalSearchInput onSearchChange={value => setSearchValue(value)} chainId={chainId} />
       {searchValue ? (
-        <TokenSearchList
-          searchValue={searchValue}
-          chainId={chainId}
-          isChainDropdownOpen={isChainDropdownOpen}
-          onSelectToken={onSelectToken}
-        />
+        <TokenSearchList searchValue={searchValue} chainId={chainId} onSelectToken={onSelectToken} />
       ) : isChainSupportedBySearch ? (
-        <TokenSearchModalUserTokens
-          chainName={erc20SelectedChain}
-          onSelectToken={onSelectToken}
-          isChainDropdownOpen={isChainDropdownOpen}
-        />
+        <TokenSearchModalUserTokens chainName={erc20SelectedChain} onSelectToken={onSelectToken} />
       ) : (
         <div className="flex gap-2">
           <InformationCircleIcon className="w-12 text-neutral-11" />
diff --git a/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx
index fc0636ba3..e5ceacc6c 100644
--- a/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx
+++ b/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx
@@ -14,7 +14,6 @@ interface TokenSearchModalNftProps {
 const TokenSearchModalNft: FC<TokenSearchModalNftProps> = ({ chains, onSelectNft, onSelectChain }) => {
   const [selectedChain, setSelectedChain] = useState<string>(chains[0].value);
   const [searchValue, setSearchValue] = useState<string>("");
-  const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false);
   const chainId = wagmiChains.find(chain => chain.name.toLowerCase() === selectedChain.toLowerCase())?.id || 1;
 
   const onNftChainChange = (chain: string) => {
@@ -26,26 +25,12 @@ const TokenSearchModalNft: FC<TokenSearchModalNftProps> = ({ chains, onSelectNft
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-4">
         <p className="text-[24px] font-bold text-true-white">chain:</p>
-        <TokenSearchModalChainDropdown
-          defaultOption={chains[0]}
-          options={chains}
-          onChange={onNftChainChange}
-          onMenuStateChange={isOpen => setIsChainDropdownOpen(isOpen)}
-        />
+        <TokenSearchModalChainDropdown defaultOption={chains[0]} options={chains} onChange={onNftChainChange} />
       </div>
       <div className="bg-primary-5 h-[2px]" />
-      <TokenSearchModalSearchInput
-        onSearchChange={value => setSearchValue(value)}
-        isChainDropdownOpen={isChainDropdownOpen}
-        chainId={chainId}
-      />
+      <TokenSearchModalSearchInput onSearchChange={value => setSearchValue(value)} chainId={chainId} />
       {searchValue ? (
-        <NftsSearchList
-          selectedChain={selectedChain}
-          searchValue={searchValue}
-          onSelectNft={onSelectNft}
-          isChainDropdownOpen={isChainDropdownOpen}
-        />
+        <NftsSearchList selectedChain={selectedChain} searchValue={searchValue} onSelectNft={onSelectNft} />
       ) : null}
     </div>
   );
diff --git a/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx
index 4f7926a72..6cb04ce53 100644
--- a/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx
+++ b/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx
@@ -14,16 +14,9 @@ interface ChainDropdownProps {
   defaultOption: Option;
   className?: string;
   onChange?: (option: string) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
-const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({
-  options,
-  defaultOption,
-  className,
-  onChange,
-  onMenuStateChange,
-}) => {
+const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({ options, defaultOption, className, onChange }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
 
   const handleOptionClick = (option: Option) => {
@@ -43,8 +36,6 @@ const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({
   return (
     <Menu as="div" className="relative inline-block text-left">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
         return (
           <>
             <MenuButton className="flex items-center bg-primary-5 cursor-pointer border border-neutral-10 w-full md:w-[200px] h-full md:h-12 rounded-[15px] px-4 py-2">
diff --git a/packages/react-app-revamp/components/TokenSearchModal/components/NftList/component/Nft/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/components/NftList/component/Nft/index.tsx
index 276bf120f..59bd08e64 100644
--- a/packages/react-app-revamp/components/TokenSearchModal/components/NftList/component/Nft/index.tsx
+++ b/packages/react-app-revamp/components/TokenSearchModal/components/NftList/component/Nft/index.tsx
@@ -6,11 +6,10 @@ import { FC, useState } from "react";
 
 interface TokenSearchListNftProps {
   nft: NFTMetadata;
-  isChainDropdownOpen?: boolean;
   onSelectNft?: (nft: NFTMetadata) => void;
 }
 
-const TokenSearchListNft: FC<TokenSearchListNftProps> = ({ nft, isChainDropdownOpen, onSelectNft }) => {
+const TokenSearchListNft: FC<TokenSearchListNftProps> = ({ nft, onSelectNft }) => {
   const [isHovered, setIsHovered] = useState(false);
 
   const truncateTokenName = (name: string, maxLength: number = 30): string => {
@@ -25,9 +24,7 @@ const TokenSearchListNft: FC<TokenSearchListNftProps> = ({ nft, isChainDropdownO
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={() => onSelectNft?.(nft)}
-      className={`flex gap-6 items-center cursor-pointer transition-all duration-300 ${
-        isChainDropdownOpen ? "opacity-50" : ""
-      }`}
+      className={`flex gap-6 items-center cursor-pointer transition-all duration-300`}
     >
       <div
         className={`flex items-center bg-neutral-5 rounded-full overflow-hidden w-10 h-10 border border-primary-2 ${
diff --git a/packages/react-app-revamp/components/TokenSearchModal/components/NftList/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/components/NftList/index.tsx
index 035fc36e8..bf046b8c3 100644
--- a/packages/react-app-revamp/components/TokenSearchModal/components/NftList/index.tsx
+++ b/packages/react-app-revamp/components/TokenSearchModal/components/NftList/index.tsx
@@ -5,11 +5,10 @@ import TokenSearchListNft from "./component/Nft";
 interface NftsSearchListProps {
   selectedChain: string;
   searchValue: string;
-  isChainDropdownOpen?: boolean;
   onSelectNft?: (nft: NFTMetadata) => void;
 }
 
-const NftsSearchList: FC<NftsSearchListProps> = ({ selectedChain, searchValue, isChainDropdownOpen, onSelectNft }) => {
+const NftsSearchList: FC<NftsSearchListProps> = ({ selectedChain, searchValue, onSelectNft }) => {
   const { data: nfts, error, isLoading } = useSearchNfts(selectedChain, searchValue);
 
   if (error) {
@@ -31,12 +30,7 @@ const NftsSearchList: FC<NftsSearchListProps> = ({ selectedChain, searchValue, i
   return (
     <div className={`flex flex-col gap-6 animate-reveal`}>
       {nfts.map(nft => (
-        <TokenSearchListNft
-          key={nft.address}
-          nft={nft}
-          onSelectNft={onSelectNft}
-          isChainDropdownOpen={isChainDropdownOpen}
-        />
+        <TokenSearchListNft key={nft.address} nft={nft} onSelectNft={onSelectNft} />
       ))}
     </div>
   );
diff --git a/packages/react-app-revamp/components/TokenSearchModal/components/SearchInput/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/components/SearchInput/index.tsx
index ddab99068..70adfc604 100644
--- a/packages/react-app-revamp/components/TokenSearchModal/components/SearchInput/index.tsx
+++ b/packages/react-app-revamp/components/TokenSearchModal/components/SearchInput/index.tsx
@@ -5,15 +5,10 @@ import { debounce } from "underscore";
 
 interface TokenSearchModalSearchInputProps {
   chainId: number;
-  isChainDropdownOpen?: boolean;
   onSearchChange?: (value: string) => void;
 }
 
-const TokenSearchModalSearchInput: FC<TokenSearchModalSearchInputProps> = ({
-  chainId,
-  isChainDropdownOpen,
-  onSearchChange,
-}) => {
+const TokenSearchModalSearchInput: FC<TokenSearchModalSearchInputProps> = ({ chainId, onSearchChange }) => {
   const [searchValue, setSearchValue] = useState("");
   const isChainSupportedBySearch = TOKENLISTOOOR_SUPPORTED_CHAIN_IDS.includes(chainId);
 
@@ -29,9 +24,7 @@ const TokenSearchModalSearchInput: FC<TokenSearchModalSearchInputProps> = ({
 
   return (
     <div
-      className={`flex items-center h-12 rounded-[15px] bg-primary-5 text-[16px] pl-8 pr-4 transition-all duration-300 ease-in-out ${
-        isChainDropdownOpen ? "opacity-50" : ""
-      }`}
+      className={`flex items-center h-12 rounded-[15px] bg-primary-5 text-[16px] pl-8 pr-4 transition-all duration-300 ease-in-out`}
     >
       <span className="text-neutral-11">
         <MagnifyingGlassIcon
diff --git a/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx b/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx
index a1e257de6..4021e0338 100644
--- a/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx
@@ -37,7 +37,6 @@ const ContestTab = () => {
   const qualifiedToSubmit =
     currentUserQualifiedToSubmit && currentUserProposalCount < contestMaxNumberSubmissionsPerUser;
   const isMobile = useMediaQuery({ maxWidth: 768 });
-  const [blurProposals, setBlurProposals] = useState(false);
   const isInPwaMode = window.matchMedia("(display-mode: standalone)").matches;
   const { contestState } = useContestStateStore(state => state);
   const isContestCanceled = contestState === ContestStateEnum.Canceled;
@@ -98,18 +97,11 @@ const ContestTab = () => {
       <div className={`mt-4 ${isInPwaMode ? "mb-12" : "mb-0"}`}>
         <div className="flex flex-col gap-2">
           {contestStatus !== ContestStatus.ContestOpen && !isContestLoading && (
-            <ProposalStatistics
-              contestStatus={contestStatus}
-              onMenuStateChange={(value: boolean) => setBlurProposals(value)}
-            />
+            <ProposalStatistics contestStatus={contestStatus} />
           )}
 
           {!isContestLoading && !isListProposalsLoading && isContestSuccess && isListProposalsSuccess && (
-            <div
-              className={`animate-reveal ${contestStatus !== ContestStatus.SubmissionOpen ? "mt-4" : "mt-0"} ${
-                blurProposals ? "blurProposals" : ""
-              }`}
-            >
+            <div className={`animate-reveal ${contestStatus !== ContestStatus.SubmissionOpen ? "mt-4" : "mt-0"}`}>
               <ListProposals />
             </div>
           )}
diff --git a/packages/react-app-revamp/components/_pages/Contest/Rewards/components/Create/steps/CreatePool/components/Dropdown/index.tsx b/packages/react-app-revamp/components/_pages/Contest/Rewards/components/Create/steps/CreatePool/components/Dropdown/index.tsx
index ecb519fae..f05119171 100644
--- a/packages/react-app-revamp/components/_pages/Contest/Rewards/components/Create/steps/CreatePool/components/Dropdown/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/Rewards/components/Create/steps/CreatePool/components/Dropdown/index.tsx
@@ -9,7 +9,6 @@ interface CreateRewardsPoolRecipientsDropdownProps {
   defaultOption: Option;
   className?: string;
   onChange?: (option: string) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
 const CreateRewardsPoolRecipientsDropdown: FC<CreateRewardsPoolRecipientsDropdownProps> = ({
@@ -17,7 +16,6 @@ const CreateRewardsPoolRecipientsDropdown: FC<CreateRewardsPoolRecipientsDropdow
   defaultOption,
   className,
   onChange,
-  onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
 
@@ -33,8 +31,6 @@ const CreateRewardsPoolRecipientsDropdown: FC<CreateRewardsPoolRecipientsDropdow
   return (
     <Menu as="div" className="relative inline-block">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
         return (
           <>
             <MenuButton className="flex items-center justify-center bg-neutral-14 cursor-pointer w-20 h-8 rounded-[8px] px-2 py-2 relative">
diff --git a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx
index 20bb7a001..cfa755b81 100644
--- a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx
@@ -16,10 +16,9 @@ const options = [
 interface SortProposalsDropdownProps {
   defaultValue: string;
   onChange?: (value: string) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
-const SortProposalsDropdown: FC<SortProposalsDropdownProps> = ({ defaultValue, onChange, onMenuStateChange }) => {
+const SortProposalsDropdown: FC<SortProposalsDropdownProps> = ({ defaultValue, onChange }) => {
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -32,48 +31,40 @@ const SortProposalsDropdown: FC<SortProposalsDropdownProps> = ({ defaultValue, o
 
   return (
     <Menu as="div" className="relative inline-block text-left" ref={menuRef}>
-      {({ open }) => {
-        onMenuStateChange?.(open);
+      <MenuButton className="flex items-center gap-2 text-[16px] text-positive-11 w-full">
+        sort: {selectedLabel}
+        <ChevronDownIcon className="w-6 h-6 text-positive-11" aria-hidden="true" />
+      </MenuButton>
 
-        return (
-          <>
-            <MenuButton className="flex items-center gap-2 text-[16px] text-positive-11 w-full">
-              sort: {selectedLabel}
-              <ChevronDownIcon className="w-6 h-6 text-positive-11" aria-hidden="true" />
-            </MenuButton>
-
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems className="absolute overflow-x-clip md:-right-2 z-10 mt-4 w-36 rounded-[10px] shadow-sortProposalDropdown focus:outline-none">
-                {options.map(option => (
-                  <MenuItem key={option.value}>
-                    {({ focus }) => (
-                      <button
-                        type="button"
-                        className={classNames(
-                          focus ? "bg-neutral-2" : "bg-true-black",
-                          "block w-full px-4 py-2 text-left text-[16px]",
-                          option.value === selectedValue ? "font-bold" : "",
-                        )}
-                        onClick={() => handleSelectionChange(option.value)}
-                      >
-                        {option.label}
-                      </button>
-                    )}
-                  </MenuItem>
-                ))}
-              </MenuItems>
-            </Transition>
-          </>
-        );
-      }}
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <MenuItems className="absolute overflow-x-auto md:-right-2 z-10 mt-4 w-36 rounded-md shadow-sortProposalDropdown focus:outline-none">
+          {options.map(option => (
+            <MenuItem key={option.value}>
+              {({ focus }) => (
+                <button
+                  type="button"
+                  className={classNames(
+                    focus ? "bg-neutral-2" : "bg-true-black",
+                    "block w-full px-4 py-2 text-left text-[16px]",
+                    option.value === selectedValue ? "font-bold" : "",
+                  )}
+                  onClick={() => handleSelectionChange(option.value)}
+                >
+                  {option.label}
+                </button>
+              )}
+            </MenuItem>
+          ))}
+        </MenuItems>
+      </Transition>
     </Menu>
   );
 };
diff --git a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx
index 5771a6da9..31ebb8e54 100644
--- a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx
@@ -12,10 +12,9 @@ import { chains } from "@config/wagmi";
 
 interface ProposalStatisticsProps {
   contestStatus: ContestStatus;
-  onMenuStateChange: (isOpen: boolean) => void;
 }
 
-const ProposalStatistics: FC<ProposalStatisticsProps> = ({ contestStatus, onMenuStateChange }) => {
+const ProposalStatistics: FC<ProposalStatisticsProps> = ({ contestStatus }) => {
   const asPath = usePathname();
   const { chainName, address } = extractPathSegments(asPath ?? "");
   const chainId = chains.filter(chain => chain.name.toLowerCase() === chainName.toLowerCase())[0]?.id;
@@ -62,11 +61,7 @@ const ProposalStatistics: FC<ProposalStatisticsProps> = ({ contestStatus, onMenu
       <div className="flex flex-col md:flex-row gap-4 md:justify-between md:items-center border-b border-primary-2 pb-4">
         <ProposalStatisticsPanel submissionsCount={submissionsCount} contestStatus={contestStatus} />
         {submissionsCount > 1 ? (
-          <SortProposalsDropdown
-            defaultValue={sortBy ?? ""}
-            onChange={handleSortTypeChange}
-            onMenuStateChange={onMenuStateChange}
-          />
+          <SortProposalsDropdown defaultValue={sortBy ?? ""} onChange={handleSortTypeChange} />
         ) : null}
       </div>
     </div>
diff --git a/packages/react-app-revamp/components/_pages/Create/components/DefaultDropdown/index.tsx b/packages/react-app-revamp/components/_pages/Create/components/DefaultDropdown/index.tsx
index 8a4e6f09a..6a748883b 100644
--- a/packages/react-app-revamp/components/_pages/Create/components/DefaultDropdown/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/components/DefaultDropdown/index.tsx
@@ -13,16 +13,9 @@ interface CreateDefaultDropdownProps {
   defaultOption: Option;
   className?: string;
   onChange?: (option: string) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
-const CreateDefaultDropdown: FC<CreateDefaultDropdownProps> = ({
-  options,
-  defaultOption,
-  className,
-  onChange,
-  onMenuStateChange,
-}) => {
+const CreateDefaultDropdown: FC<CreateDefaultDropdownProps> = ({ options, defaultOption, className, onChange }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
 
   useEffect(() => {
@@ -37,8 +30,6 @@ const CreateDefaultDropdown: FC<CreateDefaultDropdownProps> = ({
   return (
     <Menu as="div" className="relative inline-block">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
         return (
           <>
             <MenuButton className="flex items-center bg-neutral-14 cursor-pointer w-48 md:w-[216px] h-10 rounded-[5px] px-4 py-2">
diff --git a/packages/react-app-revamp/components/_pages/Create/components/TemplateDropdown/index.tsx b/packages/react-app-revamp/components/_pages/Create/components/TemplateDropdown/index.tsx
index 8381e4ddc..d96fc01c5 100644
--- a/packages/react-app-revamp/components/_pages/Create/components/TemplateDropdown/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/components/TemplateDropdown/index.tsx
@@ -13,15 +13,9 @@ interface CreateTemplateDropdownProps {
   options: TemplateOption[];
   className?: string;
   onChange?: (option: TemplateType) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
-const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({
-  options,
-  className,
-  onChange,
-  onMenuStateChange,
-}) => {
+const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({ options, className, onChange }) => {
   const [selectedOption, setSelectedOption] = useState<TemplateOption | null>(null);
 
   const handleOptionChange = (option: TemplateOption) => {
@@ -32,8 +26,6 @@ const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({
   return (
     <Menu as="div" className="relative inline-block w-full md:w-[240px]">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
         return (
           <>
             <MenuButton className="flex items-center bg-transparent cursor-pointer w-full pb-2 border-b border-neutral-11">
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Dropdown/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Dropdown/index.tsx
index a22c10f54..e6d117179 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Dropdown/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Dropdown/index.tsx
@@ -8,7 +8,6 @@ interface ContestParamsMetadataFieldsDropdownProps {
   defaultOption: Option;
   className?: string;
   onChange?: (option: string) => void;
-  onMenuStateChange?: (isOpen: boolean) => void;
 }
 
 const ContestParamsMetadataFieldsDropdown: FC<ContestParamsMetadataFieldsDropdownProps> = ({
@@ -16,7 +15,6 @@ const ContestParamsMetadataFieldsDropdown: FC<ContestParamsMetadataFieldsDropdow
   defaultOption,
   className,
   onChange,
-  onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
 
@@ -32,8 +30,6 @@ const ContestParamsMetadataFieldsDropdown: FC<ContestParamsMetadataFieldsDropdow
   return (
     <Menu as="div" className="relative inline-block">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
         return (
           <>
             <MenuButton className="flex items-center bg-neutral-14 cursor-pointer w-48 md:w-[216px] h-10 rounded-lg px-4 py-2">
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Fields/components/Field/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Fields/components/Field/index.tsx
index 5ffcf755d..59f1b8db7 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Fields/components/Field/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Fields/components/Field/index.tsx
@@ -1,6 +1,6 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { MetadataField, useDeployContestStore } from "@hooks/useDeployContest/store";
-import { FC, useState } from "react";
+import { FC } from "react";
 import { useMediaQuery } from "react-responsive";
 import ContestParamsMetadataFieldsDropdown from "../../../Dropdown";
 import { fieldsDropdownOptions, metadataFields } from "../../utils";
@@ -13,7 +13,6 @@ interface ContestParamsMetadataFieldProps {
 const ContestParamsMetadataField: FC<ContestParamsMetadataFieldProps> = ({ index, field }) => {
   const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
   const { setMetadataFields } = useDeployContestStore();
-  const [fadeBg, setFadeBg] = useState(false);
 
   const handleDropdownChange = (option: string) => {
     const selectedField = metadataFields.find(f => f.metadataType === option);
@@ -57,12 +56,9 @@ const ContestParamsMetadataField: FC<ContestParamsMetadataFieldProps> = ({ index
             options={fieldsDropdownOptions}
             defaultOption={fieldsDropdownOptions.find(o => o.value === field.metadataType)!}
             onChange={handleDropdownChange}
-            onMenuStateChange={setFadeBg}
           />
         </div>
-        <div className={`${fadeBg ? "opacity-30" : "opacity-100"}`}>
-          {isMobile ? field.description.mobile : field.description.desktop}
-        </div>
+        {isMobile ? field.description.mobile : field.description.desktop}
       </div>
       <div className="flex flex-col gap-2">
         <p className="text-[16px] text-neutral-11 font-bold uppercase">field prompt</p>
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestSubmission/components/SubmissionRequirements/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestSubmission/components/SubmissionRequirements/index.tsx
index 341179642..47a076e6b 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestSubmission/components/SubmissionRequirements/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestSubmission/components/SubmissionRequirements/index.tsx
@@ -36,24 +36,14 @@ const CreateSubmissionRequirements = () => {
   } = useDeployContestStore(state => state);
   const onNextStep = useNextStep();
   const [inputError, setInputError] = useState<Record<string, string | undefined>>({});
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const renderLayout = () => {
     //TODO: see why content jumps when dropdown changes
     switch (submissionRequirementsOption.value) {
       case "erc721":
-        return (
-          <div className={`${isDropdownOpen ? "opacity-20 transition-opacity duration-300 ease-in-out" : ""}`}>
-            <CreateSubmissionRequirementsNftSettings error={inputError} />
-          </div>
-        );
-
+        return <CreateSubmissionRequirementsNftSettings error={inputError} />;
       case "erc20":
-        return (
-          <div className={`${isDropdownOpen ? "opacity-20 transition-opacity duration-300 ease-in-out" : ""}`}>
-            <CreateSubmissionRequirementsTokenSettings error={inputError} />
-          </div>
-        );
+        return <CreateSubmissionRequirementsTokenSettings error={inputError} />;
       default:
         return null;
     }
@@ -205,7 +195,6 @@ const CreateSubmissionRequirements = () => {
           options={options}
           className="w-48 md:w-[240px]"
           onChange={onSubmissionRequirementsOptionChange}
-          onMenuStateChange={value => setIsDropdownOpen(value)}
         />
         {renderLayout()}
       </div>
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/SubmissionPeriod/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/SubmissionPeriod/index.tsx
index 3aca4b3c4..711bed0a6 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/SubmissionPeriod/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/SubmissionPeriod/index.tsx
@@ -19,7 +19,6 @@ const CreateSubmissionPeriod = () => {
     useTimingOptionForSubmissionPeriod(state => state);
   const { timingOption: votingPeriodTimingOption, setTimingOption: setVotingPeriodTimingOption } =
     useTimingOptionForVotingPeriod(state => state);
-  const [hideDatePickers, setHideDatePickers] = useState<boolean>(false);
 
   const onSubmissionDateChange = (value: Date) => {
     setSubmissionOpen(value);
@@ -104,14 +103,9 @@ const CreateSubmissionPeriod = () => {
           defaultOption={submissionPeriodTimingOption}
           className="w-48 md:w-[216px]"
           onChange={option => onTimingPeriodChange(option)}
-          onMenuStateChange={state => setHideDatePickers(state)}
         />
       </div>
-      <div
-        className={`flex flex-col gap-8 border-l border-neutral-11 pl-6 ${
-          hideDatePickers ? "opacity-20" : "opacity-100"
-        }`}
-      >
+      <div className={`flex flex-col gap-8 border-l border-neutral-11 pl-6`}>
         <div className="flex flex-col gap-4">
           <p className="text-[16px] font-bold text-neutral-11 uppercase">opens</p>
           <CreateDatePicker onChange={onSubmissionDateChange} defaultDate={submissionOpen} minDate={new Date()} />
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx
index a4c769f36..b131b4d49 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx
@@ -9,7 +9,6 @@ const CreateVotingPeriod = () => {
   const { votingClose, setVotingClose, errors, step, votingOpen } = useDeployContestStore(state => state);
   const currentStepError = errors.find(error => error.step === step);
   const currentVotesOpenError = currentStepError?.message.startsWith("Voting ends") ? currentStepError.message : "";
-  const [hideDatePickers, setHideDatePickers] = useState<boolean>(false);
   const { timingOption, setTimingOption } = useTimingOptionForVotingPeriod(state => state);
   const formattedVoteOpen = moment(votingOpen).format("MMMM D, YYYY h:mm A z");
 
@@ -41,15 +40,10 @@ const CreateVotingPeriod = () => {
           options={timingPeriodsOptions}
           defaultOption={timingOption}
           className="w-48 md:w-[216px]"
-          onMenuStateChange={state => setHideDatePickers(state)}
           onChange={option => onTimingPeriodChange(option)}
         />
       </div>
-      <div
-        className={`flex flex-col gap-8 border-l border-neutral-11 pl-6 ${
-          hideDatePickers ? "opacity-20" : "opacity-100"
-        }`}
-      >
+      <div className={`flex flex-col gap-8 border-l border-neutral-11 pl-6`}>
         <div className="flex flex-col gap-4">
           <p className="text-[16px] font-bold text-neutral-11 uppercase">opens</p>
           <div className="flex flex-col gap-2">
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx
index 7857bff8e..cd1498967 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx
@@ -24,7 +24,6 @@ const CreateContestTemplate = () => {
   const { step: currentStep, setStep } = useDeployContestStore(state => state);
   const setContestTemplateConfig = useSetContestTemplate();
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateType | "">("");
-  const [fadeBg, setFadeBg] = useState(false);
   const [showStepper, setShowStepper] = useState(false);
   const [isFullMode, setIsFullMode] = useState(false);
   const isMobileOrTablet = useMediaQuery({ maxWidth: 1024 });
@@ -78,11 +77,8 @@ const CreateContestTemplate = () => {
         options={templateOptions}
         className="w-full md:w-[240px]"
         onChange={value => setSelectedTemplate(value)}
-        onMenuStateChange={setFadeBg}
       />
-      <div
-        className={`flex flex-col gap-12 ${fadeBg ? "opacity-50" : "opacity-100"} mt-4 transition-opacity duration-300 ease-in-out `}
-      >
+      <div className={`flex flex-col gap-12 mt-4`}>
         {selectedTemplate ? <GeneralTemplate templateType={selectedTemplate} /> : null}
         {isMobileOrTablet ? (
           <MobileBottomButton>
diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx
index 55b1272fc..3d9ea254d 100644
--- a/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx
+++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx
@@ -49,7 +49,6 @@ const CreateVotingRequirements = () => {
   const [inputError, setInputError] = useState<Record<string, string | undefined>>({});
   const onNextStep = useNextStep();
   const submittersAsVoters = submissionTypeOption.value === SubmissionType.SameAsVoters;
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { isConnected, chain } = useAccount();
   const {
     isError: isChargeDetailsError,
@@ -109,25 +108,15 @@ const CreateVotingRequirements = () => {
   const renderLayout = () => {
     switch (votingRequirementsOption.value) {
       case "erc721":
-        return (
-          <div className={`${isDropdownOpen ? "opacity-20 transition-opacity duration-300 ease-in-out" : ""}`}>
-            <CreateVotingRequirementsNftSettings error={inputError} />
-          </div>
-        );
+        return <CreateVotingRequirementsNftSettings error={inputError} />;
       case "erc20":
-        return (
-          <div className={`${isDropdownOpen ? "opacity-20 transition-opacity duration-300 ease-in-out" : ""}`}>
-            <CreateVotingRequirementsTokenSettings error={inputError} />
-          </div>
-        );
+        return <CreateVotingRequirementsTokenSettings error={inputError} />;
       default:
         return (
-          <div className={`${isDropdownOpen ? "opacity-20 transition-opacity duration-300 ease-in-out" : ""}`}>
-            <p className="text-[16px] animate-appear">
-              <b>note: </b>by letting anyone vote, you’ll need to set a <br />
-              charge-per-vote to prevent bots from voting.
-            </p>
-          </div>
+          <p className="text-[16px] animate-appear">
+            <b>note: </b>by letting anyone vote, you’ll need to set a <br />
+            charge-per-vote to prevent bots from voting.
+          </p>
         );
     }
   };
@@ -382,7 +371,6 @@ const CreateVotingRequirements = () => {
               options={votingDropdownRequirementsOptions}
               className="w-60 md:w-[240px]"
               onChange={onRequirementChange}
-              onMenuStateChange={value => setIsDropdownOpen(value)}
             />
             {renderLayout()}
           </>
diff --git a/packages/react-app-revamp/components/_pages/ListContests/index.tsx b/packages/react-app-revamp/components/_pages/ListContests/index.tsx
index 4375660e4..3e23eb565 100644
--- a/packages/react-app-revamp/components/_pages/ListContests/index.tsx
+++ b/packages/react-app-revamp/components/_pages/ListContests/index.tsx
@@ -44,7 +44,6 @@ export const ListContests: FC<ListContestsProps> = ({
   onSearchChange,
   onSortChange,
 }) => {
-  const [fadeBg, setFadeBg] = useState(false);
   const [totalCount, setTotalCount] = useState<number | null>(null);
 
   useEffect(() => {
@@ -90,7 +89,7 @@ export const ListContests: FC<ListContestsProps> = ({
 
           {sortOptions && totalCount !== null && (
             <div className="order-2 md:order-none">
-              <Sort sortOptions={sortOptions} onSortChange={onSortChange} onMenuStateChange={setFadeBg} />
+              <Sort sortOptions={sortOptions} onSortChange={onSortChange} />
             </div>
           )}
         </div>
@@ -110,7 +109,7 @@ export const ListContests: FC<ListContestsProps> = ({
             No contests found
           </div>
         ) : (
-          <div className={`${fadeBg ? "opacity-50" : "opacity-100"}`}>
+          <div>
             {isPaginationLoading
               ? placeholders.map((_, index) => (
                   <Contest
diff --git a/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx b/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx
index fef9ae31b..a46bcb494 100644
--- a/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx
+++ b/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx
@@ -62,7 +62,6 @@ const LayoutViewContest = ({ children }: { children: React.ReactNode }) => {
   const [tab, setTab] = useState<Tab>(Tab.Contest);
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const bugReportLink = populateBugReportLink(url?.href ?? "", accountAddress ?? "", error ?? "");
-  const [fadeBg, setFadeBg] = useState(false);
 
   useAccountEffect({
     onConnect(data) {
@@ -253,12 +252,7 @@ const LayoutViewContest = ({ children }: { children: React.ReactNode }) => {
                           <Image src="/forward.svg" alt="share" width={15} height={13} />
                         </div>
                       ) : (
-                        <ShareDropdown
-                          contestAddress={address}
-                          chain={chainName}
-                          contestName={contestName}
-                          onMenuStateChange={setFadeBg}
-                        />
+                        <ShareDropdown contestAddress={address} chain={chainName} contestName={contestName} />
                       )}
 
                       <div
@@ -269,7 +263,7 @@ const LayoutViewContest = ({ children }: { children: React.ReactNode }) => {
                       </div>
                     </div>
                   </div>
-                  <div className={`${fadeBg ? "opacity-30" : "opacity-100"}`}>
+                  <div>
                     <div className="mt-8 mb-8 gap-3 flex flex-col">
                       <ContestTabs tab={tab} onChange={tab => setTab(tab)} />
                     </div>