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

applied css design

Browse Source
This commit is contained in:
Suraj Birewar 2024-08-03 09:03:06 +05:30
parent 04b3c4e07b
commit 04dfce9c3b
10 changed files with 191 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,10 +8,10 @@ const CategoryList = () => {
// Updated categories array with names and specifications // Updated categories array with names and specifications
const categories = [ const categories = [
{ name: 'Shirts', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'shirts' }, { name: 'Shirts', image: 'https://img.freepik.com/premium-photo/blue-shirt-white-isolated_267651-1565.jpg?w=740', description: 'shirts' },
{ name: 'Suits', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'suits' }, { name: 'Suits', image: 'https://img.freepik.com/free-psd/realistic-suit-illustration_23-2151236757.jpg?t=st=1722512180~exp=1722515780~hmac=79030884ba3866ce8461b252477505e74e625c63012705c110eced45b59c63fb&w=740', description: 'suits' },
{ name: 'Tuxedos', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'tuxedos' }, { name: 'Tuxedos', image: 'https://img.freepik.com/premium-vector/businessman-suit_98292-5674.jpg?w=740', description: 'tuxedos' },
{ name: 'Jackets', image: 'https://image.coolblue.nl/422x390/products/1101120', description: 'jackets' }, { name: 'Jackets', image: 'https://img.freepik.com/free-photo/still-life-rendering-jackets-display_23-2149745027.jpg?t=st=1722512352~exp=1722515952~hmac=ac34ad84d45b411fb64951e7324277994ed07ec0357b343ad4e5db09ea55e67f&w=360', description: 'jackets' },
]; ];
const handleClick = (category) => { const handleClick = (category) => {
@ -48,5 +48,4 @@ const CategoryList = () => {
</div> </div>
); );
}; };
export default CategoryList; export default CategoryList;

14
src/components/categories/JacketsProductList.jsx
View File

