feat: tooltip component design updates (#2499)

techmatters · Nov 21, 2024 · 6e2dcf5 · 6e2dcf5
1 parent dbc211d
commit 6e2dcf5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/dev-client/src/components/tooltips/Tooltip.tsx b/dev-client/src/components/tooltips/Tooltip.tsx
@@ -19,22 +19,25 @@ import {memo} from 'react';
 
 import {IPopoverProps, Popover} from 'native-base';
 
+import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters';
+
 type TooltipProps = React.PropsWithChildren<{
   trigger: IPopoverProps['trigger'];
 }>;
 
 export const Tooltip = memo(({trigger, children}: TooltipProps) => {
   return (
     <Popover trigger={trigger}>
-      <Popover.Content bg="grey.800" p="0px" shadow="0">
-        <Popover.Arrow bg="grey.800" shadow="0" />
-        <Popover.Body
-          bg="grey.800"
-          px="8px"
-          py="4px"
-          shadow="0"
-          _text={{color: 'primary.contrast', fontSize: '16px'}}>
-          {children}
+      <Popover.Content
+        borderWidth="0px"
+        borderRadius="4px"
+        mx="16px"
+        maxWidth="328px">
+        <Popover.Arrow bg="grey.900" borderColor="grey.900" />
+        <Popover.Body bg="grey.900" px="8px" py="4px">
+          <Text color="primary.contrast" variant="tooltip-label">
+            {children}
+          </Text>
         </Popover.Body>
       </Popover.Content>
     </Popover>

diff --git a/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx b/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx
@@ -108,9 +108,7 @@ export const CreateSiteForm = ({
                 {t('site.create.add_to_project_label')}
                 <HelpContentSpacer />
                 <HelpButton>
-                  <Text color="primary.contrast" variant="body1">
-                    {t('site.create.add_to_project_tooltip')}
-                  </Text>
+                  {t('site.create.add_to_project_tooltip')}
                 </HelpButton>
               </FormLabel>
               <ProjectSelect

diff --git a/dev-client/src/theme.ts b/dev-client/src/theme.ts
@@ -67,6 +67,7 @@ export const theme = extendTheme({
       300: '#E0E0E0',
       700: '#616161',
       800: '#424242',
+      900: '#212121',
     },
     action: {
       active: '#1A202C',
@@ -428,6 +429,11 @@ export const theme = extendTheme({
           lineHeight: '18px',
           letterSpacing: '0.16px',
         },
+        'tooltip-label': {
+          fontSize: '12px',
+          lineHeight: '14px',
+          fontWeight: 500,
+        },
       },
     },
     Heading: {