Staging => mian

src/components/Button.tsx

@@ -13,11 +13,13 @@ type Props = {
   stopPropagation?: boolean;
   style?: React.CSSProperties;
   target?: TargetValue;
+  key?: string;
   iconSrc?: string;
   children: string | React.ReactNode;
 };
 
 const Button = ({
+  key,
   type,
   varient,
   name,
@@ -45,6 +47,7 @@ const Button = ({
         style: style ?? {},
         target: target,
         ...(href ? { href } : {}),
+        ...(key ? { key } : {}),
         ...(name ? { name } : {}),
       }}
     >

src/modals/ModalOverlay.tsx

@@ -7,7 +7,7 @@ type Props = {
   overlayStyle?: React.CSSProperties;
 };
 
-const ModalOverlay = ({ children, onOverlayClick, contentStyle }: Props) => {
+const ModalOverlay = ({ children, onOverlayClick, contentStyle, overlayStyle }: Props) => {
   const ModalOverlay = styled.div`
     position: fixed;
     padding: 0 10px;
@@ -46,7 +46,7 @@ const ModalOverlay = ({ children, onOverlayClick, contentStyle }: Props) => {
   `;
 
   return (
-    <ModalOverlay style={contentStyle}>
+    <ModalOverlay style={overlayStyle}>
       <Screen onClick={onOverlayClick} />
       <ModalContent style={contentStyle}>{children}</ModalContent>
     </ModalOverlay>

src/pages/CreateProject/components/Profile/Profile.tsx

@@ -1,6 +1,5 @@
 import { Files, State, state } from "alem";
 import CameraIcon from "@app/assets/svgs/CameraIcon";
-import Button from "@app/components/Button";
 import Image from "@app/components/mob.near/Image";
 import constants from "@app/constants";
 import uploadFileUpdateState from "../../utils/uploadFileUpdateState";
@@ -35,45 +34,30 @@ const Profile = () => {
     <Container>
       <BackgroundImage>
         <Image image={backgroundImage} alt="profile background" fallbackUrl={IPFS_BASE_URL + fallbackImg} />
-        <Button type="standard" varient="outline" customClassName="btn-change-bg">
+        <Files
+          multiple={false}
+          accepts={["image/*"]}
+          minFileSize={1}
+          className="btn-change-bg"
+          clickable
+          onChange={handleBgChange}
+        >
           <CameraIcon />
           <span> Add cover photo</span>
-          <Files
-            multiple={false}
-            accepts={["image/*"]}
-            minFileSize={1}
-            style={{
-              zIndex: 1,
-              top: 0,
-              width: "100%",
-              height: "100%",
-              position: "absolute",
-            }}
-            clickable
-            onChange={handleBgChange}
-          />
-        </Button>
+        </Files>
       </BackgroundImage>
       <ProfileImage>
         <Image className="profile-image" image={profileImage} fallbackUrl={IPFS_BASE_URL + fallbackImg} />
-        <button className="btn-change-img">
+        <Files
+          multiple={false}
+          accepts={["image/*"]}
+          minFileSize={1}
+          className="btn-change-img"
+          clickable
+          onChange={handleImgChange}
+        >
           <CameraIcon />
-          <Files
-            multiple={false}
-            accepts={["image/*"]}
-            minFileSize={1}
-            style={{
-              position: "absolute",
-              width: "100%",
-              height: "100%",
-              zIndex: 1,
-              left: 0,
-              top: 0,
-            }}
-            clickable
-            onChange={handleImgChange}
-          ></Files>
-        </button>
+        </Files>
       </ProfileImage>
     </Container>
   );

src/pages/CreateProject/components/Profile/styles.ts

@@ -14,6 +14,7 @@ export const BackgroundImage = styled.div`
   width: 100%;
   border-radius: 6px;
   background: var(--Neutral-200);
+  caret-color: transparent;
   img {
     width: 100%;
     height: 100%;
@@ -25,9 +26,19 @@ export const BackgroundImage = styled.div`
     line-height: 142%;
   }
   .btn-change-bg {
+    z-index: 10;
     position: absolute;
     bottom: 1.5rem;
     right: 1.5rem;
+    background: white;
+    box-shadow: rgba(0, 0, 0, 0.22) 0px 0px 0px 1px inset, rgba(15, 15, 15, 0.15) 0px -1px 0px 0px inset,
+      rgba(5, 5, 5, 0.08) 0px 1px 2px -0.5px;
+    padding: 9px 16px;
+    display: flex;
+    gap: 8px;
+    border-radius: 6px;
+    transition: 200ms ease-in-out;
+    width: fit-content;
     cursor: pointer;
     svg {
       width: 18px;
@@ -54,6 +65,7 @@ export const ProfileImage = styled.div`
   border-radius: 50%;
   background: var(--Neutral-200);
   box-shadow: 0px 0px 0px 3px #fff, 0px 0px 0px 1px rgba(199, 199, 199, 0.22) inset;
+  caret-color: transparent;
   img {
     border-radius: 50%;
     width: 100%;

src/pages/Pot/components/Header/Header.tsx

@@ -44,6 +44,7 @@ const Header = () => {
   const [potDetail, setPotDetail] = useState<null | PotDetail>(null);
   const [allDonations, setAlldonations] = useState<null | PotDonation[]>(null);
   const [payoutsToProcess, setPayoutsToProcess] = useState<any>(null);
+
   // set fund mathcing pool success
   const [fundDonation, setFundDonation] = useState<null | ExtendedFundDonation>(null);
 
@@ -145,10 +146,9 @@ const Header = () => {
 
   const now = Date.now();
 
-  const cooldown_end_ms = _cooldown_end_ms ?? now + 1;
+  const cooldown_end_ms = _cooldown_end_ms ?? now + 1000;
 
   const publicRoundOpen = now >= public_round_start_ms && now < public_round_end_ms;
-  const publicRoundEnded = now > public_round_end_ms;
 
   const applicationOpen = now >= application_start_ms && now < application_end_ms;
 
@@ -158,9 +158,9 @@ const Header = () => {
     context.accountId && `&referrerId=${context.accountId}`
   }`;
 
-  const canPayoutsBeProcessed = userIsAdminOrGreater && now >= cooldown_end_ms && !all_paid_out;
+  const canPayoutsBeProcessed = userIsAdminOrGreater && cooldown_end_ms && !all_paid_out;
 
-  const canPayoutsBeSet = userIsChefOrGreater && !all_paid_out && publicRoundEnded;
+  const canPayoutsBeSet = userIsChefOrGreater && !all_paid_out && (now > cooldown_end_ms || !_cooldown_end_ms);
 
   const payoutsChallenges = PotSDK.getPayoutsChallenges(potId);
 
@@ -237,13 +237,21 @@ const Header = () => {
               {registrationApprovedOrNoRegistryProvider ? "Apply to pot" : `Project Registration ${registryStatus}`}
             </Button>
           )}
-          {now > public_round_end_ms && now < cooldown_end_ms && (
+          {now > public_round_end_ms && now < cooldown_end_ms && !!_cooldown_end_ms && (
             <Button varient="tonal" onClick={() => setShowChallengePayoutsModal(true)}>
               {existingChallengeForUser ? "Update challenge" : "Challenge payouts"}
             </Button>
           )}
-          {canPayoutsBeSet && <Button onClick={handleSetPayouts}> Set Payouts </Button>}
-          {canPayoutsBeProcessed && <Button onClick={handleProcessPayouts}>Process Payouts</Button>}
+          {canPayoutsBeSet && (
+            <Button key={"set-payout-btn"} onClick={handleSetPayouts}>
+              Set Payouts
+            </Button>
+          )}
+          {canPayoutsBeProcessed && (
+            <Button key={"process-payout-btn"} onClick={handleProcessPayouts}>
+              Process Payouts
+            </Button>
+          )}
         </ButtonsWrapper>
         <Referral>
           <CopyIcon textToCopy={potLink} />

src/pages/Pot/components/HeaderStatus/statsList.ts

@@ -6,11 +6,12 @@ const statsList = (potDetail: PotDetail) => {
     application_end_ms,
     public_round_start_ms,
     public_round_end_ms,
-    cooldown_end_ms,
+    cooldown_end_ms: _cooldown_end_ms,
     all_paid_out,
   } = potDetail;
 
   const now = Date.now();
+  const cooldown_end_ms = _cooldown_end_ms ?? now + 1000;
 
   const stats = [
     {
@@ -31,11 +32,11 @@ const statsList = (potDetail: PotDetail) => {
     },
     {
       label: "Challenge period",
-      daysLeft: cooldown_end_ms,
+      daysLeft: _cooldown_end_ms,
       started: now >= public_round_end_ms,
-      completed: now > cooldown_end_ms && !!cooldown_end_ms,
+      completed: now > cooldown_end_ms && !!_cooldown_end_ms,
       progress:
-        now > cooldown_end_ms && !!cooldown_end_ms
+        now > cooldown_end_ms && !!_cooldown_end_ms
           ? 1
           : (cooldown_end_ms - now) / (public_round_end_ms - cooldown_end_ms),
     },