From 0037955be863bfeec2be547bf9768699be24564c Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Fri, 10 Sep 2021 14:27:28 +0700
Subject: [PATCH] :sparkles: feat: Delivery Item

---
 .../DeliveryItem/DeliveryItem.module.scss     | 19 ++++++--
 .../IdAndStatus/IdAndStatus.module.scss       | 47 ++++++++++++++++++-
 .../components/Products/Products.module.scss  | 12 +++++
 .../components/Products/Products.tsx          |  3 +-
 .../components/ReOrder/ReOrder.module.scss    | 14 +++++-
 .../TotalPrice/TotalPrice.module.scss         | 20 +++++++-
 6 files changed, 105 insertions(+), 10 deletions(-)
 create mode 100644 src/components/modules/account/DeliveryItem/components/Products/Products.module.scss

diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
index e7d9e9f9b..b83b77fd3 100644
--- a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
index 02059df48..d50ecd115 100644
--- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
+++ b/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;
diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.module.scss b/src/components/modules/account/DeliveryItem/components/Products/Products.module.scss
new file mode 100644
index 000000000..f05d6395b
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
index a9dcc70dc..fdbba2c73 100644
--- a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
+++ b/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>
     )
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
index 49a33aa79..b46b528e1 100644
--- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
+++ b/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;
     }
diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
index b4d128781..9a4f795b3 100644
--- a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
+++ b/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;
+        }
     }
 }
\ No newline at end of file