misc: some more styled component migration to TW (#1965)

getlago · Jan 3, 2025 · 6394cdf · 6394cdf
1 parent 882584a
commit 6394cdf
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 120 deletions.
diff --git a/src/components/PremiumWarningDialog.tsx b/src/components/PremiumWarningDialog.tsx
@@ -1,5 +1,4 @@
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import styled from 'styled-components'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
@@ -41,22 +40,18 @@ export const PremiumWarningDialog = forwardRef<PremiumWarningDialogRef>((_, ref)
           <Button variant="quaternary" onClick={closeDialog}>
             {translate('text_62f50d26c989ab03196884ae')}
           </Button>
-          <LinkTo
+          <a
+            className="mb-0 mr-0"
             href={`mailto:[email protected]?subject=${
               localData?.mailtoSubject || translate('text_63b3f676d44671bf24d81411')
             }&body=${localData?.mailtoBody || translate('text_63b3f676d44671bf24d81413')}`}
           >
             <Button className="w-full">{translate('text_63b3155768489ee342482f55')}</Button>
-          </LinkTo>
+          </a>
         </>
       )}
     />
   )
 })
 
-const LinkTo = styled.a`
-  margin-right: 0;
-  margin-bottom: 0;
-`
-
 PremiumWarningDialog.displayName = 'PremiumWarningDialog'
diff --git a/src/components/customers/CustomerMainInfos.tsx b/src/components/customers/CustomerMainInfos.tsx
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client'
 import { Stack } from '@mui/material'
