Merge pull request #25 from PotLock/feat/live-round

update live round banner
PotLock · May 2, 2024 · 0296933 · 0296933
2 parents 2ec6503 + bf09b1f
commit 0296933
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 52 deletions.
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -1,12 +1,16 @@
 import PotSDK from "@app/SDK/pot";
 import PotFactorySDK from "@app/SDK/potfactory";
-import { useEffect, useState } from "alem";
+import { getLocation, useEffect, useState } from "alem";
 import { Container, Wrapper } from "./styles";
 import hrefWithParams from "@app/utils/hrefWithParams";
+import ReferrerIcon from "@app/assets/svgs/ReferrerIcon";
 
 const Banner = () => {
   const [activeRounds, setActiveRounds] = useState<any>([]);
 
+  const { pathname } = getLocation();
+  const showLiveBanner = !(pathname === "pots" || pathname === "pot");
+
   const pots = PotFactorySDK.getPots();
 
   const now = Date.now();
@@ -45,24 +49,25 @@ const Banner = () => {
   const textForMultipleRounds = `Pot round is live for ${potName} and +${activeRounds.length - 1} More`;
 
   if (!activeRounds.length) return "";
-  return (
+  return showLiveBanner ? (
     <Wrapper>
       <Container>
-        <div className="text">
-          {isSingleRound ? textForOneRound : textForMultipleRounds}
-          <a
-            href={hrefWithParams(isSingleRound ? `?tab=pot&potId=${activeRounds[0].pot_id}` : `?tab=pots`)}
-            className="link"
-          >
-            {isSingleRound ? "Donate" : "Check Now"}
-            <img
-              src="https://ipfs.near.social/ipfs/bafkreigots5l4o5d3a4zksfimch3gvqw7ezb2quundmjwml33abo5atgwi"
-              alt="arrow"
-            />
-          </a>
+        <div>
+          <div className="text">
+            {isSingleRound ? textForOneRound : textForMultipleRounds}
+            <a
+              href={hrefWithParams(isSingleRound ? `?tab=pot&potId=${activeRounds[0].pot_id}` : `?tab=pots`)}
+              className="link"
+            >
+              <ReferrerIcon />
+              Donate now
+            </a>
+          </div>
         </div>
       </Container>
     </Wrapper>
+  ) : (
+    ""
   );
 };
 

diff --git a/src/components/Banner/styles.ts b/src/components/Banner/styles.ts
@@ -1,63 +1,66 @@
 import styled from "styled-components";
 
 export const Wrapper = styled.div`
-  height: 48px;
-  @media screen and (max-width: 768px) {
-    height: 36px;
+  height: 46px;
+  width: 100%;
+  margin-top: 1rem;
+  @media screen and (max-width: 480px) {
+    height: 72px;
   }
 `;
 
 export const Container = styled.div`
-  width: 100%;
-  height: 48px;
-  bottom: 0;
-  left: 0;
   position: fixed;
   z-index: 999;
-  background: #7fc41e;
+  bottom: 0;
+  left: 0;
+  background: #faa7a8;
+  width: 100%;
+  height: 46px;
   color: white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   overflow: hidden;
+  font-size: 14px;
+  > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-blend-mode: overlay, normal;
+    background: radial-gradient(circle, #fef3f2 0%, #feefe0 55.1%, #f8d3b0 100%);
+  }
   .text {
-    font-size: 22px;
+    font-size: 14px;
     font-weight: 500;
-    letter-spacing: 0.015em;
-    text-transform: uppercase;
+    color: #192c07;
+    line-height: 150%;
     display: flex;
     gap: 1rem;
     .link {
       display: flex;
       align-items: center;
-      font-weight: 600;
-      gap: 4px;
-      color: white;
-      text-decoration: underline;
-      transition: transform 300ms ease-in-out;
-      img {
-        transition: rotate 300ms ease-in-out;
-        height: 1em;
-        width: fit-content;
-      }
-      :hover {
-        transform: translateX(4px);
-        img {
-          rotate: 45deg;
+      font-weight: 500;
+      gap: 8px;
+      color: #dd3345;
+      text-decoration: none;
+      svg {
+        height: 15px;
+        path {
+          fill: #f6767a;
+          transition: fill 300ms ease-in-out;
         }
       }
+      :hover svg path {
+        fill: #dd3345;
+      }
     }
   }
-  @media screen and (max-width: 992px) {
-    .text {
-      font-size: 1rem;
-    }
-  }
-  @media screen and (max-width: 768px) {
-    height: 36px;
+  @media screen and (max-width: 480px) {
+    height: 72px;
     .text {
-      font-size: 12px;
-      gap: 0.5rem;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
     }
   }
 `;
diff --git a/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx b/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx
@@ -19,7 +19,7 @@ const Table = ({ donations, totalAmount, totalUniqueDonors, title, allPayouts, p
         {totalAmount}
         <span>raised from</span>
         {totalUniqueDonors}
-        <span>{allPayouts?.length > 0 ? "donors" : "sponsors"}</span>
+        <span>{title === "sponsors" ? "sponsors" : "donors"}</span>
       </div>
       <div className="sort">
         <div className="title">Top {title} </div>