misc: migrate all styled icon to use tailwind (#1952)

getlago · Dec 30, 2024 · e036d1d · e036d1d
1 parent efa8d91
commit e036d1d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 34 deletions.
diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
@@ -398,8 +398,9 @@ export const ChargeAccordion = memo(
                     : translate('text_635b975ecea4296eb76924b1')
                 }
               >
-                <ValidationIcon
+                <Icon
                   name="validate-filled"
+                  className="flex items-center"
                   color={hasErrorInCharges ? 'disabled' : 'success'}
                 />
               </Tooltip>
@@ -511,8 +512,9 @@ export const ChargeAccordion = memo(
                                       : translate('text_635b975ecea4296eb76924b1')
                                   }
                                 >
-                                  <ValidationIcon
+                                  <Icon
                                     name="validate-filled"
+                                    className="flex items-center"
                                     color={hasDefaultPropertiesErrors ? 'disabled' : 'success'}
                                   />
                                 </Tooltip>
@@ -625,8 +627,9 @@ export const ChargeAccordion = memo(
                                     : translate('text_635b975ecea4296eb76924b1')
                                 }
                               >
-                                <ValidationIcon
+                                <Icon
                                   name="validate-filled"
+                                  className="flex items-center"
                                   color={hasFilterErrors ? 'disabled' : 'success'}
                                 />
                               </Tooltip>
@@ -983,11 +986,6 @@ const ChargeModelWrapper = styled.div`
   padding: ${theme.spacing(4)} ${theme.spacing(4)} 0 ${theme.spacing(4)};
 `
 
-const ValidationIcon = styled(Icon)`
-  display: flex;
-  align-items: center;
-`
-
 const SummaryLeft = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/components/plans/ChargeBillingRadioGroup.tsx b/src/components/plans/ChargeBillingRadioGroup.tsx
@@ -80,7 +80,7 @@ export const ChargeBillingRadioGroup: FC<ChargeBillingRadioGroupProps> = ({
           <div>
             <Typography variant="bodyHl" color="textSecondary">
               {translate('text_6682c52081acea90520744d0')}
-              <StyledIcon name="sparkles" />
+              <Icon className="ml-2" name="sparkles" />
             </Typography>
 
             <Typography variant="caption">{translate('text_6682c52081acea90520744d2')}</Typography>
@@ -139,7 +139,3 @@ const PremiumOption = styled.div`
   border-radius: 8px;
   padding: ${theme.spacing(4)} ${theme.spacing(6)};
 `
-
-const StyledIcon = styled(Icon)`
-  margin-left: ${theme.spacing(2)};
-`
diff --git a/src/components/plans/CommitmentsSection.tsx b/src/components/plans/CommitmentsSection.tsx
@@ -167,8 +167,9 @@ export const CommitmentsSection = ({
                       : translate('text_635b975ecea4296eb76924b1')
                   }
                 >
-                  <ValidationIcon
+                  <Icon
                     name="validate-filled"
+                    className="flex items-center"
                     color={hasErrorInGroup ? 'disabled' : 'success'}
                   />
                 </Tooltip>
@@ -365,11 +366,6 @@ const BoxHeaderGroupRight = styled.div`
   gap: ${theme.spacing(3)};
 `
 
-const ValidationIcon = styled(Icon)`
-  display: flex;
-  align-items: center;
-`
-
 const InlineTaxesWrapper = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/components/plans/ProgressiveBillingSection.tsx b/src/components/plans/ProgressiveBillingSection.tsx
@@ -340,7 +340,11 @@ const AccordionSummary: FC<{ onDelete: VoidFunction; hasErrorInGroup: boolean }>
               : translate('text_635b975ecea4296eb76924b1')
           }
         >
-          <ValidationIcon name="validate-filled" color={hasErrorInGroup ? 'disabled' : 'success'} />
+          <Icon
+            className="flex items-center"
+            name="validate-filled"
+            color={hasErrorInGroup ? 'disabled' : 'success'}
+          />
         </Tooltip>
 
         <Tooltip placement="top-end" title={translate('text_63aa085d28b8510cd46443ff')}>
@@ -385,11 +389,6 @@ const BoxHeaderGroupRight = styled.div`
   gap: ${theme.spacing(3)};
 `
 
-const ValidationIcon = styled(Icon)`
-  display: flex;
-  align-items: center;
-`
-
 const StyledAccordion = styled(Accordion)`
   width: 100%;
 `

diff --git a/src/layouts/SideNavLayout.tsx b/src/layouts/SideNavLayout.tsx
@@ -226,7 +226,7 @@ const SideNav = () => {
                           rel="noreferrer noopener"
                         >
                           {data?.currentVersion?.number}
-                          <ExternalLinkIcon name="outside" size="small" />
+                          <Icon className="ml-2 hover:cursor-pointer" name="outside" size="small" />
                         </ExternalLink>
                       </Version>
                     ) : undefined}
@@ -522,14 +522,6 @@ const Version = styled.div`
   height: ${theme.spacing(5)};
 `
 
-const ExternalLinkIcon = styled(Icon)`
-  margin-left: ${theme.spacing(2)};
-
-  &:hover {
-    cursor: pointer;
-  }
-`
-
 const ExternalLink = styled.a`
   color: ${theme.palette.primary[600]};