alternative widget option

Author: raclim

client/modules/IDE/pages/IDEView.jsx

@@ -116,17 +116,11 @@ const IDEView = () => {
   };
 
   const Banner = () => {
-    // temporary banner to display funding opportunities
-    const textObj = {
-      copy:
-        'Help us raise $20K to continue our mission of building equitable and accessible creative coding tools!',
-      url: 'https://p5js.org/donate/'
-    };
-
     const [isBannerVisible, setIsBannerVisible] = useState(true);
 
-    // eslint-disable-next-line consistent-return
     useEffect(() => {
+      if (!isBannerVisible) return;
+
       const script = document.createElement('script');
       script.type = 'text/javascript';
       script.defer = true;
@@ -148,6 +142,7 @@ const IDEView = () => {
 
       document.body.appendChild(script);
 
+      // eslint-disable-next-line consistent-return
       return () => {
         const existingScript = document.getElementById(
           'donorbox-popup-button-installer'
@@ -156,7 +151,7 @@ const IDEView = () => {
           existingScript.remove();
         }
       };
-    }, []);
+    }, [isBannerVisible]);
 
     const handleCloseBanner = () => {
       setIsBannerVisible(false);
@@ -174,18 +169,49 @@ const IDEView = () => {
       }
     };
 
-    return (
-      isBannerVisible && (
-        <div className="banner">
-          <a href={textObj.url} target="_blank" rel="noopener noreferrer">
-            {textObj.copy}
-          </a>
-          <button className="banner-close-button" onClick={handleCloseBanner}>
-            <CrossIcon />
-          </button>
-        </div>
-      )
-    );
+    return isBannerVisible ? (
+      <div
+        style={{
+          position: 'fixed',
+          top: '0',
+          right: '23%',
+          zIndex: 10000,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          padding: '8px 18px',
+          borderRadius: '5px'
+        }}
+      >
+        <button
+          style={{
+            background: 'transparent',
+            border: 'none',
+            color: 'white',
+            fontSize: '16px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            fontFamily: 'Verdana, sans-serif',
+            padding: '8px 22px 8px 18px',
+            borderRadius: '0px 0px 5px 5px',
+            gap: '8px',
+            width: 'fit-content',
+            lineHeight: '24px',
+            position: 'fixed',
+            top: '61%',
+            left: '20px',
+            transform: 'translate(-50%, -50%) rotate(-90deg)',
+            zIndex: 9999,
+            overflow: 'hidden'
+          }}
+          onClick={handleCloseBanner}
+          aria-label="Close Banner"
+        >
+          <CrossIcon />
+        </button>
+      </div>
+    ) : null;
   };
 
   useEffect(() => {

client/styles/layout/_ide.scss

@@ -21,42 +21,6 @@
   height: 100%;
 }
 
-.banner {
-  width: 100%;
-  min-height: 2.2rem;
-  text-align: center;
-  padding: 0.5rem;
-  font-weight: bold;
-  border-bottom: 1px dashed #A6A6A6;
-  color: #FFF;
-
-  // @include themify() {
-  //   background-color: getThemifyVariable('logo-color');
-  //   & a {
-  //     color: getThemifyVariable('logo-background-color');
-  //   }
-  // }
-
-  @media (max-width: 770px) {
-    min-height: 3.3rem;
-  }
-}
-
-.banner-close-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center; 
-  justify-content: center;
-  height: 20px;
-  width:20px;
-  float: right;
-
-  // & path {
-  //   @include themify() {
-  //     fill: getThemifyVariable('logo-background-color');
-  //   }
-  // }
-}
 
 @media print {
   .sidebar {