Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe…

… into ft-become-seller
atlp-rwanda · Aug 21, 2024 · d07820e · d07820e
2 parents 1f96c7d + 910ebf6
commit d07820e
Show file tree

Hide file tree

Showing 30 changed files with 1,929 additions and 463 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="./assets/images/logo.png" type="image/png" />
-    <title>E-Commerce Ninjas FrontEnd</title>
+    <title>E-Commerce Ninjas</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.scss b/src/App.scss
@@ -44,10 +44,11 @@
 @import "./assets//styles/UserProfile.scss";
 @import "./assets/styles/SellerSideProduct.scss";
 @import "./assets/styles/SellerDeleteItem.scss";
-@import "./assets/styles/ServicesPage.scss"
-;
 @import "./assets/styles/verticalStepper.scss";
 @import "./assets/styles/requests.scss";
 @import "./assets/styles/AboutUs.scss";
 @import "./assets/styles/UserDetails.scss";
-@import "./assets/styles/SellerRegistration.scss"
+@import "./assets/styles/SellerRegistration.scss";
+@import "./assets/styles/ServicesPage.scss";
+@import "./assets/styles/Settings.scss";
+@import "./assets/styles/HomePage.scss";
diff --git a/src/assets/styles/HomePage.scss b/src/assets/styles/HomePage.scss
@@ -0,0 +1,28 @@
+.banner {
+    background-color: $primary-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    color: $white;
+    font-size: 2rem;
+    padding: 1rem;
+
+    .btn-link {
+        background-color: $primary-color-light;
+        border: none;
+        padding: 1rem 2rem;
+        border-radius: 5px;
+        cursor: pointer;
+        color: $white;
+        transition: all 0.5s ease-in-out;
+
+        &:hover {
+            background-color: $menu-hover;
+            transition: all 0.5s ease-in-out;
+            color: $text2-color;
+
+        }
+    }
+
+}
diff --git a/src/assets/styles/Settings.scss b/src/assets/styles/Settings.scss
@@ -0,0 +1,201 @@
+.settings {
+    border: 1px solid $border-color;
+    width: 100%;
+    height: 100%;
+    background-color: $white-color;
+
+    h2 {
+        margin: 0;
+        padding: 2%;
+        font-size: 2.5rem;
+        font-weight: bold;
+        text-align: left;
+    }
+
+    .menu-bar {
+        display: flex;
+        margin: 0 2.5rem;
+        border-bottom: 1px solid #ddd;
+
+
+        .menu-item {
+            cursor: pointer;
+            font-size: 1.3rem;
+
+            p {
+                margin-right: 1rem;
+                padding: 1rem;
+
+                &.active {
+                    background-color: $primary-color-light;
+                    color: $primary-color;
+                    padding: 1rem;
+                    border-bottom: 1px solid $primary-color;
+                    transition: padding .2s ease-in-out;
+                }
+            }
+
+        }
+    }
+
+
+    .section_container {
+        flex-grow: 1;
+        padding: 0 2.5rem;
+
+        .loading__spinner {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 50rem;
+
+        }
+
+        .section-content {
+            background-color: white;
+            overflow-y: auto;
+            padding: 10px;
+            height: 70vh;
+
+
+            label {
+                font-size: 2.5rem;
+                font-weight: bold;
+            }
+
+            .password_exp {
+                background-color: $secondary-color-light;
+                padding: 2rem 5rem;
+                border-radius: .5rem;
+                margin-bottom: 2rem;
+
+                .form-group {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 20px;
+
+                    input {
+                        padding: 10px;
+                        border: 1px solid #ddd;
+                        border-radius: 5px;
+                        font-size: 1.4rem;
+                        width: 30%;
+                    }
+                }
+
+                .btn {
+                    padding: 10px 20px;
+                    background-color: $primary-color;
+                    color: $white-color;
+                    border: none;
+                    border-radius: 5px;
+                    font-size: 1.6rem;
+                    width: 8rem;
+                    cursor: pointer;
+                    transition: width 0.5s linear;
+
+                    &:hover {
+                        background-color: $primary-color-dark;
+                        width: 10rem;
+                        transition: width 0.5s linear;
+                    }
+                }
+            }
+
+            .terms {
+                background-color: $secondary-color-light;
+                padding: 2rem 5rem;
+                border-radius: .5rem;
+                margin-bottom: 2rem;
+
+                .nav__terms {
+                    padding-bottom: 1rem;
+
+                    .terms__link {
+                        padding: 1rem;
+
+                        &.active {
+                            background-color: $primary-color-light;
+                            border-bottom: 1px solid $primary-color;
+                            color: $primary-color;
+                        }
+                    }
+
+                    ul {
+                        display: flex;
+                        list-style: none;
+                        margin: 0;
+                        padding: 0;
+                        cursor: pointer;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+
+                        li {
+                            font-size: 1.5rem;
+                        }
+                    }
+                }
+
+                form {
+                    padding: 0;
+                    margin: 2rem 0;
+
+                    div:first-child {
+                        margin: 20px 0;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+
+                        textarea {
+                            padding: 10px;
+                            border: 1px solid #ddd;
+                            border-radius: 5px;
+                            font-size: 1.4rem;
+                            width: 50%;
+                            height: 100px;
+
+                            &:hover {
+                                border-color: $primary-color;
+                            }
+                        }
+
+                        select {
+                            border: 1px solid #ddd;
+                            border-radius: 5px;
+                            font-size: 1.4rem;
+                            height: 30%;
+                            width: 20%;
+                            margin: 2rem 0;
+
+                            &:hover {
+                                border-color: $primary-color;
+                            }
+                        }
+                    }
+
+                    .form-group {
+                        .btn {
+                            padding: 10px 20px;
+                            background-color: $primary-color;
+                            color: $white-color;
+                            border: none;
+                            border-radius: 5px;
+                            font-size: 1.6rem;
+                            width: 8rem;
+                            cursor: pointer;
+                            transition: width 0.5s linear;
+
+                            &:hover {
+                                background-color: $primary-color-dark;
+                                width: 10rem;
+                                transition: width 0.5s linear;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}
diff --git a/src/assets/styles/adminDashboard.scss b/src/assets/styles/adminDashboard.scss
@@ -19,9 +19,7 @@
       flex-direction: column;
       height: 100%;
       width: 100%;
-      .dashboard,
-      .users,
-      .logout {
+      .menu__item,.logout {
         display: flex;
         align-items: center;
         padding-left: 1rem;
@@ -214,5 +212,17 @@
 .dropdown-item:hover {
   background-color: #f1f1f1;
 }
-@media only screen and (min-width: 76.8rem) {
+
+.password-expiration-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.password-expiration-input {
+  padding: 8px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }