From 4b243a5e1e41f576d6cc165ac168b91b15130725 Mon Sep 17 00:00:00 2001 From: surajb Date: Mon, 15 Jul 2024 15:55:45 +0530 Subject: [PATCH] css changes --- db.json | 35 +- src/App.jsx | 2 +- .../{Brookslogo.svg => BrookslogoIcon.svg} | 4 +- src/components/Auth/LoginPage.css | 36 +- src/components/Auth/LoginPage.jsx | 2 +- src/components/admin/AdminDashboard.jsx | 46 +- src/components/admin/Dashboard.css | 14 +- src/components/categories/CategoryList.jsx | 139 +- src/components/categories/ProductList.jsx | 34 - src/components/categories/ProductRow.jsx | 47 + src/components/customer/AddCustomer.jsx | 8 +- src/components/customer/CustomerList.css | 14 +- src/components/customer/CustomerList.jsx | 2 +- .../customer/CustomerMeasurements.jsx | 4 +- src/components/employee/Dashboard.css | 2 +- src/components/employee/EmployeeDashboard.jsx | 10 +- src/components/sidebar/EmployeeSidebar.jsx | 19 +- src/components/sidebar/Sidebar.css | 6 +- src/index.css | 14 +- yarn.lock | 4348 ++--------------- 20 files changed, 565 insertions(+), 4221 deletions(-) rename src/assets/thob-data/{Brookslogo.svg => BrookslogoIcon.svg} (98%) delete mode 100644 src/components/categories/ProductList.jsx create mode 100644 src/components/categories/ProductRow.jsx diff --git a/db.json b/db.json index f7ee222..0cf1d8e 100644 --- a/db.json +++ b/db.json @@ -1,13 +1,13 @@ { "authlogin": [ { - "id": 1, + "id": "1", "email": "admin@gmail.com", "password": "123", "role": "admin" }, { - "id": 2, + "id": "2", "email": "employee@gmail.com", "password": "123", "role": "employee" @@ -18,27 +18,27 @@ }, "admin": [ { - "id": 1, + "id": "1", "name": "Admin User", "email": "adminuser@example.com" } ], "employee": [ { - "id": 1, + "id": "1", "name": "Employee User", "email": "employeeuser@example.com" } ], "products": [ { - "id": 1, + "id": "1", "name": "Product 1", "category": "Category 1", "price": 100 }, { - "id": 2, + "id": "2", "name": "Product 2", "category": "Category 2", "price": 200 @@ -46,23 +46,23 @@ ], "categories": [ { - "id": 1, + "id": "1", "name": "Category 1" }, { - "id": 2, + "id": "2", "name": "Category 2" } ], "customers": [ { - "id": 1, + "id": "1", "name": "Customer 1", "email": "customer1@example.com", "phone": "1234567890" }, { - "id": 2, + "id": "2", "name": "Customer 2", "email": "customer2@example.com", "phone": "0987654321" @@ -74,7 +74,7 @@ "email": "surajbirewar001@gmail.com", "address": "Bavdhan, Pune", "mobile": "07559393995", - "id": 3 + "id": "3" }, { "name": "rahul", @@ -83,7 +83,7 @@ "email": "rahul001@gmail.com", "address": "Bavdhan, Pune", "mobile": "7559393995", - "id": 4 + "id": "4" }, { "name": "atharv", @@ -92,7 +92,16 @@ "email": "atharv@gmail.com", "address": "baner pune ", "mobile": "784365873", - "id": 5 + "id": "5" + }, + { + "id": "3682", + "name": "dikshant", + "age": "23", + "gender": "male", + "email": "dikshant001@gmail.com", + "address": "Bavdhan, Pune", + "mobile": "45654665645" } ] } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index d736882..278cb79 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -26,7 +26,7 @@ const App = () => { } /> } /> {/* Add HomePage route */} - } /> + } /> } /> } /> } /> diff --git a/src/assets/thob-data/Brookslogo.svg b/src/assets/thob-data/BrookslogoIcon.svg similarity index 98% rename from src/assets/thob-data/Brookslogo.svg rename to src/assets/thob-data/BrookslogoIcon.svg index a91d249..5d5c872 100644 --- a/src/assets/thob-data/Brookslogo.svg +++ b/src/assets/thob-data/BrookslogoIcon.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/components/Auth/LoginPage.css b/src/components/Auth/LoginPage.css index bc87b48..962ce0c 100644 --- a/src/components/Auth/LoginPage.css +++ b/src/components/Auth/LoginPage.css @@ -4,8 +4,8 @@ body, html { margin: 0; padding: 0; font-family: 'Nunito Sans', sans-serif; - background-color: #09090B; - color: #fff; + background-color: #ffffff; + /* color: #fff; */ } .login-page { @@ -14,7 +14,7 @@ body, html { justify-content: center; min-height: 100vh; padding: 4rem; - background-color: #09090B; + background-color: #ffffff; } .login-container { @@ -39,15 +39,15 @@ body, html { align-items: center; } -h2 { +h1 { margin-top: 0; - color: #F97316; + color: #0e355b; text-align: center; } p { margin-bottom: 20px; - color: #ccc; + color: #4b5563; text-align: center; } @@ -82,13 +82,13 @@ input[type="password"] { border: 1px solid #B3B3B3; /* Darker border */ border-radius: 4px; font-size: 16px; - background-color: #09090B; /* Dark background for input fields */ - color: #fff; /* White text for input fields */ + background-color: #e8e8e8; /* Dark background for input fields */ + color: #4b5563; /* White text for input fields */ } input[type="email"]:focus, input[type="password"]:focus { - border-color: #F97316; + border-color: #4b5563; outline: none; } @@ -97,40 +97,40 @@ input[type="password"]:focus { display: flex; justify-content: flex-end; margin-bottom: 10px; - color: #B3B3B3; + color: #4b5563; } .forgot-password-container a { - color: #B3B3B3; + color: #4b5563; text-decoration: none; } -.forgot-password-container a:hover { +/* .forgot-password-container a:hover { text-decoration: underline; -} +} */ .login-button { width: 100%; padding: 15px 30px; font-size: 18px; - background-color: #F97316; - color: #09090B; + background-color: #0e355b; + color: #d1d5db; border: none; border-radius: 4px; cursor: pointer; } .login-button:hover { - background-color: #f26502; + background-color: #154676; } .login-page input:focus { - border-color: #F97316; /* Orange border on focus */ + border-color: #0e355b; /* Orange border on focus */ outline: none; } .login-page a { - color: #B3B3B3; + color: #4b5563; text-decoration: none; margin-bottom: 20px; display: inline-block; diff --git a/src/components/Auth/LoginPage.jsx b/src/components/Auth/LoginPage.jsx index 771252c..cfe0942 100644 --- a/src/components/Auth/LoginPage.jsx +++ b/src/components/Auth/LoginPage.jsx @@ -44,7 +44,7 @@ const LoginPage = () => {
-

Welcome Back

+

Welcome Back

Be among the first to experience 3D magic! Register for private alpha.

{error &&

{error}

}
diff --git a/src/components/admin/AdminDashboard.jsx b/src/components/admin/AdminDashboard.jsx index 170b1de..9f42004 100644 --- a/src/components/admin/AdminDashboard.jsx +++ b/src/components/admin/AdminDashboard.jsx @@ -1,18 +1,50 @@ import React from 'react'; -import { Button } from 'antd'; import { useNavigate } from 'react-router-dom'; +import Sidebar from '../sidebar/Sidebar'; import './Dashboard.css'; const AdminDashboard = () => { const navigate = useNavigate(); + const handleClick = (link) => { + navigate(link); // Redirect to the provided link + }; + return ( -
-

Admin Dashboard

-
- - - +
+ +
+
+
+

Admin Dashboard

+
+
+

welcome back (ester howard)

+
+
+
+
+ Dashboard Graphic + + + +
+
); diff --git a/src/components/admin/Dashboard.css b/src/components/admin/Dashboard.css index 6b25137..66aa392 100644 --- a/src/components/admin/Dashboard.css +++ b/src/components/admin/Dashboard.css @@ -12,8 +12,8 @@ .dashboard { padding: 24px; - background-color: #09090B; - color: #F97316; + background-color: #ffffff; + /* color: #; */ height: 100vh; display: flex; flex-direction: column; @@ -53,20 +53,20 @@ } .dashboard-button { - background-color: #F97316; - border-color: #F97316; + background-color: #0e355b; + border-color: #0e355b; width: 300px; height: 60px; font-size: 16px; } .dashboard-link { - color: #09090B; + color: #0e355b; } .dashboard-button:hover { - background-color: #f26502; - border-color: #f26502; + background-color: #154676; + border-color: #154676; } /* Responsive Styles */ diff --git a/src/components/categories/CategoryList.jsx b/src/components/categories/CategoryList.jsx index 8cbef7e..3d43ef3 100644 --- a/src/components/categories/CategoryList.jsx +++ b/src/components/categories/CategoryList.jsx @@ -1,37 +1,124 @@ -import React, { useState, useEffect } from 'react'; -import { Link } from 'react-router-dom'; -import axiosInstance from '../../api/axiosConfig'; -import Sidebar from '../sidebar/Sidebar'; +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import ProductRow from "./ProductRow"; +import PropTypes from "prop-types"; -const CategoryList = () => { - const [categories, setCategories] = useState([]); +const CategoryList = ({ className = "" }) => { + const navigate = useNavigate(); - useEffect(() => { - axios.get('http://localhost:3001/categories') - .then(response => { - setCategories(response.data); - }) - .catch(error => { - console.error('Error fetching categories:', error); - }); - }, []); + const handleNavigation = (path) => { + navigate(path); + }; return ( -
-

Categories

-
- {categories.map(category => ( - -
- {category.name} -

{category.name}

-

click to view products

+
+
+
+
+
+ +
+
+
+
+
+
- - ))} +
+
+ Home handleNavigation('/home')} + /> + Categories handleNavigation('/categories')} + /> + Customer List handleNavigation('/customers')} + /> + Orders handleNavigation('/employee/create-order')} + /> + Account handleNavigation('/account')} + /> +
+
+
+
+
+ Logout handleNavigation('/logout')} + /> +
+
+
+
+
+
+ categories +
+
+
+
+ + + + + +
); }; +CategoryList.propTypes = { + className: PropTypes.string, +}; + export default CategoryList; diff --git a/src/components/categories/ProductList.jsx b/src/components/categories/ProductList.jsx deleted file mode 100644 index 6f232b7..0000000 --- a/src/components/categories/ProductList.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; -import axios from 'axios'; - -const ProductList = () => { - const { category } = useParams(); - const [products, setProducts] = useState([]); - - useEffect(() => { - axios.get(`http://localhost:3001/products?category=${category}`) - .then(response => { - setProducts(response.data); - }) - .catch(error => { - console.error('Error fetching products:', error); - }); - }, [category]); - - return ( -
-

Products in {category}

-
- {products.map(product => ( -
-

{product.name}

-

Price: ${product.price}

-
- ))} -
-
- ); -}; - -export default ProductList; diff --git a/src/components/categories/ProductRow.jsx b/src/components/categories/ProductRow.jsx new file mode 100644 index 0000000..1874d3b --- /dev/null +++ b/src/components/categories/ProductRow.jsx @@ -0,0 +1,47 @@ +import { useMemo } from "react"; +import PropTypes from "prop-types"; + +const ProductRow = ({ className = "", image17, shirts, propLeft, propTop }) => { + const productRowStyle = useMemo(() => { + return { + left: propLeft, + top: propTop, + }; + }, [propLeft, propTop]); + + return ( +
+ +
+
+ {shirts} +
+
+
+
+ Click to view products +
+
+
+ ); +}; + +ProductRow.propTypes = { + className: PropTypes.string, + image17: PropTypes.string, + shirts: PropTypes.string, + + /** Style props */ + propLeft: PropTypes.any, + propTop: PropTypes.any, +}; + +export default ProductRow; \ No newline at end of file diff --git a/src/components/customer/AddCustomer.jsx b/src/components/customer/AddCustomer.jsx index dc30b43..cadaa77 100644 --- a/src/components/customer/AddCustomer.jsx +++ b/src/components/customer/AddCustomer.jsx @@ -40,8 +40,8 @@ const AddCustomer = () => {
-

Add Customer

- Skip for now +

Add Customer

+ Skip for now
@@ -55,10 +55,10 @@ const AddCustomer = () => {
-

Customer Information

+

Customer Information

-

Measurements

+

Measurements

diff --git a/src/components/customer/CustomerList.css b/src/components/customer/CustomerList.css index 594d14c..2f4b301 100644 --- a/src/components/customer/CustomerList.css +++ b/src/components/customer/CustomerList.css @@ -8,7 +8,7 @@ } .customer-list h1 { - color: #F97316; + color: #0e355b; text-align: center; } @@ -20,7 +20,7 @@ .add-customer-button { padding: 10px 20px; - background-color: #F97316; + background-color: #0e355b; color: #09090B; border: none; cursor: pointer; @@ -29,7 +29,7 @@ } .add-customer-button:hover { - background-color: #F26502; + background-color: #154676; } .customer-table { @@ -58,13 +58,13 @@ } .customer-table tbody tr:hover { - background-color: #09090B; + background-color: #0e355b; } .edit-button { padding: 5px 10px; - background-color: #F26502; - color: #09090B; + background-color: #0e355b; + color: #ffffff; border: none; cursor: pointer; border-radius: 5px; @@ -72,7 +72,7 @@ } .edit-button:hover { - background-color: #F26502; + background-color: #154676; } diff --git a/src/components/customer/CustomerList.jsx b/src/components/customer/CustomerList.jsx index 3cf3ec1..bfb79bf 100644 --- a/src/components/customer/CustomerList.jsx +++ b/src/components/customer/CustomerList.jsx @@ -32,7 +32,7 @@ const CustomerList = () => {
-

Customers List

+

Customers List