From 0284830085eaa8d9fe70c17194d0e9d65cbbbed0 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Fri, 21 Jan 2022 12:28:50 +0530
Subject: [PATCH] refactor tooltip styling

---
 src/components/pages/gallery/Collections.tsx | 19 ++-----------------
 src/pages/_app.tsx                           | 14 +++++++++-----
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/gallery/Collections.tsx b/src/components/pages/gallery/Collections.tsx
index e0380c7f1..55c2ac4e9 100644
--- a/src/components/pages/gallery/Collections.tsx
+++ b/src/components/pages/gallery/Collections.tsx
@@ -180,23 +180,8 @@ export default function Collections(props: CollectionProps) {
     const renderTooltip = (collectionID: number) => {
         const fileCount = props.collectionFilesCount?.get(collectionID) ?? 0;
         return (
-            <Tooltip
-                style={{
-                    padding: '0',
-                    paddingBottom: '5px',
-                }}
-                id="button-tooltip">
-                <div
-                    style={{
-                        backgroundColor: '#282828',
-                        padding: '2px 10px',
-                        margin: 0,
-                        color: '#ddd',
-                        borderRadius: 3,
-                        fontSize: '12px',
-                    }}>
-                    {fileCount} {fileCount > 1 ? 'items' : 'item'}
-                </div>
+            <Tooltip id="button-tooltip">
+                {fileCount} {fileCount > 1 ? 'items' : 'item'}
             </Tooltip>
         );
     };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5d170715b..5de719db9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -358,12 +358,9 @@ const GlobalStyles = createGlobalStyle`
     .list-group-item:active , list-group-item:focus{
         background-color:#000 !important;
     }
-    .arrow::after{
+    #button-tooltip > .arrow::before{
         border-bottom-color:#282828 !important;
     }
-    .arrow::before{
-        border-top-color:#282828 !important;
-    }
     .carousel-inner {
         padding-bottom: 50px !important;
     }
@@ -407,8 +404,15 @@ const GlobalStyles = createGlobalStyle`
             -webkit-transform: rotate(359deg);
         }
     }
+    #button-tooltip{
+        color: #ddd;
+        border-radius: 5px;
+        font-size: 12px;
+        padding:0px
+    }
     .tooltip-inner{
-        padding:0px;
+        background-color: #282828;
+        margin:6px 0;
     }
     .react-datepicker__input-container > input {
         width:100%;