surajb/bb-order-management-app
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css changes

Browse Source
This commit is contained in:
surajb 2024-07-15 15:55:45 +05:30
parent f4ef45167b
commit 4b243a5e1e
20 changed files with 565 additions and 4221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
db.json
View File

@ -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"
}
]
}

2
src/App.jsx
View File

@ -26,7 +26,7 @@ const App = () => {
<Routes>
<Route exact path="/" element={<LoginPage />} />
<Route path="/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
<Route path="/admin-dashboard" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
<Route path="/admin" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
<Route path="/employee" element={<PrivateRoute><EmployeeDashboard /></PrivateRoute>} />
<Route path="/customers" element={<PrivateRoute><CustomerList /></PrivateRoute>} />
<Route path="/add-customer" element={<PrivateRoute><AddCustomer /></PrivateRoute>} />

4
src/assets/thob-data/Brookslogo.svg → src/assets/thob-data/BrookslogoIcon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

36
src/components/Auth/LoginPage.css
View File

@ -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;

2
src/components/Auth/LoginPage.jsx
View File

@ -44,7 +44,7 @@ const LoginPage = () => {
<div className="flex flex-row min-h-screen justify-center items-center">
<div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
<div className="w-full">
<h2>Welcome Back</h2>
<h1>Welcome Back</h1>
<p>Be among the first to experience 3D magic! Register for private alpha.</p>
{error && <p className="error-message">{error}</p>}
<form onSubmit={handleLogin} className="space-y-4">

46
src/components/admin/AdminDashboard.jsx
View File

@ -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 (
<div className="dashboard">
<h1 className="dashboard-title">Admin Dashboard</h1>
<div className="dashboard-content">
<Button type="primary" onClick={() => navigate('/admin/create-order')}>Create Order</Button>
<Button type="primary" onClick={() => navigate('/admin/view-orders')}>View Orders</Button>
<Button type="primary" onClick={() => navigate('/admin/view-customers')}>View Customers</Button>
<div className="flex flex-row">
<Sidebar />
<div className="w-full flex flex-col min-h-screen text-white">
<header className="w-full p-4 flex justify-between items-center">
<div className="flex items-center">
<h1 className="text-#0e355b text-2xl font-bold">Admin Dashboard</h1>
</div>
<div>
<p className="text-#4b5563">welcome back (ester howard)</p>
</div>
</header>
<main className="flex-1 flex flex-col items-center justify-center p-6">
<div className="w-full max-w-3xl text-center">
<img src="path_to_image" alt="Dashboard Graphic" className="w-full rounded-md mb-6" />
<button
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
onClick={() => handleClick('/admin/create-order')}
>
Create Order
</button>
<button
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
onClick={() => handleClick('/admin/view-orders')}
>
View Orders
</button>
<button
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
onClick={() => handleClick('/admin/view-customers')}
>
View Customers
</button>
</div>
</main>
</div>
</div>
);

14
src/components/admin/Dashboard.css
View File

@ -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 */

139
src/components/categories/CategoryList.jsx
View File

@ -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 (
<div className="min-h-screen bg-gray-900 text-white p-10">
<h1 className="text-4xl font-bold mb-8">Categories</h1>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-6">
{categories.map(category => (
<Link key={category.id} to={`/products/${category.name}`}>
<div className="bg-gray-800 rounded-lg p-6 flex flex-col items-center hover:bg-gray-700 transition">
<img src={`/images/${category.name}.png`} alt={category.name} className="w-32 h-32 mb-4" />
<h2 className="text-2xl font-semibold">{category.name}</h2>
<p className="text-gray-400">click to view products</p>
<div
className={`w-full bg-primary overflow-y-auto flex flex-row items-start justify-start gap-[3px] leading-[normal] tracking-[normal] text-center text-29xl text-primary1 font-button mq1100:flex-wrap ${className}`}
>
<div className="flex flex-col items-start justify-start py-0 pr-[33px] pl-0">
<div className="overflow-hidden flex flex-col items-start justify-start pt-4 px-5 pb-[50px] gap-[235.5px] mq450:pb-[21px] mq450:box-border mq1025:pt-5 mq1025:pb-8 mq1025:box-border">
<div className="flex flex-col items-start justify-start gap-[146.5px]">
<div className="w-10 h-[147px] relative">
<img
className="absolute h-[27.21%] w-full top-[0%] right-[0%] bottom-[72.79%] left-[0%] max-w-full overflow-hidden max-h-full"
loading="lazy"
alt=""
src="/brooks-logo.svg"
/>
<div className="absolute top-[70px] left-[calc(50%_-_20px)] w-10 h-[77px] hidden">
<div className="absolute top-[0px] left-[0px] w-full h-full hidden">
<div className="absolute top-[0px] left-[0px] rounded-[50px] box-border w-full h-full border-[1px] border-solid border-secondary-accent" />
<div className="absolute top-[40px] left-[3px] rounded-[50%] bg-secondary-accent w-[34px] h-[34px]" />
</div>
</div>
</div>
<div className="flex flex-row items-start justify-start py-0 pr-2 pl-[7px]">
<div className="flex flex-col items-start justify-start gap-[70px]">
<img
className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
loading="lazy"
alt="Home"
src="/home-icon.svg"
onClick={() => handleNavigation('/home')}
/>
<img
className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
loading="lazy"
alt="Categories"
src="/category-icon.svg"
onClick={() => handleNavigation('/categories')}
/>
<img
className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
loading="lazy"
alt="Customer List"
src="/customer-list-icon.svg"
onClick={() => handleNavigation('/customers')}
/>
<img
className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
loading="lazy"
alt="Orders"
src="/orders-icon.svg"
onClick={() => handleNavigation('/employee/create-order')}
/>
<img
className="w-[25px] h-[25px] relative overflow-hidden shrink-0 cursor-pointer"
loading="lazy"
alt="Account"
src="/account-icon.svg"
onClick={() => handleNavigation('/account')}
/>
</div>
</div>
</div>
<div className="flex flex-row items-start justify-start py-0 px-2">
<div className="flex flex-col items-start justify-start">
<img
className="w-6 h-6 relative overflow-hidden shrink-0 cursor-pointer"
loading="lazy"
alt="Logout"
src="/materialsymbolslogout.svg"
onClick={() => handleNavigation('/logout')}
/>
</div>
</div>
</div>
</div>
<div className="flex flex-col items-start justify-start pt-[46px] px-0 pb-0">
<div className="relative leading-[53px] lowercase font-semibold mq450:text-10xl mq450:leading-[32px] mq1025:text-19xl mq1025:leading-[42px]">
categories
</div>
</div>
<div className="w-[820px] flex flex-col items-start justify-start pt-[135px] px-0 pb-0 box-border max-w-full mq750:pt-[57px] mq750:box-border mq1025:pt-[88px] mq1025:box-border">
<div className="self-stretch h-[820px] overflow-y-auto shrink-0 flex flex-row flex-wrap items-start justify-start p-5 box-border relative gap-[80px_76px]">
<ProductRow image17="/image-17@2x.png" shirts="Shirts" />
<ProductRow
image17="/image-18@2x.png"
shirts="Suits"
propLeft="450px"
propTop="20px"
/>
<ProductRow
image17="/image-6@2x.png"
shirts="Tuxedos"
propLeft="20px"
propTop="450px"
/>
<ProductRow
image17="/image-28@2x.png"
shirts="jackets"
propLeft="450px"
propTop="450px"
/>
</div>
</Link>
))}
</div>
</div>
);
};
CategoryList.propTypes = {
className: PropTypes.string,
};
export default CategoryList;

34
src/components/categories/ProductList.jsx
View File

@ -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 (
<div className="min-h-screen bg-gray-900 text-white p-10">
<h1 className="text-4xl font-bold mb-8">Products in {category}</h1>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
{products.map(product => (
<div key={product.id} className="bg-gray-800 rounded-lg p-6 flex flex-col items-center">
<h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
<p className="text-gray-400">Price: ${product.price}</p>
</div>
))}
</div>
</div>
);
};
export default ProductList;

