refactor: tailwind migrations

src/components/settings/EditOrganizationInformationsDialog.tsx

@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import { forwardRef, useState } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
@@ -16,7 +15,6 @@ import {
   useUpdateOrganizationInformationsMutation,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 gql`
   fragment EditOrganizationInformationsDialog on CurrentOrganization {
@@ -122,55 +120,49 @@ export const EditOrganizationInformationsDialog = forwardRef<
         </>
       )}
     >
-      <Content>
-        <FormSection>
-          <OrganizationLogoPicker logoValue={logo} onChange={(value) => setLogo(value)} />
-        </FormSection>
-        <FormSection>
-          <TextInput
-            name="name"
-            label={translate('text_62b95bf4a482330b71b8acb2')}
-            placeholder={translate('text_62b95bf4a482330b71b8acb2')}
-            value={organization?.name}
-            disabled={true}
-          />
-        </FormSection>
-        <FormSection>
-          <TextInputField
-            name="legalName"
-            label={translate('text_62ab2d0396dd6b0361614d40')}
-            placeholder={translate('text_62ab2d0396dd6b0361614d48')}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
-            formikProps={formikProps}
-          />
-        </FormSection>
-        <FormSection>
-          <TextInputField
-            name="legalNumber"
-            label={translate('text_62ab2d0396dd6b0361614d50')}
-            placeholder={translate('text_62ab2d0396dd6b0361614d58')}
-            formikProps={formikProps}
-          />
-        </FormSection>
-        <FormSection>
-          <TextInputField
-            name="taxIdentificationNumber"
-            label={translate('text_648053ee819b60364c675d05')}
-            placeholder={translate('text_648053ee819b60364c675d0b')}
-            formikProps={formikProps}
-          />
-        </FormSection>
-        <FormSection>
-          <TextInputField
-            name="email"
-            beforeChangeFormatter={['lowercase']}
-            label={translate('text_62ab2d0396dd6b0361614d60')}
-            placeholder={translate('text_62ab2d0396dd6b0361614d68')}
-            formikProps={formikProps}
-          />
-        </FormSection>
-        <AddressSection>
+      <div className="mb-8 flex flex-col gap-6">
+        <OrganizationLogoPicker logoValue={logo} onChange={(value) => setLogo(value)} />
+
+        <TextInput
+          name="name"
+          label={translate('text_62b95bf4a482330b71b8acb2')}
+          placeholder={translate('text_62b95bf4a482330b71b8acb2')}
+          value={organization?.name}
+          disabled={true}
+        />
+
+        <TextInputField
+          name="legalName"
+          label={translate('text_62ab2d0396dd6b0361614d40')}
+          placeholder={translate('text_62ab2d0396dd6b0361614d48')}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+          formikProps={formikProps}
+        />
+
+        <TextInputField
+          name="legalNumber"
+          label={translate('text_62ab2d0396dd6b0361614d50')}
+          placeholder={translate('text_62ab2d0396dd6b0361614d58')}
+          formikProps={formikProps}
+        />
+
+        <TextInputField
+          name="taxIdentificationNumber"
+          label={translate('text_648053ee819b60364c675d05')}
+          placeholder={translate('text_648053ee819b60364c675d0b')}
+          formikProps={formikProps}
+        />
+
+        <TextInputField
+          name="email"
+          beforeChangeFormatter={['lowercase']}
+          label={translate('text_62ab2d0396dd6b0361614d60')}
+          placeholder={translate('text_62ab2d0396dd6b0361614d68')}
+          formikProps={formikProps}
+        />
+
+        <div className="flex flex-col gap-4">
           <TextInputField
             name="addressLine1"
             label={translate('text_62ab2d0396dd6b0361614d70')}
@@ -204,26 +196,10 @@ export const EditOrganizationInformationsDialog = forwardRef<
             formikProps={formikProps}
             PopperProps={{ displayInDialog: true }}
           />
-        </AddressSection>
-      </Content>
+        </div>
+      </div>
     </Dialog>
   )
 })
 
-const Content = styled.div`
-  margin-bottom: ${theme.spacing(8)};
-`
-
-const FormSection = styled.div`
-  &:not(:last-child) {
-    margin-bottom: ${theme.spacing(6)};
-  }
-`
-
-const AddressSection = styled.div`
-  > * {
-    margin-bottom: ${theme.spacing(4)};
-  }
-`
-
 EditOrganizationInformationsDialog.displayName = 'forwardRef'

src/components/settings/EditOrganizationTimezoneDialog.tsx

@@ -2,7 +2,6 @@ import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import { Settings } from 'luxon'
 import { forwardRef } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
@@ -11,7 +10,6 @@ import { addToast } from '~/core/apolloClient'
 import { getTimezoneConfig } from '~/core/timezone'
 import { TimezoneEnum, useUpdateOrganizationTimezoneMutation } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 gql`
   mutation updateOrganizationTimezone($input: UpdateOrganizationInput!) {
@@ -90,7 +88,7 @@ export const EditOrganizationTimezoneDialog = forwardRef<
         </>
       )}
     >
-      <Content>
+      <div className="mb-8">
         <ComboBoxField
           name="timezone"
           label={translate('text_63890710eb171a76814a0c11')}
@@ -105,13 +103,9 @@ export const EditOrganizationTimezoneDialog = forwardRef<
             }),
           }))}
         />
-      </Content>
+      </div>
     </Dialog>
   )
 })
 
-const Content = styled.div`
-  margin-bottom: ${theme.spacing(8)};
-`
-
 EditOrganizationTimezoneDialog.displayName = 'EditOrganizationTimezoneDialog'

