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 ( -