Merge pull request #60 from the-collab-lab/el-style-refactor

Update color scheme and refactor styles for design uniformity
the-collab-lab · Oct 9, 2024 · 05d30d9 · 05d30d9
2 parents 301cb4f + 2025a68
commit 05d30d9
Show file tree

Hide file tree

Showing 16 changed files with 226 additions and 431 deletions.
diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
@@ -68,56 +68,46 @@ export function AddItem({ data, listPath }) {
 	};
 
 	return (
-		<div className="flex flex-col items-center justify-center mx-auto">
-			<form onSubmit={handleNewItemSubmit} className="m-2 p-2 items-center">
+		<div className="form-container mb-10">
+			<form onSubmit={handleNewItemSubmit}>
 				{/* Item Name Section */}
-				<div className="flex items-center mb-4">
-					<span className="text-center">
-						<label htmlFor="name" className="mr-2">
-							Item name:{' '}
-						</label>
-						<input
-							id="name"
-							type="text"
-							placeholder="Enter new item name"
-							value={formNewItem.name}
-							onChange={handleNewItemChange}
-							name="name"
-							required
-							className="border p-2"
-						/>
-					</span>
+				<div className="form-group">
+					<label htmlFor="name" className="w-[77px]">
+						New Item:
+					</label>
+					<input
+						id="name"
+						type="text"
+						placeholder="Enter Item Name"
+						value={formNewItem.name}
+						onChange={handleNewItemChange}
+						name="name"
+						required
+						className="form-input"
+					/>
 				</div>
 
 				{/* Urgency Section */}
-				<div className="flex items-center mb-4">
-					<span className="text-center m-4">
-						<label
-							htmlFor="nextPurchase"
-							className="justify-items-start m-2 p-2 mb-2"
-						>
-							Urgency:{' '}
-						</label>
-						<select
-							name="nextPurchase"
-							id="nextPurchase"
-							onChange={handleNewItemChange}
-							value={formNewItem.nextPurchase}
-							required
-							className="border p-2 rounded mb-4"
-						>
-							<option value="">Select Urgency</option>
-							<option value={7}>Soon</option>
-							<option value={14}>Kind of soon</option>
-							<option value={30}>Not soon</option>
-						</select>
-					</span>
+				<div className="form-group">
+					<label htmlFor="nextPurchase" className="w-[77px]">
+						Urgency:{' '}
+					</label>
+					<select
+						name="nextPurchase"
+						id="nextPurchase"
+						onChange={handleNewItemChange}
+						value={formNewItem.nextPurchase}
+						required
+						className="form-input px-1"
+					>
+						<option value="">Select Urgency</option>
+						<option value={7}>Soon</option>
+						<option value={14}>Kind of soon</option>
+						<option value={30}>Not soon</option>
+					</select>
 				</div>
 
-				<button
-					type="submit"
-					className="p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg"
-				>
+				<button type="submit" className="btn-form w-40">
 					Add Item
 				</button>
 

diff --git a/src/components/AddList.jsx b/src/components/AddList.jsx
@@ -24,27 +24,26 @@ export function AddList({ setListPath, userId, userEmail }) {
 	};
 
 	return (
-		<>
-			<form className="m-2" onSubmit={handleCreateListButton}>
-				<label htmlFor="listName" className="text-2xl text-center m-2">
-					List Name:
-				</label>
-				<input
-					className="m-4"
-					type="text"
-					id="listName"
-					value={listName}
-					onChange={(e) => setListName(e.target.value)}
-					placeholder="Enter the name of your new list"
-					required
-				/>
-				<button
-					type="submit"
-					className="m-4 p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg"
-				>
-					Create list
+		<div className="form-container mb-12">
+			<form onSubmit={handleCreateListButton}>
+				<div className="form-group">
+					<label htmlFor="listName" className="w-[68px]">
+						New List:
+					</label>
+					<input
+						className="form-input"
+						type="text"
+						id="listName"
+						value={listName}
+						onChange={(e) => setListName(e.target.value)}
+						placeholder="Enter List Name"
+						required
+					/>
+				</div>
+				<button type="submit" className="btn-form w-48">
+					Create List
 				</button>
 			</form>
-		</>
+		</div>
 	);
 }
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import './ListItem.css';
 import { FaTrashCan, FaCartShopping } from 'react-icons/fa6';
 
 export function ListItem({
@@ -42,24 +41,27 @@ export function ListItem({
 	};
 
 	return (
-		<div className="list-item items-center justify-between p-3 rounded-xl">
+		<div
+			className="bg-primary text-secondary hover:bg-accent hover:text-primary
+			hover:shadow-lg my-2 px-3 py-2 rounded-lg item-transition"
+		>
 			<div className="flex items-center justify-between space-x-2">
-				<label className="flex items-center space-x-2">
+				<label className="flex items-center cursor-pointer">
 					<input
 						type="checkbox"
 						checked={isChecked}
 						onChange={onCheck}
 						disabled={isChecked}
-						className="form-checkbox h-5 w-5 hover:text-red-700"
+						className="form-checkbox h-4 w-4 lg:h-5 lg:w-5"
 					/>
-					<div className="flex items-center space-x-2">
-						<FaCartShopping />
-						<span className="item-name">{name}</span>
+					<div className="flex items-center space-x-1">
+						<FaCartShopping className="hidden md:block md:ml-2" />
+						<span className="lg:text-lg">{name}</span>
 					</div>
 				</label>
 				<div className="flex items-center space-x-2">
 					<span
-						className={`px-2 py-1 border text-sm font-medium uppercase ${categoryColor[category]}`}
+						className={`px-2 p-1 text-xs font-light uppercase ${categoryColor[category]}`}
 						style={{ color: categoryColor[category] }}
 					>
 						{category}

diff --git a/src/components/SingleList.css b/src/components/SingleList.css
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
@@ -1,4 +1,3 @@
-// import './SingleList.css';
 import { useNavigate } from 'react-router-dom';
 import { deleteList } from '../api';
 import { FaTrashCan } from 'react-icons/fa6';
@@ -25,14 +24,15 @@ export function SingleList({ name, path, setListPath, userId, userEmail }) {
 	};
 
 	return (
-		<li className="flex flex-row items-baseline text-lg m-4 p-2 border-2 rounded-xl border-yellow-300 hover:shadow-lg">
+		<li
+			className="mx-auto w-full max-w-[450px] flex justify-between items-center mb-3 py-2 px-3 
+			border-2 rounded-lg border-accent hover:shadow-lg hover:bg-accent 
+			hover:text-primary item-transition"
+		>
 			<button onClick={handleClick}>{name}</button>
 			{isUsersList && (
-				<button
-					className="flex place-self-center pl-2"
-					onClick={() => handleDelete(path, userEmail)}
-				>
-					<FaTrashCan className="" />
+				<button onClick={() => handleDelete(path, userEmail)}>
+					<FaTrashCan className="hover:text-red-700" />
 				</button>
 			)}
 		</li>

diff --git a/src/components/SingleListOld.css b/src/components/SingleListOld.css
diff --git a/src/index.css b/src/index.css
@@ -7,63 +7,61 @@
 
 @layer base {
 	html {
-		@apply text-blue-950 font-sans dark:bg-slate-900 dark:text-white;
+		@apply font-sans bg-base text-secondary dark:bg-secondary dark:text-base;
 	}
 
-	a {
+	a,
+	button {
 		@apply cursor-pointer;
 	}
 
-	.Layout {
-		@apply flex flex-col;
-		height: 100dvh;
-	}
-
 	.logo {
-		@apply text-2xl md:text-3xl flex flex-row items-center md:gap-2;
+		@apply text-2xl md:text-3xl flex flex-row items-center md:gap-2
+			text-accent dark:text-primary;
 		font-family: 'Gloria Hallelujah', sans-serif;
 	}
+}
 
-	.logo img {
-		@apply h-[50px] md:h-[60px];
+@layer components {
+	.subheading {
+		@apply text-center text-2xl mb-4;
 	}
 
-	.btn-auth {
-		@apply rounded-[30px] hover:bg-yellow-300 p-3 inline-flex items-center gap-3;
-	}
-
-	.Layout-header,
-	.Nav {
-		@apply bg-yellow-200 dark:text-blue-950;
+	.nav-link {
+		@apply flex flex-col lg:flex-row items-center justify-center gap-y-1 lg:gap-x-2 
+			leading-tight text-2xl py-3 lg:py-5 hover:text-accent;
 	}
 
-	.Layout-header {
-		@apply mb-6 md:mb-12 lg:mb-16;
+	.nav-link.active {
+		@apply underline underline-offset-4 text-accent;
 	}
 
-	.Header-container {
-		@apply container mx-auto flex justify-between items-center p-2;
+	.form-container {
+		@apply mx-auto w-full max-w-[500px];
 	}
 
-	.Layout-main {
-		@apply mx-auto p-2;
-		width: min(700px, 100%);
+	.form-group {
+		@apply flex justify-between items-center mb-2;
 	}
 
-	.Nav {
-		@apply bottom-0 fixed w-full p-2 md:py-0;
+	.form-input {
+		@apply border border-accent rounded-lg py-1 px-2 grow;
 	}
 
-	.Nav-container {
-		@apply container mx-auto flex flex-row justify-evenly;
+	.btn-form {
+		@apply block mx-auto mt-4 py-1.5 px-3 lg:py-2 rounded-full bg-accent text-primary 
+			hover:shadow-lg;
 	}
 
-	.Nav-link {
-		@apply flex flex-col lg:flex-row items-center justify-center gap-y-1 lg:gap-x-2 
-			leading-tight text-2xl p-3 lg:p-5 rounded-[30px] hover:bg-yellow-300 md:w-full lg:w-[250px];
+	.btn-auth {
+		@apply rounded-full p-2 md:p-3 inline-flex items-center gap-3 border-2
+			border-accent text-accent hover:bg-accent hover:text-primary
+			dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-secondary;
 	}
 
-	.Nav-link.active {
-		@apply underline bg-yellow-400;
+	.item-transition {
+		transition:
+			background-color 0.4s,
+			box-shadow 0.3s;
 	}
 }