remove react-tooltip

ripple · Oct 30, 2024 · 9b2a663 · 9b2a663
1 parent 8e5bc75
commit 9b2a663
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "react-redux": "^8.1.3",
     "react-router": "^6.12.1",
     "react-router-dom": "^6.26.1",
-    "react-tooltip": "^5.28.0",
     "react18-json-view": "^0.2.8",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",

diff --git a/src/containers/Header/Search.tsx b/src/containers/Header/Search.tsx
@@ -157,6 +157,26 @@ const normalizeAccount = (id: string) => {
   return id
 }
 
+const SearchBanner = (setIsBannerVisible) => (
+  <div className="banner-wrapper">
+    <div className="banner">
+      <div className="banner-content">
+        <div>
+          Token search by name and account is now available! Try searching for
+          USD
+        </div>
+        <button
+          className="banner-button"
+          type="button"
+          onClick={() => setIsBannerVisible(false)}
+        >
+          <img src={CloseIcon} alt="close-icon" width={10} height={10} />
+        </button>
+      </div>
+    </div>
+  </div>
+)
+
 export interface SearchProps {
   callback?: Function
 }
@@ -193,35 +213,17 @@ export const Search = ({ callback = () => {} }: SearchProps) => {
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       setIsBannerVisible(false)
-    }, 10000) // Disappear after 10 seconds
+    }, 100000) // Disappear after 10 seconds
 
     return () => clearTimeout(timeoutId)
   }, [])
 
   return (
-    <div>
-      <ReactTooltip
-        className="banner"
-        id="my-tooltip-styles"
-        place="top"
-        isOpen={isBannerVisible}
-        clickable
-      >
-        <div className="banner-content">
-          <div>
-            Token search by name and account is now available! Try searching for
-            USD
-          </div>
-          <button
-            className="banner-button"
-            type="button"
-            onClick={() => setIsBannerVisible(false)}
-          >
-            <img src={CloseIcon} alt="close-icon" width={10} height={10} />
-          </button>
-        </div>
-      </ReactTooltip>
-      <div data-tooltip-id="my-tooltip-styles" className="search">
+    <div className="search container">
+      {isBannerVisible && (
+        <SearchBanner setIsBannerVisible={setIsBannerVisible} />
+      )}
+      <div className="search">
         <input
           type="text"
           placeholder={t('header.search.placeholder')}

diff --git a/src/containers/Header/search.scss b/src/containers/Header/search.scss
@@ -1,5 +1,9 @@
 @import '../shared/css/variables';
 
+.search-container {
+  position: relative;
+}
+
 .search {
   display: inline-block;
   width: 100%;
@@ -44,11 +48,20 @@
 }
 
 .banner {
+  position: absolute;
+  top: -60px;
+  left: 10%;
+  width: 80%;
+  max-width: 600px;
+  padding: 12px 16px;
+  border-radius: 4px;
   background-color: $blue-purple-30 !important;
   color: $black !important;
 
   .banner-content {
     display: flex;
+    justify-content: space-between;
+    font-size: 12px;
   }
 
   .banner-button {
@@ -62,4 +75,18 @@
     color: inherit;
   }
 
+  @media (width >= 1350px) {
+    top: -50px;
+  }
+}
+
+.banner::after {
+  position: absolute;
+  top: 100%;
+  left: 30%;
+  border-width: 8px;
+  border-style: solid;
+  border-color: $blue-purple-30 transparent transparent transparent;
+  content: "";
+  transform: translateX(-50%);
 }