From 1a85deea2468f7b8f8a15c19f0ed022cbac76e95 Mon Sep 17 00:00:00 2001
From: Yusuf Kehinde <yusufkehinde11@gmail.com>
Date: Thu, 26 Sep 2024 20:18:52 +0100
Subject: [PATCH] feat: added close callout btn

---
 components/WipCallout.tsx | 32 +++++++++++++++++++++++++-------
 styles/global.css         | 31 ++++++++++++++++++++-----------
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/components/WipCallout.tsx b/components/WipCallout.tsx
index ebd8590ba..c64f397cb 100644
--- a/components/WipCallout.tsx
+++ b/components/WipCallout.tsx
@@ -10,12 +10,19 @@
  * `context` is not provided, it will display a default maintenance message.
  */
 import type { ReactElement } from 'react';
+import { useState } from 'react';
+
 interface Props {
   context?: string;
 }
 export function WipCallout({ context }: Props): ReactElement {
+  const [closeCallout, setCloseCallout] = useState(false);
   return (
-    <div className="custom-callouts nx-w-full nx-mt-6 nx-flex nx-justify-center nx-items-center nx-bg-white dark:nx-bg-black">
+    <div
+      className={`custom-callouts nx-w-full nx-mt-6 nx-flex nx-justify-center nx-items-center nx-bg-white dark:nx-bg-black ${
+        closeCallout && 'nx-hidden'
+      }`}
+    >
       <div className="nx-w-full  nx-px-4 nx-text-center nx-font-medium nx-text-sm nx-text-left">
         {context ? (
           context
@@ -34,6 +41,12 @@ export function WipCallout({ context }: Props): ReactElement {
           </div>
         )}
       </div>
+      <button
+        className="callout-close-btn"
+        onClick={() => setCloseCallout(true)}
+      >
+        x
+      </button>
     </div>
   );
 }
@@ -46,11 +59,12 @@ export function InfoCallout({ context }: Props): ReactElement {
           context
         ) : (
           <div className="nx-text-left">
-            Interop is currently in <strong>active development</strong> and not yet ready for production use. 
-            The information provided here may change frequently. 
+            Interop is currently in <strong>active development</strong> and not
+            yet ready for production use. The information provided here may
+            change frequently.
             <p>
-            We recommend checking back 
-            regularly for the most up-to-date information.
+              We recommend checking back regularly for the most up-to-date
+              information.
             </p>
           </div>
         )}
@@ -67,8 +81,12 @@ export function AltCallout({ context }: Props): ReactElement {
           context
         ) : (
           <div className="nx-text-left">
-            The Alt-DA Mode feature is currently in <strong>Beta</strong>  within the MIT-licensed OP Stack. Beta features are built and reviewed by the Optimism Collective’s core contributors, and provide developers with early access to highly requested configurations.
-These features may experience stability issues, and we encourage feedback from our early users.
+            The Alt-DA Mode feature is currently in <strong>Beta</strong> within
+            the MIT-licensed OP Stack. Beta features are built and reviewed by
+            the Optimism Collective’s core contributors, and provide developers
+            with early access to highly requested configurations. These features
+            may experience stability issues, and we encourage feedback from our
+            early users.
           </div>
         )}
       </div>
diff --git a/styles/global.css b/styles/global.css
index 5927869a4..37060350c 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -54,13 +54,13 @@ span.shasum code {
 }
 
 div.custom-callouts {
-  position: static;
-  top: 45px;
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 65px;
+  padding: 5px;
   background-color: #fefce8;
   border: 2px solid #ffdc00;
+  z-index: 9999;
   border-radius: 4px;
 }
 a.callout-link {
@@ -68,12 +68,6 @@ a.callout-link {
   text-decoration: underline;
 }
 
-@media only screen and (max-width: 767px) {
-  div.custom-callouts {
-    top: 105px;
-  }
-}
-
 html.dark div.custom-callouts {
   color: white;
   background-color: #432c11;
@@ -81,3 +75,18 @@ html.dark div.custom-callouts {
 html.dark a.callout-link {
   color: #008ae6;
 }
+.callout-close-btn {
+  position: absolute;
+  top: -9px;
+  right: -9px;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background-color: #fefce8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #ffdc00;
+  color: red;
+  font-size: 14px;
+}