Fix: Add register product button

luisfbl · Jan 29, 2025 · 2a863ce · 2a863ce
1 parent eed4ec8
commit 2a863ce
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 4 deletions.
diff --git a/web/src/pages/users/@me/products.astro b/web/src/pages/users/@me/products.astro
@@ -29,6 +29,7 @@ export const prerender = false
         <div class="line" />
         <main>
             <SellerProductsList products={products} />
+            <a href="/users/@me/products/edit" class="add_product_button">Cadastrar</a>
         </main>
     </Fragment>
 </BaseLayout>
diff --git a/web/src/styles/layouts/orders.scss b/web/src/styles/layouts/orders.scss
@@ -28,6 +28,7 @@
             .order_author {
                 color: colors.$mid_1;
                 font-size: 1.1em;
+                text-transform: capitalize;
             }
 
             .order_price {
@@ -61,7 +62,22 @@
 
             .status_awaiting {
                 background-color: #BF9454A6;
-                color: colors.$group4_color_2;
+                color: colors.$mid_1;
+            }
+
+            .status_pending {
+                background-color: colors.$group3_color_1;
+                color: colors.$lightest;
+            }
+
+            .status_confirmed {
+                background-color: colors.$group1_color_2;
+                color: colors.$lightest;
+            }
+
+            .status_cancelled {
+                background-color: colors.$group2_color_2;
+                color: colors.$lightest;
             }
         }
     }

diff --git a/web/src/styles/pages/users/@me/order.scss b/web/src/styles/pages/users/@me/order.scss
@@ -52,10 +52,10 @@ main {
 
     .client_card {
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
         gap: 0.8rem;
-        padding: 10px 2px;
+        padding: 10px 15px;
 
         border-radius: 13px;
 
@@ -82,6 +82,8 @@ main {
             text-decoration: none;
 
             font-weight: 700;
+
+            min-width: fit-content;
         }
     }
 
@@ -124,7 +126,7 @@ main {
         transform: translateX(-50%);
         bottom: 85px;
 
-        background-color: colors.$group1_color_3;
+        background-color: colors.$group2_color_2;
         color: colors.$lightest;
 
         font-size: 1.1em;
@@ -145,4 +147,114 @@ main {
 .line {
     width: 100%;
     max-width: 430px !important;
+}
+
+.order_modal {
+    position: fixed;
+
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    left: 0;
+    top: 0;
+
+    width: 100%;
+    height: 100%;
+
+    padding-left: 10px;
+    padding-right: 10px;
+
+    background-color: adjust-color($color: colors.$dark_1, $alpha: -0.8);
+
+    z-index: 11;
+
+    .modal_content {
+        background-color: colors.$lightest;
+        padding: 18px;
+
+        z-index: 12;
+
+        width: 100%;
+        max-width: 430px;
+
+        border-radius: 20px 20px 0 0;
+
+        .modal_header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            width: 100%;
+
+            h2 {
+                font-size: 1.3em;
+                margin-left: auto;
+
+                transform: translateX(13px);
+            }
+
+            .close {
+                margin-left: auto;
+                object-fit: contain;
+            }
+
+            padding-bottom: 8px;
+            border-bottom: 1.5px solid scale-color($color: colors.$light_1, $alpha: -45%);
+        }
+
+        h2 {
+            text-align: center;
+        }
+
+        h3 {
+            color: colors.$dark-sec;
+            font-size: 1.1em;
+            font-weight: normal;
+
+            text-align: center;
+
+            margin: 1.2rem auto 0.3rem auto;
+        }
+
+        .centered {
+            width: fit-content;
+            max-width: 100%;
+
+            margin: auto;
+        }
+
+        .order_buttons {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            margin: auto;
+            gap: 0.8rem;
+
+            .order_button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                width: 100%;
+                max-width: 380px;
+                margin: 0.5rem auto;
+
+                padding: 15px;
+                border-radius: 9px;
+                font-size: 1.05em;
+            }
+
+            .order_confirm { 
+                background-color: colors.$group2_color_2;
+                color: colors.$lightest;
+            }
+
+            .order_cancel {
+                background-color: #58585840;
+                color: colors.$mid_1;
+            }
+        }
+    }
 }
diff --git a/web/src/styles/pages/users/@me/products.scss b/web/src/styles/pages/users/@me/products.scss
@@ -24,6 +24,28 @@ main {
     margin-top: 2rem;
 }
 
+.add_product_button {
+    position: fixed;
+    display: block;
+
+    width: fit-content;
+    max-width: 100%;
+    padding: 15px 10px;
+
+    border: none;
+    border-radius: 8px;
+    text-decoration: none;
+
+    right: 1.5rem;
+    bottom: 85px;
+
+    background-color: colors.$group1_color_2;
+    color: colors.$lightest;
+
+    font-size: 1.1em;
+    font-weight: 600;
+}
+
 .line {
     width: 100%;
     max-width: 430px !important;