enhancement: add rewards at the top for mobile in contest page (#2199)

jk-labs-inc · Aug 24, 2024 · 834d85a · 834d85a
1 parent ba76d76
commit 834d85a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/RewardsInfo/index.tsx
@@ -142,12 +142,7 @@ const ContestRewardsInfo: FC<ContestRewardsInfoProps> = ({ rewardsModuleAddress,
               {formatBalance(currentUnpaidToken.tokenBalance)} $
               <span className="uppercase mr-1 truncate inline-block overflow-hidden">{currentUnpaidSymbol}</span>
             </div>
-
-            {!isMobile ? (
-              <>
-                to {payees.length} {payees.length > 1 ? "winners" : "winner"}
-              </>
-            ) : null}
+            to {payees.length} {payees.length > 1 ? "winners" : "winner"}
           </span>
         </div>
       ) : currentPaidToken ? (

diff --git a/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx b/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx
@@ -202,17 +202,22 @@ const LayoutViewContest = ({ children }: { children: React.ReactNode }) => {
                 )}
                 <div className="animate-reveal pt-3 md:pt-0">
                   <div className="flex flex-col mt-6 md:mt-10 gap-4">
-                    <ContestName contestName={contestName} address={address} chainName={chainName} />
+                    <div className="flex flex-col gap-2">
+                      {isMobile && rewardsModuleAddress && rewardsAbi ? (
+                        <div className="w-2/3">
+                          <ContestRewardsInfo rewardsModuleAddress={rewardsModuleAddress} rewardsAbi={rewardsAbi} />
+                        </div>
+                      ) : null}
+                      <ContestName contestName={contestName} address={address} chainName={chainName} />
+                    </div>
 
-                    <div
-                      className={`flex flex-row ${rewardsModuleAddress && rewardsAbi ? "justify-between" : "gap-3"} md:justify-normal md:gap-4 items-center`}
-                    >
+                    <div className={`flex flex-row gap-3 md:gap-4 items-center`}>
                       <UserProfileDisplay
                         ethereumAddress={contestAuthorEthereumAddress}
                         shortenOnFallback
                         textualVersion={isMobile}
                       />
-                      {rewardsModuleAddress && rewardsAbi ? (
+                      {!isMobile && rewardsModuleAddress && rewardsAbi ? (
                         <ContestRewardsInfo rewardsModuleAddress={rewardsModuleAddress} rewardsAbi={rewardsAbi} />
                       ) : null}
                       {isMobile ? (