Fixed the tooltip on the dashboard (#1851)

* Fixed the tooltip on the dashboard * Changed the name of TooltipContent to VerifiedToolipContent
push-protocol · Sep 11, 2024 · b4e311f · b4e311f
1 parent 52b9b3f
commit b4e311f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 62 deletions.
diff --git a/src/modules/dashboard/components/ChannelListItem.tsx b/src/modules/dashboard/components/ChannelListItem.tsx
@@ -26,8 +26,10 @@ import {
   InboxBell,
   TickDecoratedCircleFilled,
   Ethereum,
+  Tooltip,
+  PushLogo,
 } from 'blocks';
-import { VerifiedToolTipComponent } from './VerifiedToolTipComponent';
+import { VerifiedToolTipContent } from './VerifiedToolTipComponent';
 import { UserSetting } from 'helpers/channel/types';
 import { useAccount } from 'hooks';
 import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown';
@@ -119,9 +121,14 @@ const ChannelListItem: FC<ChannelListItemProps> = ({
                 {channelDetails?.name}
               </Link>
               {!!channelDetails?.verified_status && (
-                <VerifiedToolTipComponent>
-                  <TickDecoratedCircleFilled color="icon-tertiary" />
-                </VerifiedToolTipComponent>
+                <Tooltip overlay={<VerifiedToolTipContent />}>
+                  <Box cursor="pointer">
+                    <TickDecoratedCircleFilled
+                      color="icon-tertiary"
+                      size={16}
+                    />
+                  </Box>
+                </Tooltip>
               )}
               <Ethereum
                 width={16}

diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx
@@ -22,10 +22,11 @@ import {
   Skeleton,
   Text,
   TickDecoratedCircleFilled,
+  Tooltip,
 } from 'blocks';
 import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown';
 import { UnsubscribeChannelDropdown } from 'common/components/UnsubscribeChannelDropdown';
-import { VerifiedToolTipComponent } from './VerifiedToolTipComponent';
+import { VerifiedToolTipContent } from './VerifiedToolTipComponent';
 import { UserSetting } from 'helpers/channel/types';
 
 // Internal Configs
@@ -169,12 +170,14 @@ const FeaturedChannelsListItem: FC<FeaturedChannelsListItemProps> = (props) => {
                 </Link>
 
                 {!!channelDetails?.verified_status && (
-                  <VerifiedToolTipComponent>
-                    <TickDecoratedCircleFilled
-                      size={16}
-                      color="icon-tertiary"
-                    />
-                  </VerifiedToolTipComponent>
+                  <Tooltip overlay={<VerifiedToolTipContent />}>
+                    <Box cursor="pointer">
+                      <TickDecoratedCircleFilled
+                        color="icon-tertiary"
+                        size={16}
+                      />
+                    </Box>
+                  </Tooltip>
                 )}
 
                 <Ethereum

diff --git a/src/modules/dashboard/components/VerifiedToolTipComponent.tsx b/src/modules/dashboard/components/VerifiedToolTipComponent.tsx
@@ -1,61 +1,20 @@
-// React and other libraries
-import { FC, ReactNode } from 'react';
-
-// Third-party libraries
-import { css } from 'styled-components';
-
 // Components
 import { Box, Text } from 'blocks';
-import Tooltip from 'components/reusables/tooltip/Tooltip';
 import PushLogo from 'blocks/illustrations/components/PushLogo';
 
-type VerifiedToolTipComponentProps = {
-  children: ReactNode;
-};
-
-const VerifiedToolTipComponent: FC<VerifiedToolTipComponentProps> = (props) => {
-  const { children } = props;
-  return (
-    <Tooltip
-      wrapperProps={{
-        width: 'fit-content',
-        maxWidth: 'fit-content',
-        minWidth: 'fit-content',
-        display: 'flex',
-        cursor: 'pointer',
-        zIndex: '9999',
-      }}
-      placementProps={{
-        // @ts-expect-error
-        background: 'none',
-        bottom: '20px',
-        left: '7px',
-      }}
-      tooltipContent={<ToolTipContent />}
-    >
-      {children}
-    </Tooltip>
-  );
-};
-
-export { VerifiedToolTipComponent };
-
-const ToolTipContent = () => {
+export const VerifiedToolTipContent = () => {
   return (
     <Box
-      backgroundColor="surface-primary"
-      height="20px"
-      width="175px"
-      padding="spacing-xxs spacing-sm"
       display="flex"
-      justifyContent="space-between"
-      alignItems="center"
-      css={css`
-        z-index: 1000;
-        border-radius: 1rem 1rem 1rem 0.125rem;
-      `}
+      gap="spacing-xxs"
+      padding="spacing-xxxs"
     >
-      <Text variant="bs-semibold">Verified By: </Text>
+      <Text
+        color="text-primary-inverse"
+        variant="bs-semibold"
+      >
+        Verified By:{' '}
+      </Text>
       <Box
         display="flex"
         gap="spacing-xxs"
@@ -65,7 +24,7 @@ const ToolTipContent = () => {
           width={16}
           height={16}
         />
-        <Text>Push Admin</Text>
+        <Text color="text-primary-inverse">Push Admin</Text>
       </Box>
     </Box>
   );