refactor tooltip styling

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
+            <Tooltip id="button-tooltip">
-                style={{
+                {fileCount} {fileCount > 1 ? 'items' : 'item'}
-                    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>
         );
     };

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%;