✨ feat: Delivery Item

src/components/modules/account/DeliveryItem/DeliveryItem.module.scss

@@ -1,15 +1,26 @@
 @import '../../../../styles/utilities';
 
 .deliveryItem {
-    @apply flex bg-white items-center;
-    border-radius: 5% 5% 5% 5%/ 25% 45% 35% 35%;;
+    @apply flex bg-white items-center custom-border-radius;
     margin-bottom: 1.6rem;
+    border: 1px solid var(--primary)
 }
 
 .separator {
     border-left: 2px dashed #EBEBEB;
-    margin-left: 2.4rem;
-    margin-right: 2.4rem;
     max-height: 9.2rem;
     min-height: 8.6rem;
+
+    margin-left: .6rem;
+    margin-right: .6rem;
+
+    @screen md {
+        margin-left: .8rem;
+        margin-right: .8rem;
+    }
+
+    @screen lg {
+        margin-left: 2.4rem;
+        margin-right: 2.4rem;
+    }
 }

src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss

@@ -2,7 +2,52 @@
 
 .idAndStatus {
     @apply items-center;
-    padding: 2.4rem 0 2.4rem 2.4rem;
+    padding: 2.4rem 0 2.4rem 1rem;
+
+    @screen md {
+        padding: 2.4rem 0 2.4rem 1.2rem;
+    }
+
+    @screen lg {
+        padding: 2.4rem 0 2.4rem 2.4rem;
+    }
+
+    .id {
+        @apply font-bold;
+        margin-bottom: .8rem;
+    }
+
+    .deliveryStatus {
+        @apply font-bold text-white;
+        font-size: 1.2rem;
+        line-height: 2rem;
+        padding: 0 .8rem;
+        border-radius: 0.5rem;
+        width: fit-content;
+
+        &.waiting {
+            background-color: #D9A645;
+        }
+        &.delivering {
+            background-color: var(--info-dark);
+        }
+        &.delivered {
+            background-color: var(--primary);
+        }
+    }
+}@import '../../../../../../styles/utilities';
+
+.idAndStatus {
+    @apply items-center;
+    padding: 2.4rem 0 2.4rem 1rem;
+
+    @screen md {
+        padding: 2.4rem 0 2.4rem 1.2rem;
+    }
+
+    @screen lg {
+        padding: 2.4rem 0 2.4rem 2.4rem;
+    }
 
     .id {
         @apply font-bold;

src/components/modules/account/DeliveryItem/components/Products/Products.module.scss

@@ -0,0 +1,12 @@
+@import '../../../../../../styles/utilities';
+
+.products {
+    margin-top: .8rem;    
+    max-width: 32%;
+    min-width: none;
+
+    @screen lg {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}

src/components/modules/account/DeliveryItem/components/Products/Products.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import s from './Products.module.scss'
 
 interface ProductsProps {
     products: string[];
@@ -19,7 +20,7 @@ const Products = ({ products } : ProductsProps) => {
     }
 
     return (
-        <div className="products">
+        <div className={s.products}>
             {toString(products)}
         </div>
     )

src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss

@@ -2,10 +2,20 @@
 
 .reOrder {
     @apply text-white custom-border-radius hidden font-bold;
-    padding: .8rem 1.2rem;
-    margin-right: 2.4rem;
+    padding: .4rem .6rem;
+    margin-right: 1rem;
     background-color: var(--primary);
 
+    @screen md {
+        padding: .4rem .6rem;
+        margin-right: 1.2rem;
+    }
+
+    @screen lg {
+        padding: .8rem 1.2rem;
+        margin-right: 2.4rem;
+    }
+
     &.show {
         @apply block;
     }

src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss

@@ -2,9 +2,25 @@
 
 .totalPrice {
     margin-left: auto; 
-    margin-right: 2.4rem;
+    margin-right: 1rem;
+
+    @screen md {
+        margin-right: 1.2rem;
+    }
+
+    @screen lg {
+        margin-right: 2.4rem;
+    }
 
     .price {
-        @apply font-bold sub-headline;
+        @apply font-bold ;
+
+        @screen md {
+            @apply topline
+        }
+    
+        @screen lg {
+            @apply sub-headline;
+        }
     }
 }