From 9498dc3f629fd77160925f8969cc88c6fe140d87 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Tue, 8 Oct 2024 23:45:46 +0200
Subject: [PATCH 01/10] adjust styling of components, forms, buttons and views
 to make them visually consistent. refactor repeated styles into custom
 classes

---
 src/components/AddItem.jsx    | 78 +++++++++++++----------------
 src/components/AddList.jsx    | 39 +++++++--------
 src/components/ListItem.css   | 14 ------
 src/components/ListItem.jsx   | 17 +++----
 src/components/SingleList.css | 10 ----
 src/components/SingleList.jsx | 10 ++--
 src/index.css                 | 87 +++++++++++++++++++++++---------
 src/views/Home.css            | 10 ----
 src/views/Home.jsx            | 93 +++++++++++++++++------------------
 src/views/Layout.jsx          | 22 ++++-----
 src/views/List.jsx            | 30 +++++------
 src/views/ManageList.jsx      | 56 ++++++++++++---------
 tailwind.config.js            |  6 +++
 13 files changed, 237 insertions(+), 235 deletions(-)
 delete mode 100644 src/components/ListItem.css
 delete mode 100644 src/components/SingleList.css
 delete mode 100644 src/views/Home.css

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
index f53c307..3b90bca 100644
--- 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
index 9002093..2dbfdee 100644
--- 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
deleted file mode 100644
index 53a71f6..0000000
--- a/src/components/ListItem.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.list-item {
-	background-color: #ffe5cf;
-	border: 2px solid #e5e7eb;
-	border-color: #ff885b;
-	margin: 5px;
-	transition:
-		background-color 0.3s,
-		box-shadow 0.3s;
-}
-
-.list-item:hover {
-	background-color: #ff885b;
-	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 8581c8f..a799a46 100644
--- 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,24 @@ export function ListItem({
 	};
 
 	return (
-		<div className="list-item items-center justify-between p-3 rounded-xl">
-			<div className="flex items-center justify-between space-x-2">
-				<label className="flex items-center space-x-2">
+		<div className="list-item">
+			<div className="list-item-flex">
+				<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
deleted file mode 100644
index 1e528f0..0000000
--- a/src/components/SingleList.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.SingleList {
-	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
-}
-
-.SingleList-label {
-	margin-left: 0.2em;
-}
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
index 18e308c..89d5d32 100644
--- 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,11 @@ 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="single-list">
 			<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/index.css b/src/index.css
index 95d19a8..8919c98 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,20 +7,26 @@
 
 @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 {
+	.subheading {
+		@apply text-center text-2xl mb-4;
+	}
+
+	.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;
 	}
 
@@ -29,41 +35,78 @@
 	}
 
 	.btn-auth {
-		@apply rounded-[30px] hover:bg-yellow-300 p-3 inline-flex items-center gap-3;
+		@apply rounded-[30px] 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;
 	}
 
-	.Layout-header,
-	.Nav {
-		@apply bg-yellow-200 dark:text-blue-950;
+	.layout-header {
+		@apply mb-4;
 	}
 
-	.Layout-header {
-		@apply mb-6 md:mb-12 lg:mb-16;
-	}
-
-	.Header-container {
+	.header-container {
 		@apply container mx-auto flex justify-between items-center p-2;
 	}
 
-	.Layout-main {
-		@apply mx-auto p-2;
-		width: min(700px, 100%);
+	.layout-main {
+		@apply mx-auto p-5;
+		width: min(600px, 100%);
 	}
 
-	.Nav {
+	.nav {
 		@apply bottom-0 fixed w-full p-2 md:py-0;
 	}
 
-	.Nav-container {
+	.nav-container {
 		@apply container mx-auto flex flex-row justify-evenly;
 	}
 
-	.Nav-link {
+	.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];
+			leading-tight text-2xl py-3 lg:py-5 hover:text-accent;
+	}
+
+	.nav-link.active {
+		@apply underline text-accent;
+	}
+
+	.list-item {
+		@apply bg-primary text-secondary hover:bg-accent hover:text-primary
+		my-2 px-3 py-2 rounded-lg;
+		transition:
+			background-color 0.3s,
+			box-shadow 0.3s;
+	}
+
+	.list-item:hover {
+		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+	}
+
+	.list-item-flex {
+		@apply flex items-center justify-between space-x-2;
+	}
+
+	.single-list {
+		@apply mx-auto flex justify-between items-center mb-3 py-2 px-3 border-2 rounded-lg 
+			border-accent hover:shadow-lg cursor-pointer;
+		width: min(100%, 450px);
+	}
+
+	.form-container {
+		width: min(500px, 100%);
+		@apply mx-auto;
+	}
+
+	.form-group {
+		@apply flex justify-between items-center mb-2;
+	}
+
+	.form-input {
+		@apply border border-accent rounded-lg py-1 px-2 grow;
 	}
 
-	.Nav-link.active {
-		@apply underline bg-yellow-400;
+	.btn-form {
+		@apply block mx-auto mt-4 py-1.5 px-3 rounded-full bg-accent text-primary 
+			hover:shadow-lg;
 	}
 }
diff --git a/src/views/Home.css b/src/views/Home.css
deleted file mode 100644
index b97c8d4..0000000
--- a/src/views/Home.css
+++ /dev/null
@@ -1,10 +0,0 @@
-form {
-	display: flex;
-	flex-direction: column;
-	width: 50%;
-}
-#listName,
-.button {
-	padding: 4% 4%;
-	margin: 2% 2%;
-}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 205ea26..4a240e2 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,4 +1,3 @@
-import './Home.css';
 import { SingleList, AddList } from '../components';
 import { auth } from '../api/config.js';
 import { SignInButton, useAuth } from '../api/useAuth';
@@ -7,53 +6,51 @@ export function Home({ data, setListPath, userId, userEmail }) {
 	const { user } = useAuth();
 
 	return (
-		<div className="Home">
-			<div className="container mx-auto px-2 flex flex-col items-center justify-center justify-items-center">
-				{!!user ? (
-					<>
-						<p className="text-3xl ">
-							Welcome back {auth.currentUser.displayName.split(' ')[0]}!
+		<>
+			{!!user ? (
+				<>
+					<h2 className="subheading">
+						Welcome back {auth.currentUser.displayName.split(' ')[0]}!
+					</h2>
+					<AddList
+						setListPath={setListPath}
+						userId={userId}
+						userEmail={userEmail}
+					/>
+					{data.length === 0 && (
+						<p>
+							{' '}
+							You don&apos;t have any shopping lists yet. Start by creating your
+							first one!
 						</p>
-						{data.length === 0 && (
-							<p>
-								{' '}
-								You don&apos;t have any shopping lists yet. Start by creating
-								your first one!
-							</p>
-						)}
-						{data.length > 0 && (
-							<ul>
-								{data.map((list, id) => (
-									<SingleList
-										key={id}
-										name={list.name}
-										path={list.path}
-										setListPath={setListPath}
-										userId={userId}
-										userEmail={userEmail}
-									/>
-								))}
-							</ul>
-						)}
-						<AddList
-							setListPath={setListPath}
-							userId={userId}
-							userEmail={userEmail}
-						/>
-					</>
-				) : (
-					<>
-						<p className="text-2xl text-center">
-							Welcome to Shop&apos;n Go the smart app that keeps track of your
-							shopping lists and schedule.
-						</p>
-						<p className="text-lg italic mt-5 text-center">
-							Smart Choices, Swift Shopping!
-						</p>
-						<SignInButton className="rounded-full border-yellow-300 border-2 hover:bg-yellow-300"></SignInButton>
-					</>
-				)}
-			</div>
-		</div>
+					)}
+					{data.length > 0 && (
+						<ul>
+							{data.map((list, id) => (
+								<SingleList
+									key={id}
+									name={list.name}
+									path={list.path}
+									setListPath={setListPath}
+									userId={userId}
+									userEmail={userEmail}
+								/>
+							))}
+						</ul>
+					)}
+				</>
+			) : (
+				<>
+					<p className="text-2xl text-center">
+						Welcome to Shop&apos;n Go the smart app that keeps track of your
+						shopping lists and schedule.
+					</p>
+					<p className="text-lg italic mt-5 text-center">
+						Smart Choices, Swift Shopping!
+					</p>
+					<SignInButton className="btn-auth"></SignInButton>
+				</>
+			)}
+		</>
 	);
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 56a4192..17f67f7 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -12,9 +12,9 @@ export function Layout() {
 	const { user } = useAuth();
 	return (
 		<>
-			<div className="Layout">
-				<header className="Layout-header">
-					<div className="Header-container">
+			<div className="layout">
+				<header className="layout-header">
+					<div className="header-container">
 						<Link to="/">
 							<h1 className="logo">
 								{' '}
@@ -28,28 +28,28 @@ export function Layout() {
 						)}
 					</div>
 				</header>
-				<main className="Layout-main">
+				<main className="layout-main">
 					<Outlet />
 				</main>
-				<nav className="Nav">
-					<div className="Nav-container">
-						<NavLink to="/" className="Nav-link">
+				<nav className="nav">
+					<div className="nav-container">
+						<NavLink to="/" className="nav-link">
 							<FaHome />
 							<span className="hidden md:inline">Home</span>
 						</NavLink>
 						{user && (
-							<NavLink to="/list" className="Nav-link">
+							<NavLink to="/list" className="nav-link">
 								<FaClipboardList />
 								<span className="hidden md:inline">List</span>
 							</NavLink>
 						)}
 						{user && (
-							<NavLink to="/manage-list" className="Nav-link">
+							<NavLink to="/manage-list" className="nav-link">
 								<FaShareAlt />
-								<span className="hidden md:inline">Settings</span>
+								<span className="hidden md:inline">Share</span>
 							</NavLink>
 						)}
-						<NavLink to="/about" className="Nav-link">
+						<NavLink to="/about" className="nav-link">
 							<FaInfoCircle />
 							<span className="hidden md:inline">About</span>
 						</NavLink>
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 50ccd0b..f659e9b 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -68,8 +68,8 @@ export function List({ data, listPath, lists }) {
 	};
 
 	return (
-		<div className="container mx-auto px-4 min-h-screen flex flex-col items-center justify-center justify-items-center mb-40">
-			<h2 className="text-3xl">{fixedListTitle}</h2>
+		<>
+			<h2 className="subheading">{fixedListTitle}</h2>
 			{!listPath && lists.length > 0 && data.length > 0 && (
 				<p>
 					Oops! No list selected yet. Head to the <Link to="/">home page</Link>{' '}
@@ -99,23 +99,19 @@ export function List({ data, listPath, lists }) {
 				<>
 					<AddItem data={data} listPath={listPath} />
 
-					<form onSubmit={handleSearch}>
-						<div>
-							<span className="flex flex-col m-2 p-2 justify-evenly">
-								<label
-									htmlFor="search-item-in-list"
-									className="text-center m-4"
-								>
-									{' '}
-									Search items:
+					<div className="form-container">
+						<form onSubmit={handleSearch}>
+							<div className="form-group">
+								<label htmlFor="search-item-in-list" className="mr-2">
+									Filter:
 								</label>
 								<input
-									className="border"
+									className="form-input"
 									onChange={handleSearch}
 									type="text"
 									id="search-item-in-list"
 									value={searchItem}
-									placeholder="Search an item..."
+									placeholder="Search Item..."
 									aria-label="Search for items"
 								/>
 								{searchItem && (
@@ -123,9 +119,9 @@ export function List({ data, listPath, lists }) {
 										<FiDelete />
 									</button>
 								)}
-							</span>
-						</div>
-					</form>
+							</div>
+						</form>
+					</div>
 
 					{searchItem ? (
 						<ul>
@@ -163,6 +159,6 @@ export function List({ data, listPath, lists }) {
 					)}
 				</>
 			)}
-		</div>
+		</>
 	);
 }
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index bf89f86..2d0c6bb 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -4,6 +4,13 @@ import { shareList } from '../api/firebase';
 export function ManageList({ listPath, userId }) {
 	const [formAddUser, setFormAddUser] = useState('');
 
+	const listTitle = listPath ? listPath.split('/')[1] : null;
+	const fixedListTitle = listTitle
+		? listTitle[listTitle.length - 1] === '}'
+			? listTitle.slice(0, -1)
+			: listTitle
+		: null;
+
 	const handleAddUserSubmit = async (e) => {
 		e.preventDefault();
 
@@ -24,29 +31,32 @@ export function ManageList({ listPath, userId }) {
 	};
 
 	return (
-		<div className="container mx-auto px-4 flex flex-col items-center justify-center justify-items-center mb-40">
-			<h2 className="text-xl text-center">
-				Invite a user to share your list with you
-			</h2>
-			<form className="flex flex-col m-2 p-2" onSubmit={handleAddUserSubmit}>
-				<label className="text-lg text-center" htmlFor="email">
-					User email
-				</label>
-				<input
-					className="border m-3 p-3"
-					id="email"
-					type="email"
-					placeholder="Email"
-					value={formAddUser}
-					onChange={(e) => setFormAddUser(e.target.value)}
-					name="email"
-					required
-				/>
+		<>
+			<h2 className="subheading">{fixedListTitle}</h2>
+			<p className="text-center text-xl mb-3">
+				Share your list with another user
+			</p>
+			<div className="form-container">
+				<form onSubmit={handleAddUserSubmit}>
+					<div className="form-group">
+						<label className="w-[87px]" htmlFor="email">
+							User Email:
+						</label>
+						<input
+							className="form-input"
+							id="email"
+							type="email"
+							placeholder="Email"
+							value={formAddUser}
+							onChange={(e) => setFormAddUser(e.target.value)}
+							name="email"
+							required
+						/>
+					</div>
 
-				<button className="text-lg m-3 p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg">
-					Invite
-				</button>
-			</form>
-		</div>
+					<button className="btn-form w-40">Share</button>
+				</form>
+			</div>
+		</>
 	);
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9067ecb..100483a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,12 @@ export default {
 			fontFamily: {
 				sans: ['Fredoka', ...defaultTheme.fontFamily.sans],
 			},
+			colors: {
+				primary: '#F1F6F9',
+				secondary: '#142833',
+				accent: '#0089B6',
+				base: '#D7E4EB',
+			},
 		},
 	},
 	plugins: [],

From 7754926ea79880194089aecac373230832b69de0 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Tue, 8 Oct 2024 23:57:52 +0200
Subject: [PATCH 02/10] fix hiddent content behind nav

---
 src/components/SingleListOld.css | 10 ----------
 src/index.css                    |  2 +-
 2 files changed, 1 insertion(+), 11 deletions(-)
 delete mode 100644 src/components/SingleListOld.css

diff --git a/src/components/SingleListOld.css b/src/components/SingleListOld.css
deleted file mode 100644
index 1e528f0..0000000
--- a/src/components/SingleListOld.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.SingleList {
-	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
-}
-
-.SingleList-label {
-	margin-left: 0.2em;
-}
diff --git a/src/index.css b/src/index.css
index 8919c98..1c32e94 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,7 +49,7 @@
 	}
 
 	.layout-main {
-		@apply mx-auto p-5;
+		@apply mx-auto p-5 pb-20;
 		width: min(600px, 100%);
 	}
 

From 6ef0274c421933973490d8ab05f965a035b00332 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 00:01:54 +0200
Subject: [PATCH 03/10] add hover state for SingleList component

---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 1c32e94..241bfc4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -88,7 +88,7 @@
 
 	.single-list {
 		@apply mx-auto flex justify-between items-center mb-3 py-2 px-3 border-2 rounded-lg 
-			border-accent hover:shadow-lg cursor-pointer;
+			border-accent cursor-pointer hover:shadow-lg hover:bg-accent;
 		width: min(100%, 450px);
 	}
 

From cf4465ee3a63cbfd6073959416414ca2e8a27354 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 17:38:55 +0200
Subject: [PATCH 04/10] add hover states, refactor custom classes

---
 src/components/ListItem.jsx   |   7 ++-
 src/components/SingleList.jsx |   6 +-
 src/index.css                 | 102 ++++++++++++++++++----------------
 src/views/Layout.jsx          |  19 ++++---
 4 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index a799a46..36cf259 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -41,8 +41,11 @@ export function ListItem({
 	};
 
 	return (
-		<div className="list-item">
-			<div className="list-item-flex">
+		<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 cursor-pointer">
 					<input
 						type="checkbox"
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
index 89d5d32..ace1d0e 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/SingleList.jsx
@@ -24,7 +24,11 @@ export function SingleList({ name, path, setListPath, userId, userEmail }) {
 	};
 
 	return (
-		<li className="single-list">
+		<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 cursor-pointer hover:shadow-lg hover:bg-accent 
+			hover:text-primary item-transition"
+		>
 			<button onClick={handleClick}>{name}</button>
 			{isUsersList && (
 				<button onClick={() => handleDelete(path, userEmail)}>
diff --git a/src/index.css b/src/index.css
index 241bfc4..b93e11c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,86 +15,78 @@
 		@apply cursor-pointer;
 	}
 
-	.subheading {
-		@apply text-center text-2xl mb-4;
-	}
-
-	.layout {
-		@apply flex flex-col;
-		height: 100dvh;
-	}
-
 	.logo {
 		@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 {
+	/* .logo img {
 		@apply h-[50px] md:h-[60px];
-	}
+	} */
 
-	.btn-auth {
-		@apply rounded-[30px] 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;
-	}
+	/* .layout {
+		@apply flex flex-col h-dvh;
+	} */
 
-	.layout-header {
+	/* .layout-header {
 		@apply mb-4;
-	}
+	} */
 
-	.header-container {
+	/* .header-container {
 		@apply container mx-auto flex justify-between items-center p-2;
-	}
+	} */
 
-	.layout-main {
-		@apply mx-auto p-5 pb-20;
-		width: min(600px, 100%);
-	}
+	/* .layout-main {
+		@apply mx-auto w-full max-w-[600px] p-5 pb-16;
+	} */
 
-	.nav {
+	/* .nav {
 		@apply bottom-0 fixed w-full p-2 md:py-0;
-	}
+	} */
 
-	.nav-container {
+	/* .nav-container {
 		@apply container mx-auto flex flex-row justify-evenly;
-	}
-
-	.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;
-	}
+	} */
 
-	.nav-link.active {
-		@apply underline text-accent;
-	}
+	/* .single-list {
+		@apply mx-auto w-full max-w-[450px] flex justify-between items-center mb-3 py-2 px-3 
+			border-2 rounded-lg border-accent cursor-pointer hover:shadow-lg hover:bg-accent 
+			hover:text-primary;
+		transition:
+			background-color 0.3s,
+			box-shadow 0.3s;
+	} */
 
-	.list-item {
+	/* .list-item {
 		@apply bg-primary text-secondary hover:bg-accent hover:text-primary
-		my-2 px-3 py-2 rounded-lg;
+			hover:shadow-lg my-2 px-3 py-2 rounded-lg;
 		transition:
 			background-color 0.3s,
 			box-shadow 0.3s;
-	}
+	} */
+
+	/* .list-item-flex {
+		@apply flex items-center justify-between space-x-2;
+	} */
+}
 
-	.list-item:hover {
-		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+@layer components {
+	.subheading {
+		@apply text-center text-2xl mb-4;
 	}
 
-	.list-item-flex {
-		@apply flex items-center justify-between space-x-2;
+	.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;
 	}
 
-	.single-list {
-		@apply mx-auto flex justify-between items-center mb-3 py-2 px-3 border-2 rounded-lg 
-			border-accent cursor-pointer hover:shadow-lg hover:bg-accent;
-		width: min(100%, 450px);
+	.nav-link.active {
+		@apply underline text-accent;
 	}
 
 	.form-container {
-		width: min(500px, 100%);
-		@apply mx-auto;
+		@apply mx-auto w-full max-w-[500px];
 	}
 
 	.form-group {
@@ -109,4 +101,16 @@
 		@apply block mx-auto mt-4 py-1.5 px-3 rounded-full bg-accent text-primary 
 			hover:shadow-lg;
 	}
+
+	.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;
+	}
+
+	.item-transition {
+		transition:
+			background-color 0.4s,
+			box-shadow 0.3s;
+	}
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 17f67f7..8fe3ed8 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -12,13 +12,18 @@ export function Layout() {
 	const { user } = useAuth();
 	return (
 		<>
-			<div className="layout">
-				<header className="layout-header">
-					<div className="header-container">
+			<div className="flex flex-col h-dvh">
+				<header className="mb-4">
+					<div className="container mx-auto flex justify-between items-center p-2">
 						<Link to="/">
 							<h1 className="logo">
 								{' '}
-								<img src="/img/plastic-bag.png" alt="" /> Shop&apos;n Go
+								<img
+									className="h-[50px] md:h-[60px]"
+									src="/img/plastic-bag.png"
+									alt=""
+								/>{' '}
+								Shop&apos;n Go
 							</h1>
 						</Link>
 						{!!user ? (
@@ -28,11 +33,11 @@ export function Layout() {
 						)}
 					</div>
 				</header>
-				<main className="layout-main">
+				<main className="mx-auto w-full max-w-[600px] p-5 pb-16">
 					<Outlet />
 				</main>
-				<nav className="nav">
-					<div className="nav-container">
+				<nav className="bottom-0 fixed w-full p-2 md:py-0">
+					<div className="container mx-auto flex flex-row justify-evenly">
 						<NavLink to="/" className="nav-link">
 							<FaHome />
 							<span className="hidden md:inline">Home</span>

From 5db010e1c317bc46ff57cee44bf88869e475da10 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 17:53:58 +0200
Subject: [PATCH 05/10] adjust form button size

---
 src/index.css | 51 +--------------------------------------------------
 1 file changed, 1 insertion(+), 50 deletions(-)

diff --git a/src/index.css b/src/index.css
index b93e11c..83237a4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,55 +20,6 @@
 			text-accent dark:text-primary;
 		font-family: 'Gloria Hallelujah', sans-serif;
 	}
-
-	/* .logo img {
-		@apply h-[50px] md:h-[60px];
-	} */
-
-	/* .layout {
-		@apply flex flex-col h-dvh;
-	} */
-
-	/* .layout-header {
-		@apply mb-4;
-	} */
-
-	/* .header-container {
-		@apply container mx-auto flex justify-between items-center p-2;
-	} */
-
-	/* .layout-main {
-		@apply mx-auto w-full max-w-[600px] p-5 pb-16;
-	} */
-
-	/* .nav {
-		@apply bottom-0 fixed w-full p-2 md:py-0;
-	} */
-
-	/* .nav-container {
-		@apply container mx-auto flex flex-row justify-evenly;
-	} */
-
-	/* .single-list {
-		@apply mx-auto w-full max-w-[450px] flex justify-between items-center mb-3 py-2 px-3 
-			border-2 rounded-lg border-accent cursor-pointer hover:shadow-lg hover:bg-accent 
-			hover:text-primary;
-		transition:
-			background-color 0.3s,
-			box-shadow 0.3s;
-	} */
-
-	/* .list-item {
-		@apply bg-primary text-secondary hover:bg-accent hover:text-primary
-			hover:shadow-lg my-2 px-3 py-2 rounded-lg;
-		transition:
-			background-color 0.3s,
-			box-shadow 0.3s;
-	} */
-
-	/* .list-item-flex {
-		@apply flex items-center justify-between space-x-2;
-	} */
 }
 
 @layer components {
@@ -98,7 +49,7 @@
 	}
 
 	.btn-form {
-		@apply block mx-auto mt-4 py-1.5 px-3 rounded-full bg-accent text-primary 
+		@apply block mx-auto mt-4 py-1.5 px-3 lg:py-2 rounded-full bg-accent text-primary 
 			hover:shadow-lg;
 	}
 

From b64f3ee80ea65583198e29ff3b3999470f38d982 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 18:08:45 +0200
Subject: [PATCH 06/10] adjust underline offset for active links

---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 83237a4..2832ba3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -33,7 +33,7 @@
 	}
 
 	.nav-link.active {
-		@apply underline text-accent;
+		@apply underline underline-offset-4 text-accent;
 	}
 
 	.form-container {

From 1b44840d442d04d13050a68682aaad7724ae0ef6 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 18:14:13 +0200
Subject: [PATCH 07/10] delete old stylesheets

---
 src/indexOld.css        | 101 ----------------------------------------
 src/views/LayoutOld.css |  73 -----------------------------
 2 files changed, 174 deletions(-)
 delete mode 100644 src/indexOld.css
 delete mode 100644 src/views/LayoutOld.css

diff --git a/src/indexOld.css b/src/indexOld.css
deleted file mode 100644
index 3148828..0000000
--- a/src/indexOld.css
+++ /dev/null
@@ -1,101 +0,0 @@
-:root {
-	--color-black: hsla(220, 13%, 18%, 1);
-	--color-gray-dark: hsla(220, 13%, 25%, 1);
-	--color-white: hsla(220, 13%, 98%, 1);
-	--color-gray-light: hsla(220, 13%, 94%, 1);
-	--color-emerald-green: hsla(168, 92%, 25%, 1);
-	--color-vermillion-green: hsla(168, 92%, 43%, 1);
-	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
-	--color-pastel-blue: hsla(215, 100%, 73%, 1);
-	--color-red: hsl(0, 68%, 42%);
-
-	--color-accent: var(--color-pastel-blue);
-	--color-bg: var(--color-black);
-	--color-border: hsla(220, 13%, 32%, 1);
-	--color-error: var(--color-red);
-	--color-text: var(--color-white);
-
-	/**
- * Set the value of 1rem to 10px to make relative units
- * easier to work with.
- * (The default is 16px. 16 * 62.5% = 10)
- */
-	font-size: 62.5%;
-}
-
-@media screen and (prefers-color-scheme: light) {
-	:root {
-		--color-accent: var(--color-cobalt-blue);
-		--color-bg: var(--color-white);
-		--color-border: hsla(220, 13%, 78%, 1);
-		--color-text: var(--color-black);
-	}
-}
-
-:root.theme-light {
-	--color-accent: var(--color-cobalt-blue);
-	--color-bg: var(--color-white);
-	--color-border: hsla(220, 13%, 78%, 1);
-	--color-text: var(--color-black);
-}
-
-*,
-*::after,
-*::before {
-	box-sizing: border-box;
-}
-
-body {
-	background-color: var(--color-bg);
-	color: var(--color-text);
-	font-family:
-		-apple-system,
-		BlinkMacSystemFont,
-		avenir next,
-		avenir,
-		segoe ui,
-		helvetica neue,
-		helvetica,
-		Ubuntu,
-		roboto,
-		noto,
-		arial,
-		sans-serif;
-	font-size: 1.8rem;
-	/** Make sure the app fills the height of the screen. */
-	height: 100dvh;
-	line-height: 1.4;
-	margin: 0;
-
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-code {
-	--color-bg: var(--color-gray-dark);
-	--color-text: var(--color-accent);
-
-	background-color: var(--color-bg);
-	border-radius: 4px;
-	color: var(--color-text);
-	display: inline-block;
-	font-family:
-		Menlo,
-		Consolas,
-		Monaco,
-		Liberation Mono,
-		Lucida Console,
-		monospace;
-	font-size: 0.9em;
-	padding: 2px 2px;
-}
-
-@media screen and (prefers-color-scheme: light) {
-	code {
-		--color-bg: var(--color-gray-light);
-	}
-}
-
-:root.theme-light code {
-	--color-bg: var(--color-gray-light);
-}
diff --git a/src/views/LayoutOld.css b/src/views/LayoutOld.css
deleted file mode 100644
index 85be734..0000000
--- a/src/views/LayoutOld.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * The `env()` function used in this block of code
- * allows us to reference special variables that might be defined
- * by certain browsers. In this case, we are making sure that
- * the app stays within the 'safe' viewable area of a mobile phone,
- * and isn't covered up by the phone's UI.
- *
- * @see: https://developer.mozilla.org/en-US/docs/Web/CSS/env
- */
-.Layout {
-	display: flex;
-	flex-direction: column;
-	height: 100dvh;
-}
-
-.Layout > * {
-	padding-inline: min(5dvw, 3.2rem);
-}
-
-.Layout-header {
-	background-color: var(--color-bg);
-	padding-bottom: 0.5rem;
-	padding-top: max(env(safe-area-inset-top), 1rem);
-	text-align: center;
-}
-
-.Layout-header > h1 {
-	margin: 0;
-}
-
-.Layout-main {
-	margin: 0 auto;
-	padding-block: 0;
-	padding-block-end: 6.26rem;
-	width: min(72ch, 100%);
-}
-
-.Nav {
-	background-color: var(--color-bg);
-	border-top: 1px solid var(--color-border);
-	bottom: 0;
-	display: flex;
-	flex-direction: row;
-	padding-bottom: max(env(safe-area-inset-bottom), 1rem);
-	padding-top: 1rem;
-	place-content: center;
-	position: fixed;
-	width: 100%;
-}
-
-.Nav-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-evenly;
-	width: min(72ch, 100%);
-}
-
-.Nav-link {
-	--color-text: var(--color-accent);
-
-	color: var(--color-text);
-	font-size: 1.4em;
-	flex: 0 1 auto;
-	line-height: 1;
-	padding: 0.8rem;
-	text-align: center;
-	text-underline-offset: 0.1em;
-}
-
-.Nav-link.active {
-	text-decoration-thickness: 0.22em;
-	text-underline-offset: 0.1em;
-}

From 5a256c3a880933e4a772feab561e6736160f75be Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 18:34:00 +0200
Subject: [PATCH 08/10] adjust bottom padding on main for bigger screens

---
 src/views/Layout.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 8fe3ed8..cbd5b6e 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -33,7 +33,7 @@ export function Layout() {
 						)}
 					</div>
 				</header>
-				<main className="mx-auto w-full max-w-[600px] p-5 pb-16">
+				<main className="mx-auto w-full max-w-[600px] p-5 pb-16 md:pb-20">
 					<Outlet />
 				</main>
 				<nav className="bottom-0 fixed w-full p-2 md:py-0">

From 5c4916a02ae9ae57db3e39c849564d4fc5424b5a Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 19:02:39 +0200
Subject: [PATCH 09/10] remove cursor-pointer when hovering over SingleList
 component

---
 src/components/SingleList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
index ace1d0e..a96346a 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/SingleList.jsx
@@ -26,7 +26,7 @@ export function SingleList({ name, path, setListPath, userId, userEmail }) {
 	return (
 		<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 cursor-pointer hover:shadow-lg hover:bg-accent 
+			border-2 rounded-lg border-accent hover:shadow-lg hover:bg-accent 
 			hover:text-primary item-transition"
 		>
 			<button onClick={handleClick}>{name}</button>

From 2025a68f7062e543123f13bef9794670ea431c7e Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Wed, 9 Oct 2024 19:37:23 +0200
Subject: [PATCH 10/10] add prompt and sign in link to Home view for new users

---
 src/views/Home.jsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 4a240e2..558e0c8 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,6 +1,7 @@
 import { SingleList, AddList } from '../components';
 import { auth } from '../api/config.js';
-import { SignInButton, useAuth } from '../api/useAuth';
+import { useAuth } from '../api/useAuth';
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 
 export function Home({ data, setListPath, userId, userEmail }) {
 	const { user } = useAuth();
@@ -45,10 +46,19 @@ export function Home({ data, setListPath, userId, userEmail }) {
 						Welcome to Shop&apos;n Go the smart app that keeps track of your
 						shopping lists and schedule.
 					</p>
-					<p className="text-lg italic mt-5 text-center">
+					<p className="text-lg italic mt-5 mb-16 text-center">
 						Smart Choices, Swift Shopping!
 					</p>
-					<SignInButton className="btn-auth"></SignInButton>
+					<p className="text-xl text-center">
+						To get started,{' '}
+						<button
+							className="text-accent underline underline-offset-2 hover:font-medium hover:decoration-[3px]"
+							onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
+						>
+							sign in
+						</button>{' '}
+						and begin creating your own shopping lists.
+					</p>
 				</>
 			)}
 		</>