applied css design
This commit is contained in:
Suraj Birewar
parent
04b3c4e07b
commit
04dfce9c3b
@ -8,10 +8,10 @@ const CategoryList = () => {
|
||||
|
||||
// Updated categories array with names and specifications
|
||||
const categories = [
|
||||
{ name: 'Shirts', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'shirts' },
|
||||
{ name: 'Suits', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'suits' },
|
||||
{ name: 'Tuxedos', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'tuxedos' },
|
||||
{ name: 'Jackets', image: 'https://image.coolblue.nl/422x390/products/1101120', description: 'jackets' },
|
||||
{ name: 'Shirts', image: 'https://img.freepik.com/premium-photo/blue-shirt-white-isolated_267651-1565.jpg?w=740', description: 'shirts' },
|
||||
{ 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://img.freepik.com/premium-vector/businessman-suit_98292-5674.jpg?w=740', description: 'tuxedos' },
|
||||
{ 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) => {
|
||||
@ -48,5 +48,4 @@ const CategoryList = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryList;
|
||||
|
||||
@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
|
||||
import '../../styles/ProductList.css';
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: 'red bomber jacket', price: 129, image: 'path/to/red-bomber-jacket-image.png' },
|
||||
{ id: 2, name: 'green utility jacket', price: 149, image: 'path/to/green-utility-jacket-image.png' },
|
||||
{ id: 3, name: 'black leather jacket', price: 199, image: 'path/to/black-leather-jacket-image.png' },
|
||||
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' },
|
||||
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' },
|
||||
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-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: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
|
||||
{ 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: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
|
||||
{ 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: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
|
||||
];
|
||||
|
||||
const JacketsProductList = () => {
|
||||
@ -27,7 +27,7 @@ const JacketsProductList = () => {
|
||||
|
||||
{/* Main content */}
|
||||
<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">
|
||||
<p className="text-sm text-gray-600 ">Total jackets: ({products.length})</p>
|
||||
<div className="flex items-center ">
|
||||
|
||||
@ -12,7 +12,7 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo
|
||||
|
||||
return (
|
||||
<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}
|
||||
>
|
||||
<img
|
||||
@ -21,22 +21,18 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo
|
||||
alt={shirts}
|
||||
src={image17}
|
||||
/>
|
||||
<div className="w-full flex flex-row items-center justify-center py-0 pr-5 pl-5">
|
||||
<div className="leading-9 font-semibold">
|
||||
<div className="w-full flex flex-row items-center justify-content: flex-end; py-0 pr-5 pl-5">
|
||||
<div className="leading-9 text-grey-600">
|
||||
{shirts}
|
||||
</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 */}
|
||||
<button
|
||||
className="customize-button w-full "
|
||||
onClick={onClick}
|
||||
>
|
||||
Customize
|
||||
customize
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -5,12 +5,14 @@ import ProductRow from './ProductRow';
|
||||
import '../../styles/ProductList.css';
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' },
|
||||
{ id: 2, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' },
|
||||
{ id: 3, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' },
|
||||
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' },
|
||||
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' },
|
||||
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-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: '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: '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: '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: '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: '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 = () => {
|
||||
@ -27,7 +29,7 @@ const ShirtsProductList = () => {
|
||||
|
||||
{/* Main content */}
|
||||
<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">
|
||||
<p className="text-sm text-gray-600 ">Total shirts: ({products.length})</p>
|
||||
<div className="flex items-center ">
|
||||
@ -62,5 +64,4 @@ const ShirtsProductList = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShirtsProductList;
|
||||
|
||||
@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
|
||||
import '../../styles/ProductList.css';
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' },
|
||||
{ id: 2, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' },
|
||||
{ id: 3, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' },
|
||||
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' },
|
||||
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' },
|
||||
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-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: '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: '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: '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: '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: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' },
|
||||
];
|
||||
|
||||
const SuitsProductList = () => {
|
||||
@ -27,7 +27,7 @@ const SuitsProductList = () => {
|
||||
|
||||
{/* Main content */}
|
||||
<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">
|
||||
<p className="text-sm text-gray-600 ">Total suits: ({products.length})</p>
|
||||
<div className="flex items-center ">
|
||||
@ -52,8 +52,8 @@ const SuitsProductList = () => {
|
||||
{products.map((product) => (
|
||||
<ProductRow
|
||||
key={product.id}
|
||||
image17={product.image} // Ensure this matches the prop expected in ProductRow
|
||||
shirts={product.name} // Ensure this matches the prop expected in ProductRow
|
||||
image17={product.image}
|
||||
shirts={product.name}
|
||||
onClick={() => handleCustomize(product.id)}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
|
||||
import '../../styles/ProductList.css';
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: 'black tuxedo', price: 199, image: 'path/to/black-tuxedo-image.png' },
|
||||
{ id: 2, name: 'navy tuxedo', price: 199, image: 'path/to/navy-tuxedo-image.png' },
|
||||
{ id: 3, name: 'grey tuxedo', price: 199, image: 'path/to/grey-tuxedo-image.png' },
|
||||
{ id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' },
|
||||
{ id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' },
|
||||
{ id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-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: '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: '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: '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: '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: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' },
|
||||
];
|
||||
|
||||
const TuxedosProductList = () => {
|
||||
@ -27,7 +27,7 @@ const TuxedosProductList = () => {
|
||||
|
||||
{/* Main content */}
|
||||
<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">
|
||||
<p className="text-sm text-gray-600 ">Total tuxedos: ({products.length})</p>
|
||||
<div className="flex items-center ">
|
||||
|
||||
@ -1,17 +1,31 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import '../../styles/Customize.css';
|
||||
|
||||
|
||||
|
||||
const Customize = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [style, setStyle] = 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) => {
|
||||
setStyle(event.target.value);
|
||||
@ -46,27 +60,34 @@ const Customize = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen ">
|
||||
<div className="flex h-screen">
|
||||
{/* Sidebar */}
|
||||
<Sidebar />
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="bg-white p-4 flex items-center">
|
||||
<Link to="/CategoryList" className="">
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
{/* Header */}
|
||||
<div className="bg-white p-4 flex items-center ">
|
||||
<Link to="/CategoryList">
|
||||
<FontAwesomeIcon icon={faChevronLeft} className="text-gray-700" />
|
||||
</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 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">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Style:
|
||||
<select
|
||||
value={style}
|
||||
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="collar">Collar</option>
|
||||
@ -75,13 +96,15 @@ const Customize = () => {
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Material Selection */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Material:
|
||||
<select
|
||||
value={material}
|
||||
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="cotton">Cotton</option>
|
||||
@ -90,13 +113,24 @@ const Customize = () => {
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="w-full py-2 px-4"
|
||||
className="w-full py-2 px-4 "
|
||||
>
|
||||
Save Style and Material
|
||||
</button>
|
||||
</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>
|
||||
|
||||
@ -29,7 +29,7 @@ const AdminDashboard = () => {
|
||||
<main className="dashboard-main">
|
||||
<div className="dashboard-main-content">
|
||||
<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"
|
||||
className="dashboard-image"
|
||||
/>
|
||||
|
||||
@ -44,7 +44,7 @@ const EmployeeDashboard = () => {
|
||||
</header>
|
||||
<main className={classNames.main}>
|
||||
<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
|
||||
className={classNames.button}
|
||||
onClick={() => handleClick('/customers')}
|
||||
|
||||
@ -1,82 +1,125 @@
|
||||
/* Customize.css */
|
||||
|
||||
.container {
|
||||
body {
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.bg-white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #ffffff;
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
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;
|
||||
.p-6 {
|
||||
padding: 1.5rem;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem; /* p-3 */
|
||||
border: 1px solid #cbd5e0; /* border-gray-400 */
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
border-color: #2d3748; /* Darker gray border on focus */
|
||||
outline: none;
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #0e355b; /* Dark blue */
|
||||
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;
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #1e3a8a; /* Darker blue on hover */
|
||||
.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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user