style: Include the predefined colors on all components. Add changes t…

…o the markup structure. feat: Extract a Logo component.
PetrusMaximus0 · Dec 18, 2024 · f092d39 · f092d39
1 parent de3085f
commit f092d39
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 46 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,30 +1,32 @@
 import './App.scss';
 import Icon from '@mdi/react';
 import { mdiGithub } from '@mdi/js';
-import { Link, Outlet } from 'react-router-dom';
+import {Link, Outlet} from 'react-router-dom';
 import Nav from './components/Nav';
 
 function App() {
 	return (
-		<div className="font-sans text-teal-950 grid gap-4 min-h-screen grid-rows-[auto_1fr_auto]">
-			<header className="bg-teal-200 shadow-lg shadow-teal-200">
-				<div className="container mx-auto p-8 mb-2 flex flex-col md:flex-row items-center  gap-4 text-center justify-between ">
-					<h1>
+		<div className="walter-turncoat-regular text-teal-950 grid min-h-screen grid-rows-[auto_1fr_auto]">
+			<header className="bg-neutral">
+				<div className="container mx-auto py-8 sm:px-8 mb-2 flex flex-col md:flex-row items-center gap-4 text-center justify-between ">
+					<h1> 
 						<Link
-							to="/"
-							className="text-2xl hover:text-orange-400"
+						to="/"
+						className="text-3xl text-logoText uppercase"
 						>
-							IMPULSE SHOPPER
-						</Link>
+							impulse shopper
+						</Link> 
 					</h1>
 					<Nav />
 				</div>
 			</header>
-			<main className="container mx-auto">
-				<Outlet />
+			<main className="bg-gradient-to-b from-neutral via-primary to-neutral">
+				<div className="container mx-auto">
+					<Outlet />
+				</div>
 			</main>
-			<footer className="bg-teal-200 shadow-teal-200 shadow-[0px_-5px_10px] text-center py-8 text-lg">
-				<p className="container flex justify-center gap-2 items-center mx-auto text-xl">
+			<footer className="text-center py-8 text-lg bg-neutral">
+				<p className="container flex justify-center gap-2 items-center mx-auto text-sm text-complementary">
 					Copyright 2024
 					<a
 						className="justify-center items-center flex gap-2"

diff --git a/src/components/AddToCartBtn.tsx b/src/components/AddToCartBtn.tsx
@@ -71,22 +71,22 @@ const AddToCartBtn = ({data, btnText} : { data: IProduct, btnText: string }) =>
 
 	return (
 		<form
-			className="flex justify-between items-center gap-1"
+			className="flex justify-between items-center gap-1 w-full"
 			onSubmit={submitForm}
 			action=""
 		>
 			<div className="flex justify-center items-center gap-1">
 				<button
 					aria-label="decrease items"
-					className="hover:bg-teal-500 active:bg-orange-300 active:text-white rounded-xl"
+					className="hover:bg-red-500 active:bg-accent active:text-white rounded-xl"
 					onClick={decNum}
 					type="button"
 				>
 					<Icon path={mdiMinus} size={1} />
 				</button>
 				<input
 					aria-label="product number"
-					className="w-16 rounded-xl border border-teal-950 text-center"
+					className="w-16 rounded-xl bg-neutral text-center"
 					min={1}
 					max={10}
 					type="number"
@@ -98,24 +98,23 @@ const AddToCartBtn = ({data, btnText} : { data: IProduct, btnText: string }) =>
 				/>
 				<button
 					aria-label="increase items"
-					className="hover:bg-teal-500 active:bg-orange-300 active:text-white rounded-xl"
+					className="hover:bg-teal-500 active:bg-accent active:text-white rounded-xl"
 					onClick={incNum}
 					type="button"
 				>
 					<Icon path={mdiPlus} size={1} />
 				</button>
 			</div>
-
 			<button
 				type="submit"
-				className="hover:bg-teal-500 text-teal-950 bg-orange-300 active:bg-orange-300 rounded-xl px-4 py-1"
+				className="text-lg active:bg-accent active:text-neutral hover:border hover:border-accent bg-neutral text-complementary font-bold rounded-2xl w-32 px-1 py-1"
 			>
 				{altBtnText || btnText}
 			</button>
 			<Icon
 				className={altBtnText !== null ? 'text-teal-500' : 'invisible'}
 				path={mdiCheckCircleOutline}
-				size={1}
+				size={2}
 			/>
 		</form>
 	);

diff --git a/src/components/Cart.tsx b/src/components/Cart.tsx
@@ -49,8 +49,8 @@ const Cart = () => {
 	//
 	return (
 		(cartItems.length > 0 && (
-			<section className="container main-animate flex flex-col my-4 mx-auto px-8 gap-4">
-				<h1 className="text-4xl text-center sm:text-left text-white">
+			<section className="text-complementary container main-animate flex flex-col my-4 mx-auto px-8 gap-4">
+				<h1 className="text-4xl text-center sm:text-left">
 					Your Order
 				</h1>
 				<form
@@ -74,7 +74,7 @@ const Cart = () => {
 					<button
 						form="cart"
 						type="submit"
-						className="self-center w-fit px-4 py-1 bg-orange-300 hover:bg-teal-500 hover:text-orange-300 text-teal-950 rounded-xl text-2xl font-light"
+						className="self-center w-fit px-4 py-1 bg-gradient-to-r from-ctaBgA to-ctaBgB hover:from-complementary hover:to-primary text-logoText rounded-lg text-2xl font-light"
 					>
 						Checkout
 					</button>
@@ -89,11 +89,11 @@ const Cart = () => {
 				)}
 			</section>
 		)) || (
-			<section className="text-center">
+			<section className="text-center text-complementary">
 				<h1 className="text-4xl my-8 ">Your Cart is Empty</h1>
 				<p className="font-light text-2xl">
 					Would you like to{' '}
-					<Link className="text-orange-600" to="/products">
+					<Link className="text-accent" to="/products">
 						Browse our wares?
 					</Link>
 				</p>

diff --git a/src/components/CartItem.tsx b/src/components/CartItem.tsx
@@ -54,7 +54,7 @@ const CartItem = ({ item }:{item: ICartItem}) => {
 
 	return (
 		<div
-			className="bg-white my-4 rounded-xl text-teal-950 w-full items-center grid grid-rows-[auto_1fr_1fr] grid-cols-1 sm:grid-cols-[8rem_auto_1fr] gap-8 py-4 px-2"
+			className="bg-primary my-4 rounded-xl w-full items-center grid grid-rows-[auto_1fr_1fr] grid-cols-1 sm:grid-cols-[8rem_auto_1fr] gap-8 py-4 px-2"
 			key={item.id}
 		>
 			<figure className="row-span-3 max-w-32 mx-auto">
@@ -102,7 +102,7 @@ const CartItem = ({ item }:{item: ICartItem}) => {
 			</div>
 			<button
 				onClick={removeItem}
-				className=" text-white col-span-2 w-fit px-6 py-1 mx-auto sm:mx-0 rounded-3xl bg-orange-300 hover:bg-teal-500"
+				className=" text-complementary col-span-2 w-fit px-6 py-1 mx-auto sm:mx-0 rounded-3xl bg-red-600 hover:border-accent border border-transparent"
 			>
 				Remove
 			</button>

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -2,15 +2,16 @@ import { Link } from 'react-router-dom';
 
 const Home = () => {
 	return (
-		<section className="main-animate h-full flex flex-col justify-start items-center gap-14 text-teal-950 text-center my-8">
+		<section className="main-animate h-full flex flex-col justify-start items-center gap-14 text-complementary text-center my-8">
 			<p className={"capitalize text-5xl"}>
-				Don&apos;t think <br/>
-				just
+				Don&apos;t think
 			</p>
+
 			<Link
-				className="hover:shadow-teal-950 hover:shadow-md active:shadow-none active:bg-teal-950 active:text-orange-400 bg-orange-400 text-7xl px-12 py-4 rounded-xl"
+				className="bg-gradient-to-r hover:from-complementary hover:to-neutral from-ctaBgA to-ctaBgB text-logoText text-6xl w-80 h-32 flex justify-center items-center bg-white rounded-2xl"
 				to="/products"
 			>
+				<span className={"capitalize text-4xl mr-2"}>just</span>
 				Buy
 			</Link>
 			<figure className="w-full">

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -19,34 +19,33 @@ const Nav = () => {
 	}, [cartItems]);
 
 	return (
-		<nav className="text-lg">
-			<ul className="flex gap-4">
-				<li>
+		<nav>
+			<ul className="flex gap-1.5 text-2xl text-complementary">
+				<li className="w-fit h-fit bg-primary rounded-lg px-2 py-1.5">
 					<Link
-						className="flex items-center gap-1 hover:text-orange-300"
+						className="flex items-center gap-1.5 hover:text-accent"
 						to="/"
 					>
 						<Icon path={mdiHome} size={1} />
 						Home
 					</Link>
 				</li>
-				<li>
+				<li className="w-fit h-fit bg-primary rounded-lg px-2 py-1.5"> 
 					<Link
-						className="flex items-center gap-1 hover:text-orange-300"
+						className="flex items-center gap-1 hover:text-accent"
 						to="/products"
 					>
 						<Icon path={mdiShoppingOutline} size={1} />
 						Products
 					</Link>
 				</li>
-				<li>
+				<li className="w-fit h-fit bg-primary rounded-lg px-2 py-1.5">
 					<Link
-						className="flex items-center gap-1 hover:text-orange-300"
+						className="flex items-center gap-1 hover:text-accent"
 						to="/cart"
 					>
 						<Icon path={mdiCartVariant} size={1} />
 						<span>
-							{' '}
 							Cart {cartItemCount > 0 ? `(${cartItemCount})` : ''}
 						</span>
 					</Link>

diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
@@ -5,7 +5,7 @@ import AddToCartBtn from './AddToCartBtn';
 
 const ProductCard = ({ data } : { data: IProduct }) => {
 	return (
-		<li className="grid gap-4 p-8 bg-white border border-black rounded-2xl text-slate-800 content-between justify-center grid-rows-[150px_repeat(3,auto)]">
+		<li className="grid gap-4 p-4 text-complementary bg-primary rounded-2xl content-between justify-center grid-rows-[150px_repeat(3,auto)]">
 			<figure className={"h-36 w-36 mx-auto"}>
 				<img
 					className="object-contain h-full w-auto mx-auto"

diff --git a/src/components/ProductDetail.tsx b/src/components/ProductDetail.tsx
@@ -22,7 +22,7 @@ const ProductDetail = () => {
 				)
 				|| null !== product
 				&&
-					<section className="bg-white text-black font-bold p-2 rounded-2xl container h-full flex flex-col sm:flex-row items-center sm:items-center justify-center sm:justify-between gap-4">
+					<section className="bg-primary text-complementary font-bold p-2 rounded-2xl container h-full flex flex-col sm:flex-row items-center sm:items-center justify-center sm:justify-between gap-4">
 						<figure className="max-w-80 min-w-72">
 							<img
 								className="object-contain h-full w-full"

diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
@@ -8,7 +8,7 @@ const ProductList = () => {
 	return (
 		<section>
 			{(loading && (
-				<p className="text-center text-4xl">Loading products</p>
+				<p className="text-center text-4xl text-complementary">Loading products</p>
 			)) ||
 				(error && (
 					<div>

diff --git a/src/index.scss b/src/index.scss
@@ -2,13 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-$background-color: #242424;
-
 body{
     margin: 0;
     min-width: 320px;
     min-height: 100vh;
-    background-color: beige;
 }
 
 #root{