src/components/settings/authentication/AddOktaDialog.tsx

@@ -1,6 +1,5 @@
 import { InputAdornment, Stack } from '@mui/material'
 import { forwardRef, RefObject, useImperativeHandle, useRef, useState } from 'react'
-import styled from 'styled-components'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { TextInputField } from '~/components/form'
@@ -11,7 +10,6 @@ import {
 } from '~/components/settings/authentication/useOktaIntegration'
 import { AddOktaIntegrationDialogFragment } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 type AddOktaDialogProps = Partial<{
   integration: AddOktaIntegrationDialogFragment
@@ -102,7 +100,7 @@ export const AddOktaDialog = forwardRef<AddOktaDialogRef>((_, ref) => {
           </Stack>
         )}
       >
-        <Content>
+        <div className="mb-8 flex flex-col gap-6">
           <TextInputField
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
@@ -137,18 +135,10 @@ export const AddOktaDialog = forwardRef<AddOktaDialogRef>((_, ref) => {
               ),
             }}
           />
-        </Content>
+        </div>
       </Dialog>
     </>
   )
 })
 
-const Content = styled.div`
-  margin-bottom: ${theme.spacing(8)};
-
-  > *:not(:last-child) {
-    margin-bottom: ${theme.spacing(6)};
-  }
-`
-
 AddOktaDialog.displayName = 'AddOktaDialog'

src/components/settings/integrations/AddAdyenDialog.tsx

@@ -4,7 +4,6 @@ import { useFormik } from 'formik'
 import { forwardRef, RefObject, useImperativeHandle, useRef, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { generatePath } from 'react-router-dom'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
@@ -22,7 +21,6 @@ import {
   useUpdateAdyenApiKeyMutation,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 import { DeleteAdyenIntegrationDialogRef } from './DeleteAdyenIntegrationDialog'
 
@@ -244,9 +242,10 @@ export const AddAdyenDialog = forwardRef<AddAdyenDialogRef>((_, ref) => {
         </Stack>
       )}
     >
-      <Content>
-        <InlineInputs>
+      <div className="mb-8 flex flex-col gap-6">
+        <div className="flex flex-row items-start gap-6">
           <TextInputField
+            className="flex-1"
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             formikProps={formikProps}
@@ -255,12 +254,13 @@ export const AddAdyenDialog = forwardRef<AddAdyenDialogRef>((_, ref) => {
             placeholder={translate('text_6584550dc4cec7adf861504f')}
           />
           <TextInputField
+            className="flex-1"
             formikProps={formikProps}
             name="code"
             label={translate('text_6584550dc4cec7adf8615051')}
             placeholder={translate('text_6584550dc4cec7adf8615053')}
           />
-        </InlineInputs>
+        </div>
 
         <TextInputField
           name="apiKey"
@@ -294,28 +294,9 @@ export const AddAdyenDialog = forwardRef<AddAdyenDialogRef>((_, ref) => {
             formikProps={formikProps}
           />
         )}
-      </Content>
+      </div>
     </Dialog>
   )
 })
 
-const Content = styled.div`
-  margin-bottom: ${theme.spacing(8)};
-
-  > *:not(:last-child) {
-    margin-bottom: ${theme.spacing(6)};
-  }
-`
-
-const InlineInputs = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${theme.spacing(6)};
-
-  > * {
-    flex: 1;
-  }
-`
-
 AddAdyenDialog.displayName = 'AddAdyenDialog'

src/components/settings/integrations/AddAnrokDialog.tsx

@@ -4,7 +4,6 @@ import { useFormik } from 'formik'
 import { forwardRef, RefObject, useId, useImperativeHandle, useRef, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { generatePath } from 'react-router-dom'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
@@ -24,7 +23,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { AnrokIntegrationDetailsTabs } from '~/pages/settings/AnrokIntegrationDetails'
-import { theme } from '~/styles'
 
 import { DeleteAnrokIntegrationDialogRef } from './DeleteAnrokIntegrationDialog'
 
@@ -232,9 +230,10 @@ export const AddAnrokDialog = forwardRef<AddAnrokDialogRef>((_, ref) => {
         </Stack>
       )}
     >
-      <Content>
-        <InlineInputs>
+      <div className="mb-8 flex flex-col gap-6">
+        <div className="flex flex-row items-start gap-6">
           <TextInputField
+            className="flex-1"
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             formikProps={formikProps}
@@ -243,12 +242,13 @@ export const AddAnrokDialog = forwardRef<AddAnrokDialogRef>((_, ref) => {
             placeholder={translate('text_6584550dc4cec7adf861504f')}
           />
           <TextInputField
+            className="flex-1"
             formikProps={formikProps}
             name="code"
             label={translate('text_6584550dc4cec7adf8615051')}
             placeholder={translate('text_6584550dc4cec7adf8615053')}
           />
-        </InlineInputs>
+        </div>
 
         <TextInputField
           name="apiKey"
@@ -257,28 +257,9 @@ export const AddAnrokDialog = forwardRef<AddAnrokDialogRef>((_, ref) => {
           placeholder={translate('text_666887f6c4d092aa1e1a847e')}
           formikProps={formikProps}
         />
-      </Content>
+      </div>
     </Dialog>
   )
 })
 
-const Content = styled.div`
-  margin-bottom: ${theme.spacing(8)};
-
-  > *:not(:last-child) {
-    margin-bottom: ${theme.spacing(6)};
-  }
-`
-
-const InlineInputs = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${theme.spacing(6)};
-
-  > * {
-    flex: 1;
-  }
-`
-
 AddAnrokDialog.displayName = 'AddAnrokDialog'