@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
import '../../styles/ProductList.css'; import '../../styles/ProductList.css';
const products = [ const products = [
{ id: 1, name: 'red bomber jacket', price: 129, image: 'path/to/red-bomber-jacket-image.png' }, { id: 1, name: 'red bomber jacket', price: 129, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
{ id: 2, name: 'green utility jacket', price: 149, image: 'path/to/green-utility-jacket-image.png' }, { id: 2, name: 'green utility jacket', price: 149, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
{ id: 3, name: 'black leather jacket', price: 199, image: 'path/to/black-leather-jacket-image.png' }, { id: 3, name: 'black leather jacket', price: 199, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
]; ];
const JacketsProductList = () => { const JacketsProductList = () => {
@ -27,7 +27,7 @@ const JacketsProductList = () => {
{/* Main content */} {/* Main content */}
<div className="flex-grow p-8 product-list"> <div className="flex-grow p-8 product-list">
<h1 className="ml-4 text-2xl font-medium text-gray-700 ">Products (Jackets)</h1> <h1 className="ml-4 text-2xl font-medium text-gray-700 ">products (jackets)</h1>
<div className="product-actions"> <div className="product-actions">
<p className="text-sm text-gray-600 ">Total jackets: ({products.length})</p> <p className="text-sm text-gray-600 ">Total jackets: ({products.length})</p>
<div className="flex items-center "> <div className="flex items-center ">

14
src/components/categories/ProductRow.jsx
View File

@ -12,7 +12,7 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo
return ( return (
<div <div
className={`h-88 w-88 m-0 rounded-lg flex flex-col items-start justify-start py-5 px-0 gap-4 text-center text-3xl font-semibold border border-gray-300 ${className}`} className={`h-88 w-88 m-0 rounded-lg flex flex-col items-start justify-start py-5 px-0 gap-4 text-center text-3xl border border-gray-300 ${className}`}
style={productRowStyle} style={productRowStyle}
> >
<img <img
@ -21,22 +21,18 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo
alt={shirts} alt={shirts}
src={image17} src={image17}
/> />
<div className="w-full flex flex-row items-center justify-center py-0 pr-5 pl-5"> <div className="w-full flex flex-row items-center justify-content: flex-end; py-0 pr-5 pl-5">
<div className="leading-9 font-semibold"> <div className="leading-9 text-grey-600">
{shirts} {shirts}
</div> </div>
</div> </div>
<div className="w-full flex flex-row items-start justify-start py-0 px-16 text-lg">
<div className="leading-tight font-semibold">
Click to view product details
</div>
</div>
{/* Customize Button */} {/* Customize Button */}
<button <button
className="customize-button w-full " className="customize-button w-full "
onClick={onClick} onClick={onClick}
> >
Customize customize
</button> </button>
</div> </div>
); );

19
src/components/categories/ShirtsProductList.jsx
View File

@ -5,12 +5,14 @@ import ProductRow from './ProductRow';
import '../../styles/ProductList.css'; import '../../styles/ProductList.css';
const products = [ const products = [
{ id: 1, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, { id: 1, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 2, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, { id: 2, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 3, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, { id: 3, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 7, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
{ id: 8, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
]; ];
const ShirtsProductList = () => { const ShirtsProductList = () => {
@ -27,7 +29,7 @@ const ShirtsProductList = () => {
{/* Main content */} {/* Main content */}
<div className="flex-grow p-8 product-list"> <div className="flex-grow p-8 product-list">
<h1 className="ml-4 text-2xl font-medium text-gray-700 " >Products (Shirts)</h1> <h1 className="ml-4 text-2xl font-medium text-gray-700 " >products (shirts)</h1>
<div className="product-actions"> <div className="product-actions">
<p className="text-sm text-gray-600 ">Total shirts: ({products.length})</p> <p className="text-sm text-gray-600 ">Total shirts: ({products.length})</p>
<div className="flex items-center "> <div className="flex items-center ">
@ -57,10 +59,9 @@ const ShirtsProductList = () => {
onClick={() => handleCustomize(product.id)} onClick={() => handleCustomize(product.id)}
/> />
))} ))}
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default ShirtsProductList; export default ShirtsProductList;

18
src/components/categories/SuitsProductList.jsx
View File

@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
import '../../styles/ProductList.css'; import '../../styles/ProductList.css';
const products = [ const products = [
{ id: 1, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, { id: 1, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
{ id: 2, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, { id: 2, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
{ id: 3, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, { id: 3, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
]; ];
const SuitsProductList = () => { const SuitsProductList = () => {
@ -27,7 +27,7 @@ const SuitsProductList = () => {
{/* Main content */} {/* Main content */}
<div className="flex-grow p-8 product-list"> <div className="flex-grow p-8 product-list">
<h1 className="ml-4 text-2xl font-medium text-gray-700 ">Products (Suits)</h1> <h1 className="ml-4 text-2xl font-medium text-gray-700 ">products (suits)</h1>
<div className="product-actions"> <div className="product-actions">
<p className="text-sm text-gray-600 ">Total suits: ({products.length})</p> <p className="text-sm text-gray-600 ">Total suits: ({products.length})</p>
<div className="flex items-center "> <div className="flex items-center ">
@ -52,8 +52,8 @@ const SuitsProductList = () => {
{products.map((product) => ( {products.map((product) => (
<ProductRow <ProductRow
key={product.id} key={product.id}
image17={product.image} // Ensure this matches the prop expected in ProductRow image17={product.image}
shirts={product.name} // Ensure this matches the prop expected in ProductRow shirts={product.name}
onClick={() => handleCustomize(product.id)} onClick={() => handleCustomize(product.id)}
/> />
))} ))}

14
src/components/categories/TuxedosProductList.jsx
View File

@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
import '../../styles/ProductList.css'; import '../../styles/ProductList.css';
const products = [ const products = [
{ id: 1, name: 'black tuxedo', price: 199, image: 'path/to/black-tuxedo-image.png' }, { id: 1, name: 'black tuxedo', price: 199, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
{ id: 2, name: 'navy tuxedo', price: 199, image: 'path/to/navy-tuxedo-image.png' }, { id: 2, name: 'navy tuxedo', price: 199, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
{ id: 3, name: 'grey tuxedo', price: 199, image: 'path/to/grey-tuxedo-image.png' }, { id: 3, name: 'grey tuxedo', price: 199, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
]; ];
const TuxedosProductList = () => { const TuxedosProductList = () => {
@ -27,7 +27,7 @@ const TuxedosProductList = () => {
{/* Main content */} {/* Main content */}
<div className="flex-grow p-8 product-list"> <div className="flex-grow p-8 product-list">
<h1 className="ml-4 text-2xl font-medium text-gray-700 ">Products (Tuxedos)</h1> <h1 className="ml-4 text-2xl font-medium text-gray-700 ">products (tuxedos)</h1>
<div className="product-actions"> <div className="product-actions">
<p className="text-sm text-gray-600 ">Total tuxedos: ({products.length})</p> <p className="text-sm text-gray-600 ">Total tuxedos: ({products.length})</p>
<div className="flex items-center "> <div className="flex items-center ">

62
src/components/customize/Customize.jsx
View File

@ -1,17 +1,31 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom'; import { useParams, useNavigate, Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import Sidebar from '../sidebar/Sidebar'; import Sidebar from '../sidebar/Sidebar';
import '../../styles/Customize.css'; import '../../styles/Customize.css';
const Customize = () => { const Customize = () => {
const { id } = useParams(); const { id } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const [style, setStyle] = useState(''); const [style, setStyle] = useState('');
const [material, setMaterial] = useState(''); const [material, setMaterial] = useState('');
const [productImage, setProductImage] = useState('');
useEffect(() => {
// Fetch the product image URL based on the product ID
const fetchProductImage = async () => {
try {
const response = await fetch(`/api/products/${id}`);
const data = await response.json();
setProductImage(data.imageUrl); // Assume `data.imageUrl` is the URL of the product image
} catch (error) {
console.error('Error fetching product image:', error);
}
};
fetchProductImage();
}, [id]);
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
setStyle(event.target.value); setStyle(event.target.value);
@ -46,27 +60,34 @@ const Customize = () => {
}; };
return ( return (
<div className="flex h-screen "> <div className="flex h-screen">
{/* Sidebar */} {/* Sidebar */}
<Sidebar /> <Sidebar />
{/* Main content */} {/* Main content */}
<div className="flex-grow flex flex-col"> <div className="flex-grow flex flex-col">
<div className="bg-white p-4 flex items-center"> {/* Header */}
<Link to="/CategoryList" className=""> <div className="bg-white p-4 flex items-center ">
<FontAwesomeIcon icon={faChevronLeft} /> <Link to="/CategoryList">
<FontAwesomeIcon icon={faChevronLeft} className="text-gray-700" />
</Link> </Link>
<h1 className="ml-4 text-2xl font-medium text-gray-700 ">Customize Product</h1> <h1 className="ml-4 text-2xl font-medium text-gray-700">Customize Product</h1>
</div> </div>
<div className="flex-grow flex items-center justify-center p-8">
<div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md"> {/* Content */}
<div className="flex-grow flex items-stretch p-8">
{/* Customization Options */}
<div className="bg-white p-6 rounded-lg w-1/3 mr-4">
<h2 className="text-lg font-medium text-gray-700 mb-4">Customize</h2>
{/* Style Selection */}
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">
Style: Style:
<select <select
value={style} value={style}
onChange={handleStyleChange} onChange={handleStyleChange}
className="mt-1 block w-full py-2 px-3 " className="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md"
> >
<option value="">Select style</option> <option value="">Select style</option>
<option value="collar">Collar</option> <option value="collar">Collar</option>
@ -75,13 +96,15 @@ const Customize = () => {
</select> </select>
</label> </label>
</div> </div>
{/* Material Selection */}
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">
Material: Material:
<select <select
value={material} value={material}
onChange={handleMaterialChange} onChange={handleMaterialChange}
className="mt-1 block w-full " className="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md"
> >
<option value="">Select material</option> <option value="">Select material</option>
<option value="cotton">Cotton</option> <option value="cotton">Cotton</option>
@ -90,13 +113,24 @@ const Customize = () => {
</select> </select>
</label> </label>
</div> </div>
{/* Save Button */}
<button <button
onClick={handleSave} onClick={handleSave}
className="w-full py-2 px-4" className="w-full py-2 px-4 "
> >
Save Style and Material Save Style and Material
</button> </button>
</div> </div>
{/* Product Image */}
<div className="bg-white p-6 rounded-lg flex-grow">
{productImage ? (
<img src={productImage} alt="Product" className="w-full h-auto rounded-lg" />
) : (
<p>Loading image...</p>
)}
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/pages/AdminDashboard.jsx
View File

@ -29,7 +29,7 @@ const AdminDashboard = () => {
<main className="dashboard-main"> <main className="dashboard-main">
<div className="dashboard-main-content"> <div className="dashboard-main-content">
<img <img
src="path_to_image" src="https://img.freepik.com/free-photo/well-dressed-businessman-holding-currency-with-confidence-generated-by-ai_188544-16970.jpg?t=st=1722511417~exp=1722515017~hmac=dbe5ab19f8e2c416be4928faac1fc197473166fc4f230d8f46307b84e522ff5a&w=1060"
alt="Dashboard Graphic" alt="Dashboard Graphic"
className="dashboard-image" className="dashboard-image"
/> />

2
src/pages/EmployeeDashboard.jsx
View File

@ -44,7 +44,7 @@ const EmployeeDashboard = () => {
</header> </header>
<main className={classNames.main}> <main className={classNames.main}>
<div className={classNames.mainContent}> <div className={classNames.mainContent}>
<img src="path_to_image" alt="Suit" className={classNames.image} /> <img src="https://img.freepik.com/free-photo/well-dressed-businessman-holding-currency-with-confidence-generated-by-ai_188544-16970.jpg?t=st=1722511417~exp=1722515017~hmac=dbe5ab19f8e2c416be4928faac1fc197473166fc4f230d8f46307b84e522ff5a&w=1060" alt="Suit" className={classNames.image} />
<button <button
className={classNames.button} className={classNames.button}
onClick={() => handleClick('/customers')} onClick={() => handleClick('/customers')}

155
src/styles/Customize.css
View File

@ -1,82 +1,125 @@
/* Customize.css */
.container { body {
font-family: 'Helvetica', 'Arial', sans-serif;
}
.flex {
display: flex; display: flex;
flex-direction: row; }
.h-screen {
height: 100vh; height: 100vh;
} }
.bg-white {
background-color: #fff;
.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
} }
.header { .p-4 {
background-color: #ffffff;
padding: 1rem; padding: 1rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff;
} }
.header-title { .p-6 {
display: flex;
align-items: center;
font-size: 1.5rem; /* text-2xl */
font-weight: 600; /* font-semibold */
color: #0e355b; /* Dark blue */
margin-left: 1rem;
}
.back-button {
color: #0e355b;
font-size: 1.25rem;
}
.inner-content {
flex-grow: 1;
padding: 1.5rem; padding: 1.5rem;
background-color: #f9fafb;
color: #4a5568;
} }
.p-8 {
padding: 2rem;
}
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.rounded-lg {
border-radius: 0.5rem;
}
.w-half{
width: 33.333333%;
}
.form-input, .w-full {
.form-select {
width: 100%; width: 100%;
padding: 0.75rem; /* p-3 */
border: 1px solid #cbd5e0; /* border-gray-400 */
border-radius: 0.375rem; /* rounded-md */
} }
.form-input:focus, .h-auto {
.form-select:focus { height: auto;
border-color: #2d3748; /* Darker gray border on focus */
outline: none;
} }
.submit-button { .mt-1 {
background-color: #0e355b; /* Dark blue */ margin-top: 0.25rem;
color: white;
padding: 0.75rem 1.5rem; /* p-3 */
border-radius: 0.375rem; /* rounded-md */
font-weight: 600; /* font-semibold */
cursor: pointer;
border: none;
transition: background-color 0.3s ease;
} }
.submit-button:hover { .mb-4 {
background-color: #1e3a8a; /* Darker blue on hover */ margin-bottom: 1rem;
} }
.mr-4 {
margin-right: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-gray-700 {
color: #4a5568;
}
.font-medium {
font-weight: 500;
}
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.flex-grow {
flex-grow: 1;
}
.bg-blue-600 {
background-color: #3182ce;
}
.bg-blue-700 {
background-color: #2b6cb0;
}
.text-white {
color: #fff;
}
.border {
border-width: 1px;
}
.border-gray-300 {
border-color: #d2d6dc;
}
.rounded-md {
border-radius: 0.375rem;
}
.hover\:bg-blue-700:hover {
background-color: #2b6cb0;
}
.block {
display: block;
}