Merge pull request #499 from persistenceOne/tnc

update banner
persistenceOne · Jan 2, 2024 · b3eaea8 · b3eaea8
2 parents af25b27 + 777667a
commit b3eaea8
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 32 deletions.
diff --git a/src/assets/scss/index.css b/src/assets/scss/index.css
diff --git a/src/assets/scss/index.css.map b/src/assets/scss/index.css.map
diff --git a/src/assets/scss/views/_header.scss b/src/assets/scss/views/_header.scss
@@ -87,14 +87,18 @@
 .top-banner-section{
   background: #e50913;
   text-align: center;
-  padding: 5px 40px 5px 0;
+  padding: 7px 40px 7px 0;
   position: relative;
+  &.initial-banner{
+    border-bottom: 1px solid #ff3b3b
+  }
   .content{
     color: #FFFFFF;
     font-size: 12px;
     margin: 0;
-    &:hover{
+    .link{
       text-decoration: underline;
+      color: #FFFFFF;
     }
     .icon{
       margin-left: 10px;
@@ -112,7 +116,7 @@
     cursor: pointer;
     position: absolute;
     right: 20px;
-    top: 12px;
+    top: 10px;
   }
 
 }
diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js
@@ -29,6 +29,7 @@ const countries = [
 ];
 const Banner = () => {
   const [banner, setBanner] = useState(true);
+  const [bannerOne, setBannerOne] = useState(true);
   const workerUrl = "https://worker-geofence.auditdev.workers.dev/";
   const [country, setCountry] = useState("");
 
@@ -44,40 +45,87 @@ const Banner = () => {
   const closeBanner = () => {
     setBanner(false);
   };
+
+  const closeBannerOne = () => {
+    setBannerOne(false);
+  };
+
   if (countries.includes(country)) {
     return (
-      <div className={"top-banner-section"}>
-        <p style={{ color: "#FFFFFF", fontSize: "12px", margin: "0" }}>
-          <b>IMPORTANT NOTICE:</b> Please note that from 15 January 2024,
-          applications on the persistence.one domain will no longer be
-          accessible from your location. See more details{" "}
+      <div>
+        <div className={"top-banner-section initial-banner"}>
+          <p className="content">
+            <b>IMPORTANT NOTICE:</b> Please note that from 1 February 2024,
+            applications on the persistence.one domain will no longer be
+            accessible from your location. See more details{" "}
+            <a
+              href="https://geofence-notice.pages.dev/?ref=persistence"
+              target="_blank"
+              className={"link"}
+              rel="noopener noreferrer"
+              style={{ textDecoration: "underline", color: "#FFFFFF" }}
+            >
+              here.
+            </a>
+          </p>
+        </div>
+        <div className={!bannerOne ? "d-none" : "top-banner-section"}>
+          <p className="content">
+            Users being affected by geo-blocking can continue to access their
+            tokens via Keplr, Cosmostation, or Leap wallet. Learn more{" "}
+            <a
+              className={"link"}
+              href="https://blog.persistence.one/2023/12/28/how-to-transfer-staked-xprt-from-pwallet-to-keplr-leap-wallet-instantly/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              here.
+            </a>
+          </p>
+          <div onClick={closeBannerOne}>
+            <Icon viewClass="close" icon="close" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <div
+        className={!bannerOne ? "d-none" : "top-banner-section initial-banner"}
+      >
+        <p className="content">
+          Users being affected by geo-blocking can continue to access their
+          tokens via Keplr, Cosmostation, or Leap wallet. Learn more{" "}
           <a
-            className="content"
-            href="https://geofence-notice.pages.dev/?ref=persistence"
+            className={"link"}
+            href="https://blog.persistence.one/2023/12/28/how-to-transfer-staked-xprt-from-pwallet-to-keplr-leap-wallet-instantly/"
             target="_blank"
             rel="noopener noreferrer"
-            style={{ textDecoration: "underline", color: "#FFFFFF" }}
           >
             here.
           </a>
         </p>
+        <div onClick={closeBannerOne}>
+          <Icon viewClass="close" icon="close" />
+        </div>
       </div>
-    );
-  }
-  return (
-    <div className={!banner ? "d-none" : "top-banner-section"}>
-      <a
-        className="content"
-        href="https://blog.persistence.one/2023/12/31/how-to-cancel-xprt-unstaking-on-pwallet-and-keplr/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        You can now cancel your XPRT unbonding process at any time using
-        pWallet. Read more here.
-        <Icon viewClass="right-arrow" icon="right-arrow" />
-      </a>
-      <div onClick={closeBanner}>
-        <Icon viewClass="close" icon="close" />
+      <div className={!banner ? "d-none" : "top-banner-section"}>
+        <p className="content">
+          You can now cancel your XPRT unbonding process at any time using
+          pWallet. Read more{" "}
+          <a
+            className="link"
+            href="https://blog.persistence.one/2023/12/31/how-to-cancel-xprt-unstaking-on-pwallet-and-keplr/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            here.
+          </a>
+        </p>
+        <div onClick={closeBanner}>
+          <Icon viewClass="close" icon="close" />
+        </div>
       </div>
     </div>
   );