misc: migrate some Skeleton to use the new API

src/components/OverviewCard.tsx

@@ -1,9 +1,7 @@
-import { Stack } from '@mui/material'
 import { FC } from 'react'
-import styled from 'styled-components'
 
 import { Icon, Skeleton, Tooltip, Typography } from '~/components/designSystem'
-import { Card, theme } from '~/styles'
+import { Card } from '~/styles'
 
 interface OverviewCardProps {
   title: string
@@ -25,47 +23,32 @@ export const OverviewCard: FC<OverviewCardProps> = ({
   return (
     <Card $padding={6} $flexItem $childSpacing={4}>
       {isLoading ? (
-        <SkeletonWrapper>
-          <Skeleton width={90} variant="text" />
-          <Stack gap={4}>
-            <Skeleton width={200} variant="text" />
-            <Skeleton width={50} variant="text" />
-          </Stack>
-        </SkeletonWrapper>
+        <div className="h-22">
+          <Skeleton className="mb-8 w-22" variant="text" />
+          <div className="flex flex-col gap-4">
+            <Skeleton className="w-50" variant="text" />
+            <Skeleton className="w-12" variant="text" />
+          </div>
+        </div>
       ) : (
         <>
-          <CardHeader>
+          <div className="mb-4 flex items-center gap-2">
             <Typography variant="captionHl">{title}</Typography>
             {tooltipContent && (
               <Tooltip className="flex h-5 items-end" placement="top-start" title={tooltipContent}>
                 <Icon name="info-circle" />
               </Tooltip>
             )}
-          </CardHeader>
+          </div>
 
-          <Stack gap={1}>
+          <div className="flex flex-col gap-1">
             <Typography variant="subhead" color={isAccentContent ? 'warning700' : 'grey700'}>
               {content}
             </Typography>
             <Typography variant="caption">{caption}</Typography>
-          </Stack>
+          </div>
         </>
       )}
     </Card>
   )
 }
-
-const CardHeader = styled.div`
-  display: flex;
-  gap: ${theme.spacing(2)};
-  align-items: center;
-  margin-bottom: ${theme.spacing(4)};
-`
-
-const SkeletonWrapper = styled.div`
-  height: 88px;
-
-  > *:not(:last-child) {
-    margin-bottom: ${theme.spacing(8)};
-  }
-`

src/components/SkeletonDetailsPage.tsx

@@ -1,68 +1,31 @@
-import styled from 'styled-components'
-
-import { NAV_HEIGHT, theme } from '~/styles'
+import { PropsWithChildren } from 'react'
 
 import { Skeleton } from './designSystem'
 
 const SkeletonDetailsPage = () => {
   return (
     <div>
-      <SkeletonHeader>
-        <Skeleton variant="text" width={312} height={12} />
-      </SkeletonHeader>
-      <SkeletonBody>
-        <SkeletonBodyFirst>
-          <Skeleton variant="text" width={80} height={12} />
-          <Skeleton variant="text" width={200} height={12} />
-        </SkeletonBodyFirst>
-        <SkeletonBodySecond>
-          <SkeletonBodyFirst>
-            <Skeleton variant="text" width={80} height={12} />
-            <Skeleton variant="text" width={200} height={12} />
-          </SkeletonBodyFirst>
-          <SkeletonBodyFirst>
-            <Skeleton variant="text" width={80} height={12} />
-            <Skeleton variant="text" width={200} height={12} />
-          </SkeletonBodyFirst>
-        </SkeletonBodySecond>
-      </SkeletonBody>
+      <div className="flex h-18 items-center">
+        <Skeleton className="w-78" variant="text" />
+      </div>
+      <div className="grid grid-cols-2 gap-6">
+        {[0, 1, 2, 3].map((i) => (
+          <div className="flex flex-col gap-3 pb-3 pt-1" key={`skeleton-details-page-${i}`}>
+            {i !== 1 && (
+              <>
+                <Skeleton className="w-20" variant="text" />
+                <Skeleton className="w-50" variant="text" />
+              </>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
 
 export default SkeletonDetailsPage
 
-const SkeletonHeader = styled.div`
-  height: ${NAV_HEIGHT}px;
-  display: flex;
-  align-items: center;
-`
-
-const SkeletonBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${theme.spacing(6)};
-`
-
-const SkeletonBodyFirst = styled.div`
-  width: 100%;
-  padding: ${theme.spacing(1)} 0 ${theme.spacing(2)} 0;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: ${theme.spacing(3)};
-`
-
-const SkeletonBodySecond = styled.div`
-  width: 100%;
-  padding: ${theme.spacing(1)} 0 ${theme.spacing(2)} 0;
-  box-sizing: border-box;
-  display: flex;
-  gap: ${theme.spacing(4)};
-`
-
-export const LoadingSkeletonWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${theme.spacing(12)};
-`
+export const LoadingSkeletonWrapper = ({ children }: PropsWithChildren) => (
+  <div className="flex flex-col gap-12">{children}</div>
+)

src/components/addOns/AddOnItem.tsx

@@ -22,14 +22,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { ListKeyNavigationItemProps } from '~/hooks/ui/useListKeyNavigation'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import {
-  BaseListItem,
-  ItemContainer,
-  ListItemLink,
-  MenuPopper,
-  PopperOpener,
-  theme,
-} from '~/styles'
+import { BaseListItem, ItemContainer, ListItemLink, MenuPopper, PopperOpener } from '~/styles'
 
 gql`
   fragment AddOnItem on AddOn {
@@ -160,9 +153,9 @@ export const AddOnItem = ({
 export const AddOnItemSkeleton = () => {
   return (
     <BaseListItem>
-      <Skeleton variant="connectorAvatar" size="big" marginRight={theme.spacing(3)} />
-      <Skeleton variant="text" height={12} width={240} marginRight="auto" />
-      <Skeleton variant="text" height={12} width={160} />
+      <Skeleton className="mr-3" variant="connectorAvatar" size="big" />
+      <Skeleton className="mr-auto w-60" variant="text" />
+      <Skeleton className="w-40" variant="text" />
     </BaseListItem>
   )
 }

src/components/billableMetrics/BillableMetricItem.tsx

@@ -21,14 +21,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { ListKeyNavigationItemProps } from '~/hooks/ui/useListKeyNavigation'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import {
-  BaseListItem,
-  ItemContainer,
-  ListItemLink,
-  MenuPopper,
-  PopperOpener,
-  theme,
-} from '~/styles'
+import { BaseListItem, ItemContainer, ListItemLink, MenuPopper, PopperOpener } from '~/styles'
 
 import { DeleteBillableMetricDialogRef } from './DeleteBillableMetricDialog'
 
@@ -139,9 +132,9 @@ export const BillableMetricItem = memo(
 export const BillableMetricItemSkeleton = () => {
   return (
     <BaseListItem>
-      <Skeleton variant="connectorAvatar" size="big" marginRight={theme.spacing(3)} />
-      <Skeleton variant="text" height={12} width={240} marginRight="auto" />
-      <Skeleton variant="text" height={12} width={240} />
+      <Skeleton className="mr-3" variant="connectorAvatar" size="big" />
+      <Skeleton className="mr-auto w-60" variant="text" />
+      <Skeleton className="w-60" variant="text" />
     </BaseListItem>
   )
 }

src/components/billableMetrics/DeleteBillableMetricDialog.tsx

@@ -76,7 +76,7 @@ export const DeleteBillableMetricDialog = forwardRef<DeleteBillableMetricDialogR
       disableOnContinue={loading}
       title={
         loading ? (
-          <Skeleton variant="text" width="100%" height={16} marginBottom={20} />
+          <Skeleton className="mb-5 h-4 w-full" variant="text" />
         ) : (
           translate('text_6256f824b6368e01153caa47', {
             billableMetricName: name,
@@ -86,9 +86,9 @@ export const DeleteBillableMetricDialog = forwardRef<DeleteBillableMetricDialogR
       description={
         loading ? (
           <>
-            <Skeleton variant="text" width="100%" marginBottom={16} />
-            <Skeleton variant="text" width="100%" marginBottom={16} />
-            <Skeleton variant="text" width="100%" />
+            <Skeleton className="mb-4 w-full" variant="text" />
+            <Skeleton className="mb-4 w-full" variant="text" />
+            <Skeleton className="w-full" variant="text" />
           </>
         ) : (billableMetric?.draftInvoicesCount || 0) > 0 ||
           billableMetric?.activeSubscriptionsCount ||

src/components/coupons/CouponItem.tsx

@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { RefObject } from 'react'
 import { generatePath } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { ConditionalWrapper } from '~/components/ConditionalWrapper'
 import { CouponCaption } from '~/components/coupons/CouponCaption'
@@ -25,14 +24,8 @@ import { CouponItemFragment, CouponStatusEnum } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { ListKeyNavigationItemProps } from '~/hooks/ui/useListKeyNavigation'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
-import {
-  BaseListItem,
-  ItemContainer,
-  ListItemLink,
-  MenuPopper,
-  PopperOpener,
-  theme,
-} from '~/styles'
+import { BaseListItem, ItemContainer, ListItemLink, MenuPopper, PopperOpener } from '~/styles'
+import { tw } from '~/styles/utils'
 
 gql`
   fragment CouponItem on Coupon {
@@ -102,27 +95,31 @@ export const CouponItem = ({
           </ListItemLink>
         )}
       >
-        <CouponNameSection>
+        <div className="mr-auto flex min-w-0 items-center">
           <Avatar className="mr-3" size="big" variant="connector">
             <Icon name="coupon" color="dark" />
           </Avatar>
-          <NameBlock>
+          <div className="min-w-0">
             <Typography color="textSecondary" variant="bodyHl" noWrap>
               {name}
             </Typography>
             <CouponCaption coupon={coupon} variant="caption" />
-          </NameBlock>
-        </CouponNameSection>
-        <CouponInfosSection $shouldShowItemActions={shouldShowItemActions}>
-          <SmallCell>{customersCount}</SmallCell>
-          <MediumCell>
+          </div>
+        </div>
+        <div
+          className={tw('mr-0 flex', {
+            'mr-6': shouldShowItemActions,
+          })}
+        >
+          <div className="mr-6 hidden w-24 text-right md:block">{customersCount}</div>
+          <div className="mr-6 hidden w-28 md:block">
             {!expirationAt
               ? translate('text_62876a50ea3bba00b56d2c2c')
               : formatTimeOrgaTZ(expirationAt)}
-          </MediumCell>
-          <StatusCell>{<Status {...formattedStatus} />}</StatusCell>
-        </CouponInfosSection>
-        {shouldShowItemActions && <ButtonMock />}
+          </div>
+          <div className="hidden w-26 md:block">{<Status {...formattedStatus} />}</div>
+        </div>
+        {shouldShowItemActions && <div className="w-10" />}
       </ConditionalWrapper>
 
       {shouldShowItemActions && (
@@ -211,63 +208,13 @@ export const CouponItem = ({
 export const CouponItemSkeleton = () => {
   return (
     <BaseListItem>
-      <Skeleton variant="connectorAvatar" size="big" marginRight={theme.spacing(3)} />
-      <Skeleton variant="text" height={12} width={240} />
-      <RightSkeletonContainer>
-        <Skeleton variant="text" height={12} width={100} />
-        <Skeleton variant="text" height={12} width={100} />
-        <Skeleton variant="text" height={12} width={100} />
-      </RightSkeletonContainer>
+      <Skeleton className="mr-3" variant="connectorAvatar" size="big" />
+      <Skeleton className="w-60" variant="text" />
+      <div className="mr-17 flex w-full justify-end gap-7">
+        <Skeleton className="w-25" variant="text" />
+        <Skeleton className="w-25" variant="text" />
+        <Skeleton className="w-25" variant="text" />
+      </div>
     </BaseListItem>
   )
 }
-
-const CouponNameSection = styled.div`
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-`
-
-const NameBlock = styled.div`
-  min-width: 0;
-`
-
-const CouponInfosSection = styled.div<{ $shouldShowItemActions: boolean }>`
-  display: flex;
-
-  margin-right: ${({ $shouldShowItemActions }) => ($shouldShowItemActions ? theme.spacing(6) : 0)};
-
-  > *:not(:last-child) {
-    margin-right: ${theme.spacing(6)};
-
-    ${theme.breakpoints.down('md')} {
-      display: none;
-    }
-  }
-`
-
-const MediumCell = styled(Typography)`
-  width: 112px;
-`
-
-const StatusCell = styled.div`
-  width: 104px;
-`
-
-const SmallCell = styled(Typography)`
-  text-align: right;
-  width: 96px;
-`
-
-const ButtonMock = styled.div`
-  width: 40px;
-`
-
-const RightSkeletonContainer = styled.div`
-  width: 100%;
-  display: flex;
-  gap: 27px;
-  justify-content: end;
-  margin-right: 70px;
-`

src/components/customerPortal/common/CustomerPortalLoading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '~/components/designSystem/Skeleton'
 
 const CustomerPortalLoading = () => (
   <div className="flex items-center">
-    <Skeleton variant="text" height={12} width={120} />
+    <Skeleton className="w-30" variant="text" />
     <Skeleton className="mr-3" variant="connectorAvatar" size="big" />
   </div>
 )