style buttons and forms

the-collab-lab · Oct 6, 2024 · d0eb255 · d0eb255
1 parent a6978c6
commit d0eb255
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 105 deletions.
diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
@@ -68,49 +68,61 @@ export function AddItem({ data, listPath }) {
 	};
 
 	return (
-		<>
-			<form onSubmit={handleNewItemSubmit} className="add-item-form">
+		<div className="flex flex-col items-center justify-center mx-auto">
+			<form onSubmit={handleNewItemSubmit} className="m-2 p-2 items-center">
 				{/* Item Name Section */}
 				<div className="flex items-center mb-4">
-					<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 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>
 
 				{/* Urgency Section */}
 				<div className="flex items-center mb-4">
-					<label htmlFor="nextPurchase" className="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 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>
 
-				<button type="submit">Add Item</button>
+				<button
+					type="submit"
+					className="p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg"
+				>
+					Add Item
+				</button>
 
 				<p>{messageItem}</p>
 			</form>
-		</>
+		</div>
 	);
 }
diff --git a/src/components/AddList.jsx b/src/components/AddList.jsx
@@ -25,17 +25,23 @@ export function AddList({ setListPath, userId, userEmail }) {
 
 	return (
 		<>
-			<form onSubmit={handleCreateListButton}>
-				<label htmlFor="listName">List Name:</label>
+			<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="button">
+				<button
+					type="submit"
+					className="m-4 p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg"
+				>
 					Create list
 				</button>
 			</form>

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
-import { FaTrashCan } from 'react-icons/fa6';
-import { FaCartShopping } from 'react-icons/fa6';
+import { FaTrashCan, FaCartShopping } from 'react-icons/fa6';
 
 export function ListItem({
 	name,
@@ -43,7 +42,7 @@ export function ListItem({
 	};
 
 	return (
-		<div className="list-item flex items-center justify-between p-3">
+		<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">
 					<input
@@ -60,7 +59,7 @@ export function ListItem({
 				</label>
 				<div className="flex items-center space-x-2">
 					<span
-						className={`px-2 py-1 border text-sm font-medium ${categoryColor[category]}`}
+						className={`px-2 py-1 border text-sm font-medium uppercase ${categoryColor[category]}`}
 						style={{ color: categoryColor[category] }}
 					>
 						{category}

diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
@@ -1,6 +1,7 @@
-import './SingleList.css';
+// import './SingleList.css';
 import { useNavigate } from 'react-router-dom';
 import { deleteList } from '../api';
+import { FaTrashCan } from 'react-icons/fa6';
 
 export function SingleList({ name, path, setListPath, userId, userEmail }) {
 	const navigate = useNavigate();
@@ -24,10 +25,15 @@ export function SingleList({ name, path, setListPath, userId, userEmail }) {
 	};
 
 	return (
-		<li className="SingleList">
+		<li className="flex flex-row items-baseline text-lg m-4 p-2 border-2 rounded-xl border-yellow-300 hover:shadow-lg">
 			<button onClick={handleClick}>{name}</button>
 			{isUsersList && (
-				<button onClick={() => handleDelete(path, userEmail)}>X</button>
+				<button
+					className="flex place-self-center pl-2"
+					onClick={() => handleDelete(path, userEmail)}
+				>
+					<FaTrashCan className="" />
+				</button>
 			)}
 		</li>
 	);

diff --git a/src/components/SingleListOld.css b/src/components/SingleListOld.css
@@ -0,0 +1,10 @@
+.SingleList {
+	align-items: baseline;
+	display: flex;
+	flex-direction: row;
+	font-size: 1.2em;
+}
+
+.SingleList-label {
+	margin-left: 0.2em;
+}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -8,45 +8,52 @@ export function Home({ data, setListPath, userId, userEmail }) {
 
 	return (
 		<div className="Home">
-			{!!user ? (
-				<>
-					<p>Welcome back {auth.currentUser.displayName.split(' ')[0]}!</p>
-					{data.length === 0 && (
-						<p>
-							{' '}
-							You don&apos;t have any shopping lists yet. Start by creating your
-							first one!
+			<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]}!
 						</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>
-						Welcome to the Shopping List app. Some catchy phrase / intro
-						message. Picture below?
-					</p>
-					<SignInButton></SignInButton>
-				</>
-			)}
+						{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>
 	);
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -46,7 +46,7 @@ export function Layout() {
 						{user && (
 							<NavLink to="/manage-list" className="Nav-link">
 								<FaShareAlt />
-								<span className="hidden md:inline">Manage List</span>
+								<span className="hidden md:inline">Settings</span>
 							</NavLink>
 						)}
 						<NavLink to="/about" className="Nav-link">

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { ListItem, AddItem } from '../components';
+import { FiDelete } from 'react-icons/fi';
 import {
 	comparePurchaseUrgency,
 	updateItem,
@@ -9,6 +10,7 @@ import {
 
 export function List({ data, listPath, lists }) {
 	const [searchItem, setSearchItem] = useState('');
+	// eslint-disable-next-line no-unused-vars
 	const [items, setItems] = useState([]);
 
 	const listTitle = listPath ? listPath.split('/')[1] : null;
@@ -66,8 +68,8 @@ export function List({ data, listPath, lists }) {
 	};
 
 	return (
-		<>
-			<h2>{fixedListTitle}</h2>
+		<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>
 			{!listPath && lists.length > 0 && data.length > 0 && (
 				<p>
 					Oops! No list selected yet. Head to the <Link to="/">home page</Link>{' '}
@@ -99,20 +101,29 @@ export function List({ data, listPath, lists }) {
 
 					<form onSubmit={handleSearch}>
 						<div>
-							<label htmlFor="search-item-in-list"> Search items:</label>
-							<input
-								onChange={handleSearch}
-								type="text"
-								id="search-item-in-list"
-								value={searchItem}
-								placeholder="Search an item..."
-								aria-label="Search for items"
-							/>
-							{searchItem && (
-								<button type="button" onClick={clearSearch}>
-									x
-								</button>
-							)}
+							<span className="flex flex-col m-2 p-2 justify-evenly">
+								<label
+									htmlFor="search-item-in-list"
+									className="text-center m-4"
+								>
+									{' '}
+									Search items:
+								</label>
+								<input
+									className="border"
+									onChange={handleSearch}
+									type="text"
+									id="search-item-in-list"
+									value={searchItem}
+									placeholder="Search an item..."
+									aria-label="Search for items"
+								/>
+								{searchItem && (
+									<button type="button" onClick={clearSearch}>
+										<FiDelete />
+									</button>
+								)}
+							</span>
 						</div>
 					</form>
 
@@ -152,6 +163,6 @@ export function List({ data, listPath, lists }) {
 					)}
 				</>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -24,11 +24,16 @@ export function ManageList({ listPath, userId }) {
 	};
 
 	return (
-		<>
-			<h2>Invite a user to share your list with you</h2>
-			<form onSubmit={handleAddUserSubmit}>
-				<label htmlFor="email">User email</label>
+		<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"
@@ -38,8 +43,10 @@ export function ManageList({ listPath, userId }) {
 					required
 				/>
 
-				<button>Invite</button>
+				<button className="text-lg m-3 p-2 border-2 rounded-full border-yellow-300 hover:shadow-lg">
+					Invite
+				</button>
 			</form>
-		</>
+		</div>
 	);
 }