From 4de9c745c8dedef6ed6a7da98b98446265926cda Mon Sep 17 00:00:00 2001
From: shrouxm <mushrouxm@gmail.com>
Date: Tue, 19 Nov 2024 12:23:44 -0800
Subject: [PATCH 1/2] feat: tooltip component design updates

---
 dev-client/src/components/tooltips/Tooltip.tsx  | 17 ++++++++---------
 .../components/CreateSiteForm.tsx               |  4 +---
 dev-client/src/theme.ts                         |  6 ++++++
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/dev-client/src/components/tooltips/Tooltip.tsx b/dev-client/src/components/tooltips/Tooltip.tsx
index 561168d1a..f66c1e38f 100644
--- a/dev-client/src/components/tooltips/Tooltip.tsx
+++ b/dev-client/src/components/tooltips/Tooltip.tsx
@@ -19,6 +19,8 @@ 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'];
 }>;
@@ -26,15 +28,12 @@ type TooltipProps = React.PropsWithChildren<{
 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">
+        <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
index c8d55f353..2c1f2dfa7 100644
--- 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
index 3af13f0bb..9f9f737f3 100644
--- 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: {

From bae337bfefc7f871b86828546d164a3e8ba89d9c Mon Sep 17 00:00:00 2001
From: shrouxm <mushrouxm@gmail.com>
Date: Wed, 20 Nov 2024 10:22:31 -0800
Subject: [PATCH 2/2] style nit: add margin and max width

---
 dev-client/src/components/tooltips/Tooltip.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/dev-client/src/components/tooltips/Tooltip.tsx b/dev-client/src/components/tooltips/Tooltip.tsx
index f66c1e38f..5c8d0ed36 100644
--- a/dev-client/src/components/tooltips/Tooltip.tsx
+++ b/dev-client/src/components/tooltips/Tooltip.tsx
@@ -28,7 +28,11 @@ type TooltipProps = React.PropsWithChildren<{
 export const Tooltip = memo(({trigger, children}: TooltipProps) => {
   return (
     <Popover trigger={trigger}>
-      <Popover.Content borderWidth="0px" borderRadius="4px">
+      <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">