47
src/components/categories/ProductRow.jsx Normal file
View File

@ -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 (
<div
className={`h-[350px] w-[350px] !m-[0] absolute top-[20px] left-[20px] rounded-3xs box-border flex flex-col items-start justify-start py-5 px-0 gap-[15px] text-center text-29xl text-tertiary font-button border-[0.7px] border-solid border-tertiary ${className}`}
style={productRowStyle}
>
<img
className="self-stretch flex-1 relative max-w-full overflow-hidden max-h-full object-cover"
loading="lazy"
alt=""
src={image17}
/>
<div className="self-stretch flex flex-row items-start justify-center py-0 pr-[21px] pl-5">
<div className="relative leading-[53px] lowercase font-semibold inline-block min-w-[124px] mq450:text-10xl mq450:leading-[32px] mq1025:text-19xl mq1025:leading-[42px]">
{shirts}
</div>
</div>
<div className="flex flex-row items-start justify-start py-0 px-[66px] text-3xl">
<div className="relative leading-[110%] lowercase font-semibold mq450:text-lg mq450:leading-[19px]">
Click to view products
</div>
</div>
</div>
);
};
ProductRow.propTypes = {
className: PropTypes.string,
image17: PropTypes.string,
shirts: PropTypes.string,
/** Style props */
propLeft: PropTypes.any,
propTop: PropTypes.any,
};
export default ProductRow;

8
src/components/customer/AddCustomer.jsx
View File

