ft seller side info (#61)

* ft-seller-side-info * requested changes
atlp-rwanda · Aug 2, 2024 · 6ddaf9a · 6ddaf9a
1 parent 4fe597e
commit 6ddaf9a
Show file tree

Hide file tree

Showing 6 changed files with 337 additions and 75 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -30,4 +30,5 @@
 @import "./assets/styles/tables.scss";
 @import "./assets/styles/adminDashboard.scss";
 @import "./assets/styles/users.scss";
-@import "./assets//styles/UserProfile.scss"
+@import "./assets//styles/UserProfile.scss";
+@import "./assets/styles/SellerSideProduct.scss";
diff --git a/src/assets/styles/SellerLayout.scss b/src/assets/styles/SellerLayout.scss
@@ -155,21 +155,100 @@
                 height: 40%;
                 border-radius: 20px;
                 display: flex;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
                 padding: 2rem;
+                .profile-image {
+                        border-radius: 50%;
+                        height: 6rem;
+                        border: 0.2rem solid #FF6D18;
+                        width: 6rem;
+                        object-fit: cover;
+                        margin-bottom: 1rem;
+                }
+                .profile-name {
+                    font-size: 1.8rem;
+                    font-weight: 600;
+                    color: $text-color;
+                    margin: 0;
+                }
+                .profile-edit {
+                    font-size: 1.4rem;
+                    color: $text-color;
+                    background-color: #ffede2;
+                    margin: 0;
+                    cursor: pointer;
+                    border: none;
+                    color: $primary-color;
+                    border-radius: 2rem;
+                    padding: 0.5rem 1.8rem;
+                    margin-top: 1rem;
+                    font-size: 1.4rem;
+                    .icon-edit {
+                        color: $primary-color;
+                        margin-left: 1rem;
+                    }
+                }
+                .progress-bar-container {
+                    display: flex;
+                    align-items: center;
+                    font-size: 1.4rem;
+                    margin-top: 1rem;
+                    color: $text-color;
+                    .order-progress {
+                        color: $primary-color;
+                        margin-left: 0.5rem;
+                        margin-right: 0.5rem;
+                    }
+                  }
+
+                  .progress-bar {
+                    width: 3rem;
+                    height: 1rem;
+                    background-color: #e0e0e0;
+                    border-radius: 0.5rem;
+                    overflow: hidden;
+                  }
+
+                  .progress-bar-fill {
+                    height: 100%;
+                    transition: width 0.3s ease;
+                  }
             }
 
             .right-products {
+                .loader {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 50vh;
+                  }
                 background-color: $white-color;
                 height: 60%;
+                overflow-y: scroll;
+                scroll-behavior: smooth;
                 border-radius: 20px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
                 box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
-                padding: 2rem;
+                padding: 1rem;
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+                .right-header {
+                    font-size: 1.4rem;
+                    color: #000;
+                }
+                .product-header{
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0.3rem 0.9rem;
+                    border-radius: 2rem;
+                    margin-top: 1rem;
+                    background-color: #d9d9d9;
+                    color: #FF6D18;
+                }
             }
         }
     }

diff --git a/src/assets/styles/SellerSideProduct.scss b/src/assets/styles/SellerSideProduct.scss
@@ -0,0 +1,49 @@
+
+.product-card {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.7rem;
+    border-radius: 1rem;
+    background-color: #fff;
+    box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
+    margin: 1rem 0;
+
+    &__number {
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin-right: 1.2rem;
+    }
+
+    &__image {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 10%;
+    }
+
+    &__details {
+        flex-grow: 1;
+        margin-left: 1rem;
+
+        &__title {
+            font-size: 16px;
+            font-weight: bold;
+        }
+    }
+
+    &__availability {
+        font-size: 0.7rem;
+        font-weight: bold;
+        padding: 0.2rem 0.6rem;
+        border-radius: 0.5rem;
+
+        &.available {
+            color: rgb(3, 216, 3);
+            background-color: rgba(3, 216, 3, 0.3);
+        }
+
+        &.unavailable {
+            color: #fff;
+            background-color: #f44336;
+        }
+    }
+}