-import { useCallback, useRef, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { FC, PropsWithChildren, useCallback, useRef, useState } from 'react'
+import { Link, LinkProps } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { TRANSLATIONS_MAP_CUSTOMER_TYPE } from '~/components/customers/utils'
@@ -190,6 +190,17 @@ interface CustomerMainInfosProps {
 
 const SHOW_MORE_THRESHOLD = 6
 
+const InlineLink: FC<PropsWithChildren<LinkProps>> = ({ children, ...props }) => {
+  return (
+    <Link
+      className="w-fit !shadow-none line-break-anywhere hover:no-underline focus:ring-0"
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
+
 export const CustomerMainInfos = ({ loading, customer, onEdit }: CustomerMainInfosProps) => {
   const { translate } = useInternationalization()
   const [showMore, setShowMore] = useState(false)
@@ -737,16 +748,6 @@ const InfosBlock = styled.div<{ $showMore: boolean }>`
   }
 `
 
-const InlineLink = styled(Link)`
-  width: fit-content;
-  line-break: anywhere;
-  box-shadow: none !important;
-
-  &:hover {
-    text-decoration: none;
-  }
-`
-
 const SectionHeader = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/components/developers/WebhookLogDetails.tsx b/src/components/developers/WebhookLogDetails.tsx
@@ -145,14 +145,21 @@ export const WebhookLogDetails = ({ log }: WebhookLogDetailsProps) => {
           <Typography color="grey700" variant="captionHl">
             {translate('text_63e27c56dfe64b846474efb3')}
           </Typography>
-          <StyledCodeSnippet language="json" code={response} canCopy={false} displayHead={false} />
+          <CodeSnippet
+            className="*:pb-0"
+            language="json"
+            code={response}
+            canCopy={false}
+            displayHead={false}
+          />
         </CodeBlock>
       )}
       <CodeBlock $maxHeight>
         <Typography color="grey700" variant="captionHl">
           {translate('text_63e27c56dfe64b846474efb6')}
         </Typography>
-        <StyledCodeSnippet
+        <CodeSnippet
+          className="*:pb-0"
           language="json"
           code={JSON.stringify(JSON.parse(payload || ''), null, 2)}
           canCopy={false}
@@ -175,12 +182,6 @@ const PropertiesContainer = styled.div`
   gap: ${theme.spacing(3)};
 `
 
-const StyledCodeSnippet = styled(CodeSnippet)`
-  > * {
-    padding-bottom: 0px;
-  }
-`
-
 const CodeBlock = styled.div<{ $maxHeight?: boolean }>`
   background-color: ${theme.palette.grey[100]};
   box-shadow: ${theme.shadows[7]};

diff --git a/src/components/plans/CommitmentsSection.tsx b/src/components/plans/CommitmentsSection.tsx
@@ -127,7 +127,8 @@ export const CommitmentsSection = ({
         </Typography>
       </SectionTitle>
       {displayMinimumCommitment ? (
-        <StyledAccordion
+        <Accordion
+          className="w-full"
           summary={
             <BoxHeader>
               <BoxHeaderGroupLeft>
@@ -302,7 +303,7 @@ export const CommitmentsSection = ({
               </Group>
             </div>
           </Stack>
-        </StyledAccordion>
+        </Accordion>
       ) : (
         <Button
           variant="quaternary"
@@ -388,7 +389,3 @@ const Group = styled.div`
     margin-bottom: ${theme.spacing(4)};
   }
 `
-
-const StyledAccordion = styled(Accordion)`
-  width: 100%;
-`
diff --git a/src/components/plans/ProgressiveBillingSection.tsx b/src/components/plans/ProgressiveBillingSection.tsx
@@ -105,7 +105,8 @@ export const ProgressiveBillingSection: FC<ProgressiveBillingSectionProps> = ({
           </ButtonLink>
         </PremiumWarning>
       ) : displayProgressiveBillingAccordion ? (
-        <StyledAccordion
+        <Accordion
+          className="w-full"
           initiallyOpen={!isInSubscriptionForm}
           summary={
             <AccordionSummary
@@ -297,7 +298,7 @@ export const ProgressiveBillingSection: FC<ProgressiveBillingSectionProps> = ({
             )}
             <Alert type="info">{translate('text_1724252232460iqofvwnpgnx')}</Alert>
           </Stack>
-        </StyledAccordion>
+        </Accordion>
       ) : (
         <Button
           variant="quaternary"
@@ -389,10 +390,6 @@ const BoxHeaderGroupRight = styled.div`
   gap: ${theme.spacing(3)};
 `
 
-const StyledAccordion = styled(Accordion)`
-  width: 100%;
-`
-
 const TableContainer = styled.div`
   overflow: auto;
   padding-right: ${theme.spacing(4)};

diff --git a/src/components/plans/details/PlanSubscriptionList.tsx b/src/components/plans/details/PlanSubscriptionList.tsx
@@ -63,9 +63,9 @@ const PlanSubscriptionList = ({ planCode }: { planCode?: string }) => {
   return (
     <Container>
       <section>
-        <CustomDetailsSectionTitle variant="subhead" noWrap>
+        <DetailsSectionTitle className="shadow-b" variant="subhead" noWrap>
           {translate('text_65281f686a80b400c8e2f6be')}
-        </CustomDetailsSectionTitle>
+        </DetailsSectionTitle>
 
         {subscriptionsError ? (
           <GenericPlaceholder
@@ -160,10 +160,6 @@ const Container = styled.section`
   gap: ${theme.spacing(12)};
 `
 
-const CustomDetailsSectionTitle = styled(DetailsSectionTitle)`
-  box-shadow: ${theme.shadows[7]};
-`
-
 const ScrollWrapper = styled.div`
   overflow: auto;
 `

diff --git a/src/components/settings/emails/UpdateOrganizationLogoDialog.tsx b/src/components/settings/emails/UpdateOrganizationLogoDialog.tsx
@@ -1,12 +1,10 @@
 import { gql } from '@apollo/client'
 import { forwardRef, useState } from 'react'
-import styled from 'styled-components'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { OrganizationLogoPicker } from '~/components/OrganizationLogoPicker'
 import { useUpdateOrganizationLogoMutation } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 gql`
   mutation updateOrganizationLogo($input: UpdateOrganizationInput!) {
@@ -53,14 +51,14 @@ export const UpdateOrganizationLogoDialog = forwardRef<UpdateOrganizationLogoDia
           </>
         )}
       >
-        <StyledOrganizationLogoPicker logoValue={logo} onChange={(value) => setLogo(value)} />
+        <OrganizationLogoPicker
+          className="mb-8"
+          logoValue={logo}
+          onChange={(value) => setLogo(value)}
+        />
       </Dialog>
     )
   },
 )
 
 UpdateOrganizationLogoDialog.displayName = 'UpdateOrganizationLogoDialog'
-
-const StyledOrganizationLogoPicker = styled(OrganizationLogoPicker)`
-  margin-bottom: ${theme.spacing(8)};
-`
diff --git a/src/pages/AddOnDetails.tsx b/src/pages/AddOnDetails.tsx
@@ -171,14 +171,14 @@ const AddOnDetails = () => {
             {translate('text_629728388c4d2300e2d38117')}
           </DetailsSectionTitle>
           <DetailsCard>
-            <DetailsSectionWrapperWithBorder>
+            <div className="p-4 shadow-b">
               <DetailsTableDisplay
                 header={[translate('text_624453d52e945301380e49b6')]}
                 body={[[amountWithCurrency]]}
               />
-            </DetailsSectionWrapperWithBorder>
+            </div>
 
-            <DetailsSectionWrapper>
+            <div className="p-4">
               <DetailsInfoGrid
                 grid={[
                   {
@@ -197,7 +197,7 @@ const AddOnDetails = () => {
                   },
                 ]}
               />
-            </DetailsSectionWrapper>
+            </div>
           </DetailsCard>
         </section>
       </Container>
@@ -234,11 +234,3 @@ const DetailsCard = styled.div`
   border: 1px solid ${theme.palette.grey[400]};
   border-radius: 12px;
 `
-
-const DetailsSectionWrapper = styled.div`
-  padding: ${theme.spacing(4)};
-`
-
-const DetailsSectionWrapperWithBorder = styled(DetailsSectionWrapper)`
-  box-shadow: ${theme.shadows[7]};
-`
diff --git a/src/pages/CouponDetails.tsx b/src/pages/CouponDetails.tsx
@@ -199,7 +199,7 @@ const CouponDetails = () => {
             {translate('text_62876e85e32e0300e1803137')}
           </DetailsSectionTitle>
           <DetailsCard>
-            <DetailsSectionWrapperWithBorder>
+            <div className="flex flex-col gap-4 p-4 shadow-b">
               <DetailsTableDisplay
                 header={[
                   coupon?.couponType === CouponTypeEnum.Percentage
@@ -210,9 +210,9 @@ const CouponDetails = () => {
                 ]}
                 body={[[couponValue]]}
               />
-            </DetailsSectionWrapperWithBorder>
+            </div>
 
-            <DetailsSectionWrapper>
+            <div className="flex flex-col gap-4 p-4">
               <DetailsInfoGrid
                 grid={[
                   {
@@ -229,7 +229,7 @@ const CouponDetails = () => {
                   },
                 ]}
               />
-            </DetailsSectionWrapper>
+            </div>
           </DetailsCard>
         </section>
 
@@ -242,7 +242,7 @@ const CouponDetails = () => {
               {translate('text_63c83d58e697e8e9236da806')}
             </DetailsSectionTitle>
             <DetailsCard>
-              <DetailsSectionWrapper>
+              <div className="flex flex-col gap-4 p-4">
                 {!!coupon?.reusable && (
                   <DetailsTableDisplay
                     header={[
@@ -323,7 +323,7 @@ const CouponDetails = () => {
                     ]}
                   />
                 )}
-              </DetailsSectionWrapper>
+              </div>
             </DetailsCard>
           </section>
         )}
@@ -361,15 +361,3 @@ const DetailsCard = styled.div`
   border: 1px solid ${theme.palette.grey[400]};
   border-radius: 12px;
 `
-
-const DetailsSectionWrapper = styled.div`
-  padding: ${theme.spacing(4)};
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: ${theme.spacing(4)};
-`
-
-const DetailsSectionWrapperWithBorder = styled(DetailsSectionWrapper)`
-  box-shadow: ${theme.shadows[7]};
-`
diff --git a/src/pages/settings/AdyenIntegrationDetails.tsx b/src/pages/settings/AdyenIntegrationDetails.tsx
@@ -367,10 +367,11 @@ const AdyenIntegrationDetails = () => {
                     </div>
                   </SuccessPaumentRedirectUrlItemLeft>
                   {(canEditIntegration || canDeleteIntegration) && (
-                    <LocalPopper
+                    <Popper
+                      className="relative h-full"
                       PopperProps={{ placement: 'bottom-end' }}
                       opener={({ isOpen }) => (
-                        <PopperOpener>
+                        <PopperOpener className="right-0 top-4">
                           <Tooltip
                             placement="top-end"
                             disableHoverListener={isOpen}
@@ -422,7 +423,7 @@ const AdyenIntegrationDetails = () => {
                           )}
                         </MenuPopper>
                       )}
-                    </LocalPopper>
+                    </Popper>
                   )}
                 </SuccessPaumentRedirectUrlItem>
               )}
@@ -478,15 +479,6 @@ const InlineTitle = styled.div`
   justify-content: space-between;
 `
 
-const LocalPopper = styled(Popper)`
-  position: relative;
-  height: 100%;
-  > *:first-child {
-    right: 0;
-    top: 16px;
-  }
-`
-
 const SuccessPaumentRedirectUrlItem = styled.div`
   height: ${NAV_HEIGHT}px;
   box-shadow: ${theme.shadows[7]};