updated UI for the tooltip

pastelnetwork · Jan 4, 2023 · 6caa287 · 6caa287
1 parent d9b990c
commit 6caa287
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Summary/Summary.tsx b/src/components/Summary/Summary.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Skeleton } from '@material-ui/lab';
-import { makeStyles } from '@material-ui/styles';
+import { withStyles, makeStyles } from '@material-ui/styles';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -54,6 +54,15 @@ type TChartDataProps = {
   offset: number;
 };
 
+const CustomTooltip = withStyles(theme => ({
+  tooltip: {
+    backgroundColor: theme.palette.common.white,
+    color: '#4A5568',
+    boxShadow: theme.shadows[2],
+    fontSize: 12,
+  },
+}))(Tooltip);
+
 const Summary: React.FC = () => {
   const [summaryList, setSummaryList] = React.useState(initialSummaryList);
   const [currentStatsData, setCurrentStatsData] = React.useState<ISummaryStats | null>(null);
@@ -241,7 +250,7 @@ const Summary: React.FC = () => {
       const theNumberOfTotalSupernodes = getCurrencyName() === 'PSL' ? 5000000 : 1000000;
       const totalLockedInSupernodes = totalSupernode * theNumberOfTotalSupernodes;
       return (
-        <Tooltip
+        <CustomTooltip
           title={
             <Box>
               {sumKey === 'coinSupply' ? (
@@ -274,7 +283,7 @@ const Summary: React.FC = () => {
           }
         >
           <Box>{value}</Box>
-        </Tooltip>
+        </CustomTooltip>
       );
     }
 

diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts
@@ -7,7 +7,7 @@ function createShadow() {
 const shadows: Shadows = [
   'none',
   createShadow(),
-  createShadow(),
+  'rgb(0 0 0 / 20%) 1px 2px 10px',
   createShadow(),
   createShadow(),
   createShadow(),