@ -40,8 +40,8 @@ const AddCustomer = () => {
<div className="w-full flex flex-col min-h-screen text-white">
<div className="min-h-screen text-gray-300 p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
<Link to="/" className="text-orange-500">Skip for now</Link>
<h1 className="text-2xl font-semibold text-#0e355b">Add Customer</h1>
<Link to="/" className="text-#0e355b">Skip for now</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-6">
@ -55,10 +55,10 @@ const AddCustomer = () => {
</div>
<div>
<Link to="/">
<h2 className="text-lg font-semibold text-black-700">Customer Information</h2>
<h2 className="text-lg font-semibold text-">Customer Information</h2>
</Link>
<Link to="/measurements">
<h2 className="text-lg font-semibold text-black-700">Measurements</h2>
<h2 className="text-lg font-semibold text-">Measurements</h2>
</Link>
</div>
</div>

14
src/components/customer/CustomerList.css
View File

@ -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;
}

2
src/components/customer/CustomerList.jsx
View File

@ -32,7 +32,7 @@ const CustomerList = () => {
<div className="w-full flex flex-col bg-#090909B text-white">
<div className="bg-[#090909B] text-gray-300 p-6 rounded-lg">
<div className="flex justify-between items-center mb-4">
<h1 className="text-xl font-semibold text-orange-500">Customers List</h1>
<h1 className="text-xl font-semibold text-#0e355b">Customers List</h1>
<button
className="bg-orange-500 text-black px-4 py-2 rounded-md text-sm"
onClick={handleAddCustomer}

4
src/components/customer/CustomerMeasurements.jsx
View File

@ -27,8 +27,8 @@ const CustomerMeasurements = () => {
<div className="w-full flex flex-col min-h-screen text-white">
<div className="min-h-screen text-gray-300 p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
<Link to="/CategoryList" className="text-orange-500">skip for now</Link>
<h1 className="text-2xl font-semibold text-#0e355b">Customer Measurements</h1>
<Link to="/CategoryList" className="text-0e355b">skip for now</Link>
</div>
<Form onFinish={onFinish} className="space-y-4">
<h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>

2
src/components/employee/Dashboard.css
View File

@ -1,6 +1,6 @@
.dashboard {
padding: 20px;
background-color: #f5f5f5;
background-color: #ffffff;
}
.dashboard-title {

10
src/components/employee/EmployeeDashboard.jsx
View File

@ -12,29 +12,29 @@ const HomePage = () => {
<div className="w-full flex flex-col min-h-screen text-white">
<header className="w-full p-4 flex justify-between items-center">
<div className="flex items-center">
<h1 className="text-orange-500 text-2xl font-bold">home</h1>
<h1 className="text-#0e355b text-2xl font-bold">home</h1>
</div>
<div>
<p className="text-gray-400">welcome back (ester howard)</p>
<p className="text-#4b5563">welcome back (ester howard)</p>
</div>
</header>
<main className="flex-1 flex flex-col items-center justify-center p-6">
<div className="w-full max-w-3xl text-center">
<img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
<button
className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
onClick={() => handleClick('/customers')}
>
create a new order
</button>
<button
className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
onClick={() => handleClick('')}
>
view orders
</button>
<button
className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
onClick={() => handleClick('')}
>
view customers

17
src/components/sidebar/EmployeeSidebar.jsx
View File

@ -5,6 +5,7 @@ import {
MenuFoldOutlined,
MenuUnfoldOutlined,
} from '@ant-design/icons';
import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg';
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
@ -36,25 +37,27 @@ const EmployeeSidebar = () => {
style={{ height: '100vh' }}
>
<div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
<div className="text-black">t.</div>
<Link to="/employee" className="my-6">
<img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
</Link>
</div>
<div className="flex flex-col items-center">
<Link to="/employee-dashboard" className="my-6">
<Link to="/employee" className="my-6">
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
</Link>
<Link to="/employee/categories" className="my-6">
<Link to="/categories" className="my-6">
<img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
</Link>
<Link to="/employee/manage-customers" className="my-6">
<Link to="/customers" className="my-6">
<img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
</Link>
<Link to="/employee/orders" className="my-6">
<Link to="/orders" className="my-6">
<img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
</Link>
<Link to="/employee/profile" className="my-6">
<Link to="/profile" className="my-6">
<img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
</Link>
<Link to="/employee/logout" className="my-6">
<Link to="/logout" className="my-6">
<img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
</Link>
</div>

6
src/components/sidebar/Sidebar.css
View File

@ -16,11 +16,11 @@
padding-top: 20px;
}
.logo {
/* .logo {
font-size: 24px;
color: #F97316;
margin-bottom: 40px;
}
} */
.menu {
display: flex;
@ -30,7 +30,7 @@
}
.menu-item {
color: #F97316;
color: #4b5563;
margin: 10px 0;
width: 100%;
text-align: center;

14
src/index.css
View File

@ -10,7 +10,7 @@
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #09090B;
background-color: #ffffff;
font-synthesis: none;
text-rendering: optimizeLegibility;
@ -20,11 +20,11 @@
a {
font-weight: 500;
color: #F26502;
color: #4b5563;
text-decoration: inherit;
}
a:hover {
color: #F26502;
color: #0e355b;
}
h1 {
@ -39,13 +39,13 @@ button {
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #09090B;
background-color: #0e355b;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #F26502;
border-color: #154676;
}
button:focus,
button:focus-visible {
@ -54,11 +54,11 @@ button:focus-visible {
@media (prefers-color-scheme: light) {
:root {
color: #09090B;
color: #ffffff;
background-color: #ffffff;
}
a:hover {
color: #F26502;
color: #154676;
}
button {
background-color: #f9f9f9;

4348
yarn.lock
View File

File diff suppressed because it is too large Load Diff