misc: remove useless shared component and use TW on invocation and fi…

…x usage
getlago · Dec 30, 2024 · e984900 · e984900
1 parent 4a8558b
commit e984900
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 29 deletions.
diff --git a/src/components/customers/CustomerCreditNotesList.tsx b/src/components/customers/CustomerCreditNotesList.tsx
@@ -14,7 +14,7 @@ import {
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import ErrorImage from '~/public/images/maneki/error.svg'
-import { SectionHeader, SideSection } from '~/styles/customer'
+import { SectionHeader } from '~/styles/customer'
 
 import { SearchInput } from '../SearchInput'
 
@@ -52,7 +52,7 @@ export const CustomerCreditNotesList = ({
   const creditNotes = data?.creditNotes?.collection
 
   return (
-    <SideSection>
+    <div>
       <SectionHeader variant="subhead" color="grey700" hideBottomShadow>
         {translate('text_63725b30957fd5b26b308dd7')}
       </SectionHeader>
@@ -115,6 +115,6 @@ export const CustomerCreditNotesList = ({
           variables={variables}
         />
       )}
-    </SideSection>
+    </div>
   )
 }
diff --git a/src/components/customers/overview/CustomerSubscriptionsList.tsx b/src/components/customers/overview/CustomerSubscriptionsList.tsx
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 import { Button, Typography } from '~/components/designSystem'
 import { CREATE_SUBSCRIPTION } from '~/core/router'
@@ -13,7 +13,7 @@ import {
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { usePermissions } from '~/hooks/usePermissions'
 import { HEADER_TABLE_HEIGHT, theme } from '~/styles'
-import { SectionHeader, SideSection } from '~/styles/customer'
+import { SectionHeader } from '~/styles/customer'
 
 import { SubscriptionItem, SubscriptionItemSkeleton } from '../subscriptions/SubscriptionItem'
 import {
@@ -57,8 +57,8 @@ export const CustomerSubscriptionsList = ({ customerTimezone }: CustomerSubscrip
   const terminateSubscriptionDialogRef = useRef<TerminateCustomerSubscriptionDialogRef>(null)
 
   return (
-    <SideSection>
-      <Header variant="subhead" hideBottomShadow>
+    <div>
+      <SectionHeader variant="subhead" hideBottomShadow>
         {translate('text_6250304370f0f700a8fdc28d')}
 
         {hasPermissions(['subscriptionsCreate']) && (
@@ -76,7 +76,7 @@ export const CustomerSubscriptionsList = ({ customerTimezone }: CustomerSubscrip
             {translate('text_6250304370f0f700a8fdc28b')}
           </Button>
         )}
-      </Header>
+      </SectionHeader>
       {loading ? (
         <LoadingContent>
           {[0, 1, 2].map((_, i) => (
@@ -113,20 +113,12 @@ export const CustomerSubscriptionsList = ({ customerTimezone }: CustomerSubscrip
         </>
       )}
       <TerminateCustomerSubscriptionDialog ref={terminateSubscriptionDialogRef} />
-    </SideSection>
+    </div>
   )
 }
 
 CustomerSubscriptionsList.displayName = 'CustomerSubscriptionsList'
 
-const Header = styled(SectionHeader)<{ $loading?: boolean }>`
-  ${({ $loading }) =>
-    $loading &&
-    css`
-      box-shadow: none;
-    `}
-`
-
 const ListHeader = styled.div`
   height: ${HEADER_TABLE_HEIGHT}px;
   display: grid;

diff --git a/src/components/wallets/CustomerWalletList.tsx b/src/components/wallets/CustomerWalletList.tsx
@@ -18,7 +18,8 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { usePermissions } from '~/hooks/usePermissions'
 import ErrorImage from '~/public/images/maneki/error.svg'
 import { MenuPopper } from '~/styles'
-import { SectionHeader, SideSection } from '~/styles/customer'
+import { SectionHeader } from '~/styles/customer'
+import { tw } from '~/styles/utils'
 
 import {
   TerminateCustomerWalletDialog,
@@ -97,8 +98,14 @@ export const CustomerWalletsList = ({ customerId, customerTimezone }: CustommerW
 
   return (
     <>
-      <SideSection $empty={!!hasNoWallet}>
-        <SectionHeader variant="subhead" hideBottomShadow={!!loading || !hasNoWallet}>
+      <div>
+        <SectionHeader
+          className={tw({
+            'mb-6': !!hasNoWallet,
+          })}
+          variant="subhead"
+          hideBottomShadow={!!loading || !hasNoWallet}
+        >
           {translate('text_62d175066d2dbf1d50bc9384')}
 
           {hasAnyPermissionsToShowActions && (
@@ -236,7 +243,7 @@ export const CustomerWalletsList = ({ customerId, customerTimezone }: CustommerW
             <VoidWalletDialog ref={voidWalletDialogRef} wallet={activeWallet} />
           </>
         )}
-      </SideSection>
+      </div>
 
       <PremiumWarningDialog ref={premiumWarningDialogRef} />
     </>

diff --git a/src/styles/customer.tsx b/src/styles/customer.tsx
@@ -1,17 +1,9 @@
 import { FC, PropsWithChildren } from 'react'
-import styled from 'styled-components'
 
 import { Typography, TypographyProps } from '~/components/designSystem'
-import { theme } from '~/styles'
 
 import { tw } from './utils'
 
-export const SideSection = styled.div<{ $empty?: boolean }>`
-  > *:first-child {
-    margin-bottom: ${({ $empty }) => ($empty ? theme.spacing(6) : 0)};
-  }
-`
-
 export const SectionHeader: FC<
   PropsWithChildren<{ hideBottomShadow?: boolean } & TypographyProps>
 > = ({ children, hideBottomShadow, ...props }) => (