refactor(app): simplify styles

everton-dgn · Feb 16, 2024 · 6c46e5c · 6c46e5c
1 parent c4ec9c3
commit 6c46e5c
Showing 1 changed file with 10 additions and 53 deletions.
diff --git a/src/app/(home)/components/ContentCustomerOrderModal/SkeletonContentCustomerOrderModal.tsx b/src/app/(home)/components/ContentCustomerOrderModal/SkeletonContentCustomerOrderModal.tsx
@@ -2,64 +2,21 @@ import { Skeleton } from 'components/atoms'
 
 const SkeletonSection = () => (
   <>
-    <Skeleton width="100%" height="70px" />
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        gap: '8px',
-        padding: '8px 24px 24px 24px'
-      }}
-    >
-      {Array.from({ length: 4 }, (_, i) => (
-        <Skeleton
-          key={i}
-          height="16px"
-          borderRadius="4px"
-          margin={[i === 0 ? 8 : 4, 0, 4, 0]}
-        />
-      ))}
+    <Skeleton height="70px" />
+    <div className="col-full gap-16 px-24 pt-24 pb-24">
+      <Skeleton variant="text" count={4} />
     </div>
   </>
 )
 
 export const SkeletonContentCustomerOrderModal = () => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%'
-    }}
-  >
-    <Skeleton height="auto" aspectRatio="600/317" margin={[0, 0, 12, 0]} />
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        gap: '8px',
-        padding: '0 24px 24px 24px'
-      }}
-    >
-      <Skeleton
-        width="174px"
-        height="24px"
-        margin={[12, 0, 12, 0]}
-        borderRadius="4px"
-      />
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          gap: '8px',
-          height: '100%'
-        }}
-      >
-        <Skeleton height="16px" borderRadius="4px" />
-        <Skeleton height="16px" borderRadius="4px" />
-        <Skeleton width="100px" height="16px" borderRadius="4px" />
+  <div className="col-full">
+    <Skeleton className="mb-12 h-auto" aspectRatio="600/317" />
+    <div className="col-full gap-8 px-24 pb-24">
+      <Skeleton variant="text" className="my-12" width="174px" height="24px" />
+      <div className="col-full gap-8 h-100">
+        <Skeleton variant="text" count={2} />
+        <Skeleton variant="text" width="100px" />
       </div>
     </div>
     <SkeletonSection />