fix: tooltip placement (#1779)

getlago · Oct 1, 2024 · a9781cd · a9781cd
1 parent 5b68057
commit a9781cd
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 58 deletions.
diff --git a/src/components/OverviewCard.tsx b/src/components/OverviewCard.tsx
@@ -37,9 +37,9 @@ export const OverviewCard: FC<OverviewCardProps> = ({
           <CardHeader>
             <Typography variant="captionHl">{title}</Typography>
             {tooltipContent && (
-              <StyledTooltip placement="top-start" title={tooltipContent}>
+              <Tooltip className="flex h-5 items-end" placement="top-start" title={tooltipContent}>
                 <Icon name="info-circle" />
-              </StyledTooltip>
+              </Tooltip>
             )}
           </CardHeader>
 
@@ -69,7 +69,3 @@ const SkeletonWrapper = styled.div`
     margin-bottom: ${theme.spacing(8)};
   }
 `
-
-const StyledTooltip = styled(Tooltip)`
-  height: 16px;
-`
diff --git a/src/components/creditNote/CreditNoteFormCalculation.tsx b/src/components/creditNote/CreditNoteFormCalculation.tsx
@@ -233,7 +233,11 @@ export const CreditNoteFormCalculation = ({
           <Line>
             <InlineLabel>
               <Typography variant="bodyHl">{translate('text_644b9f17623605a945cafdbb')}</Typography>
-              <Tooltip placement="top-start" title={translate('text_644b9f17623605a945cafdb9')}>
+              <Tooltip
+                className="flex h-5 items-end"
+                placement="top-start"
+                title={translate('text_644b9f17623605a945cafdb9')}
+              >
                 <Icon name="info-circle" />
               </Tooltip>
             </InlineLabel>
@@ -630,7 +634,6 @@ const InlineLabel = styled.div`
 
   > *:last-child {
     margin-left: ${theme.spacing(2)};
-    height: 16px;
   }
 `
 

diff --git a/src/components/designSystem/graphs/ChartHeader.tsx b/src/components/designSystem/graphs/ChartHeader.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled, { css } from 'styled-components'
 
 import { Icon, Skeleton, Tooltip, Typography } from '~/components/designSystem'
@@ -36,9 +35,9 @@ const ChartHeader = ({
                 {name}
               </Typography>
               {!!tooltipText && (
-                <LeftInfoCellTooltip placement="top-start" title={tooltipText}>
+                <Tooltip className="flex h-5 items-end" placement="top-start" title={tooltipText}>
                   <Icon name="info-circle" />
-                </LeftInfoCellTooltip>
+                </Tooltip>
               )}
             </LeftInfoCellWithTooltip>
             <Typography variant="subhead" color="grey700">
@@ -93,7 +92,3 @@ const LeftInfoCellWithTooltip = styled.div`
   align-items: center;
   gap: ${theme.spacing(2)};
 `
-
-const LeftInfoCellTooltip = styled(Tooltip)`
-  height: 16px;
-`
diff --git a/src/components/developers/DebuggerEventDetails.tsx b/src/components/developers/DebuggerEventDetails.tsx
@@ -108,12 +108,13 @@ export const DebuggerEventDetails = ({ event }: DebuggerEventDetailsProps) => {
         </PropertyLabel>
         <PropertyValue color="textSecondary">
           {transactionId}
-          <TransactionIdTooltip
+          <Tooltip
+            className="flex h-5 items-end"
             placement="bottom-start"
             title={translate('text_6298bd525e359200d5ea0257')}
           >
             <StyledIcon color="dark" name="info-circle" />
-          </TransactionIdTooltip>
+          </Tooltip>
         </PropertyValue>
 
         <PropertyLabel variant="caption">
@@ -169,10 +170,6 @@ const StyledCodeSnippet = styled(CodeSnippet)`
   }
 `
 
-const TransactionIdTooltip = styled(Tooltip)`
-  height: 16px;
-`
-
 const PropertiesContainer = styled.div`
   padding: ${theme.spacing(8)};
   box-shadow: ${theme.shadows[7]};

diff --git a/src/components/form/ButtonSelector/ButtonSelector.tsx b/src/components/form/ButtonSelector/ButtonSelector.tsx
@@ -47,7 +47,7 @@ export const ButtonSelector = ({
             {label}
           </Typography>
           {!!infoText && (
-            <Tooltip placement="bottom-start" title={infoText}>
+            <Tooltip className="flex h-5 items-end" placement="bottom-start" title={infoText}>
               <Icon name="info-circle" />
             </Tooltip>
           )}
@@ -106,10 +106,6 @@ const Label = styled.div<{ $withInfo?: boolean }>`
       > *:first-child {
         margin-right: ${theme.spacing(1)};
       }
-
-      > *:last-child {
-        height: 16px;
-      }
     `}
 `
 

diff --git a/src/components/form/JsonEditor/JsonEditor.tsx b/src/components/form/JsonEditor/JsonEditor.tsx
@@ -84,7 +84,7 @@ export const JsonEditor = ({
               {label}
             </Typography>
             {!!infoText && (
-              <Tooltip placement="bottom-start" title={infoText}>
+              <Tooltip className="flex h-5 items-end" placement="bottom-start" title={infoText}>
                 <Icon name="info-circle" />
               </Tooltip>
             )}
@@ -209,10 +209,6 @@ const LabelContainer = styled.div<{ $withInfo?: boolean }>`
       > *:first-child {
         margin-right: ${theme.spacing(1)};
       }
-
-      > *:last-child {
-        height: 16px;
-      }
     `}
 `
 

diff --git a/src/components/form/Radio/RadioGroupField.tsx b/src/components/form/Radio/RadioGroupField.tsx
@@ -43,7 +43,7 @@ export const RadioGroupField: FC<RadioGroupFieldProps> = ({
                 {label}
               </Typography>
               {!!infoText && (
-                <Tooltip placement="top-start" title={infoText}>
+                <Tooltip className="flex h-5 items-end" placement="top-start" title={infoText}>
                   <Icon name="info-circle" />
                 </Tooltip>
               )}
@@ -95,10 +95,6 @@ const Label = styled.div<{ $withInfo?: boolean }>`
       > *:first-child {
         margin-right: ${theme.spacing(1)};
       }
-
-      > *:last-child {
-        height: 16px;
-      }
     `}
 `
 

diff --git a/src/components/plans/GraduatedPercentageChargeTable.tsx b/src/components/plans/GraduatedPercentageChargeTable.tsx
@@ -168,14 +168,18 @@ export const GraduatedPercentageChargeTable = memo(
               },
               {
                 title: (
-                  <CellTitleWithTooltip>
+                  <div className="flex items-center">
                     <TypographyCell variant="captionHl">
                       {translate('text_64de472463e2da6b31737df2')}
                     </TypographyCell>
-                    <Tooltip placement="top-end" title={translate('text_64de472563e2da6b31737e77')}>
+                    <Tooltip
+                      className="flex h-5 items-end"
+                      placement="top-end"
+                      title={translate('text_64de472563e2da6b31737e77')}
+                    >
                       <Icon name="info-circle" />
                     </Tooltip>
-                  </CellTitleWithTooltip>
+                  </div>
                 ),
                 size: 124,
                 content: (row, i) =>
@@ -351,12 +355,3 @@ const AddButton = styled(Button)`
   margin-left: auto;
   margin-bottom: ${theme.spacing(2)};
 `
-
-const CellTitleWithTooltip = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:nth-child(2) {
-    height: 16px;
-  }
-`
diff --git a/src/components/wallets/WalletAccordion.tsx b/src/components/wallets/WalletAccordion.tsx
@@ -341,14 +341,15 @@ export const WalletAccordion = forwardRef<TopupWalletDialogRef, WalletAccordionP
                 currency,
               })}
               &nbsp;
-              <InlineTooltip
+              <Tooltip
+                className="flex h-5 items-end"
                 placement="top-end"
                 title={translate('text_62da6db136909f52c2704c40', {
                   date: formatTimeOrgaTZ(lastConsumedCreditAt || DateTime.now()),
                 })}
               >
                 <Icon name="info-circle" />
-              </InlineTooltip>
+              </Tooltip>
             </WalletConsumptionSummary>
           </>
         )}
@@ -394,10 +395,6 @@ const SummaryLeft = styled.div`
   }
 `
 
-// const SummaryRight = styled.div`
-//   min-width: 120px;
-// `
-
 const SummaryInfos = styled.div<{ $isLoading?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -454,10 +451,6 @@ const WalletConsumptionSummary = styled(Typography)`
   justify-content: flex-end;
 `
 
-const InlineTooltip = styled(Tooltip)`
-  height: 16px;
-`
-
 const FreemiumWarningBlock = styled.div`
   display: flex;
   align-items: center;