Accessibility updates

src/api/useAuth.jsx

@@ -8,11 +8,11 @@ import { addUserToDatabase } from './firebase.js';
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = () => (
+export const SignInButton = ({ styles }) => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-		className="m-0 bg-accent"
+		className={`m-0 bg-accent text-black font-bold hover:text-white ${styles}`}
 	>
 		Sign In
 	</button>
@@ -25,7 +25,7 @@ export const SignOutButton = () => (
 	<button
 		type="button"
 		onClick={() => auth.signOut() && window.location.reload()}
-		className="m-0 bg-accent"
+		className="m-0 bg-accent text-black hover:text-white"
 	>
 		Sign Out
 	</button>

src/components/ListItem.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -54,49 +54,56 @@ export function ListItem({ item }) {
 	};
 
 	return (
-		<li className="ListItem space-x-3">
-			<input
-				type="checkbox"
-				checked={checked}
-				onChange={handleChange}
-				disabled={checked}
-				className="checkbox checkbox-primary"
-			/>
-			<h4 style={{ fontSize: '20px' }}>{name}</h4>
+		<li
+			className="ListItem space-x-3 flex items-center p-4 px-8 rounded-3xl shadow-md border border-primary space-x-10 justify-between"
+			style={{ background: '#f8fdef' }}
+		>
+			<div className="flex items-center justify-between space-x-4">
+				<input
+					type="checkbox"
+					checked={checked}
+					onChange={handleChange}
+					disabled={checked}
+					className="checkbox checkbox-primary"
+				/>
+				<h4 style={{ fontSize: '20px' }}>{name}</h4>
+			</div>
 
-			<button onClick={handleDelete} aria-label="Delete this Item">
-				<DeleteIcon />
-			</button>
-			<div className="dropdown">
-				<button
-					onClick={() => setIsActive(!isActive)}
-					className="focus:bg-secondary"
-					aria-label="Get purchase details of this item"
-				>
-					<ExpandMoreIcon />
-				</button>
-				<div className="dropdown-content bg-base-200 rounded-box z-[1] w-60 p-4 shadow">
-					<ul style={{ fontSize: '15px' }}>
-						<li>
-							<h4 className="font-bold">Last Purchase:</h4>
-							<span>
-								{' '}
-								{dateLastPurchased
-									? dateLastPurchased.toDate().toDateString()
-									: 'N/A'}
-							</span>
-						</li>
-						<li>
-							<h4 className="font-bold">Next Purchase:</h4>
+			<div className="flex space-x-6">
+				<div className="dropdown">
+					<button
+						onClick={() => setIsActive(!isActive)}
+						className="focus:bg-secondary"
+						aria-label="Get purchase details of this item"
+					>
+						<ExpandMoreIcon />
+					</button>
+					<div className="dropdown-content bg-base-300 rounded-box z-[1] w-60 p-4 shadow">
+						<ul style={{ fontSize: '15px' }}>
+							<li>
+								<h4 className="font-bold">Last Purchase:</h4>
+								<span>
+									{' '}
+									{dateLastPurchased
+										? dateLastPurchased.toDate().toDateString()
+										: 'N/A'}
+								</span>
+							</li>
+							<li>
+								<h4 className="font-bold">Next Purchase:</h4>
 
-							<span> {dateNextPurchased?.toDate().toDateString()}</span>
-						</li>
-						<li>
-							<h4 className="font-bold">Total Purchases: </h4>
-							<span>{totalPurchases}</span>
-						</li>
-					</ul>
+								<span> {dateNextPurchased?.toDate().toDateString()}</span>
+							</li>
+							<li>
+								<h4 className="font-bold">Total Purchases: </h4>
+								<span>{totalPurchases}</span>
+							</li>
+						</ul>
+					</div>
 				</div>
+				<button onClick={handleDelete} aria-label="Delete this Item">
+					<DeleteIcon />
+				</button>
 			</div>
 		</li>
 	);

src/components/ShareListComponent.jsx

@@ -12,7 +12,7 @@ export function ShareListComponent({ path, setListPath }) {
 
 	return (
 		<>
-			<button>
+			<button aria-label="Share this item">
 				<ShareIcon onClick={handleClick} />
 			</button>
 		</>

src/components/SingleList.jsx

@@ -11,7 +11,13 @@ export function SingleList({ name, path, setListPath }) {
 
 	return (
 		<li className="SingleList">
-			<button onClick={handleClick}>{name}</button>
+			<button
+				onClick={handleClick}
+				className="font-bold text-white"
+				style={{ background: '#676D16' }}
+			>
+				{name}
+			</button>
 		</li>
 	);
 }

src/index.css

@@ -29,15 +29,15 @@
 	}
 	button {
 		@apply btn 
-		text-2xl font-sans font-normal btn-secondary m-2;
+		text-2xl font-sans font-bold btn-secondary m-2 text-white;
 	}
 	/*temporary for the 'Hello from the [/list] Page' titles */
 	p {
 		@apply font-archivo text-4xl;
 	}
 	input[type='text'],
 	select {
-		@apply input input-bordered mx-3;
+		@apply input input-bordered mx-3 text-2xl;
 	}
 	/* header {
 		@apply navbar drop-shadow-lg

src/views/Home.jsx

@@ -1,6 +1,12 @@
 import './Home.css';
 import { SingleList, ShareListComponent } from '../components';
-import { createList, useAuth, deleteList, unfollowList } from '../api';
+import {
+	createList,
+	useAuth,
+	deleteList,
+	unfollowList,
+	SignInButton,
+} from '../api';
 import { Fragment, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useVoiceToText } from '../utils';
@@ -76,69 +82,94 @@ export function Home({ data, setListPath, setAllLists }) {
 			console.log(error);
 		}
 	};
-
 	return (
-		<div className="flex flex-col h-[80vh]  my-8 p-8 bg-white rounded-3xl shadow-xl overflow-hidden mx-auto">
-			<ul className="font-archivo flex-grow overflow-y-auto space-y-4">
-				{data &&
-					data.map((list) => {
-						const uniqueId = crypto.randomUUID();
-						return (
-							<Fragment key={uniqueId}>
-								<div className="flex items-center justify-between p-4 rounded-3xl shadow-md border">
-									<SingleList
-										name={list.name}
-										setListPath={setListPath}
-										path={list.path}
-									/>
-									<div className="flex items-center space-x-4">
-										{!list.isShared && (
-											<button
-												onClick={() => handleDelete(list)}
-												className="p-2"
-											>
-												<DeleteIcon />
-											</button>
-										)}
+		<>
+			{data.length ? (
+				<div className="flex flex-col h-[80vh]  my-8 p-8 rounded-3xl shadow-xl overflow-hidden mx-auto  bg-neutral">
+					<ul className="font-archivo flex-grow overflow-y-auto space-y-4 ">
+						{data &&
+							data.map((list) => {
+								const uniqueId = crypto.randomUUID();
+								return (
+									<Fragment key={uniqueId}>
+										<div
+											className="flex items-center justify-between p-4 rounded-3xl shadow-md border border-primary"
+											style={{ background: '#f8fdef' }}
+										>
+											<SingleList
+												name={list.name}
+												setListPath={setListPath}
+												path={list.path}
+											/>
+											<div className="flex items-center space-x-4">
+												{!list.isShared && (
+													<button
+														onClick={() => handleDelete(list)}
+														aria-label="Delete this shopping list"
+													>
+														<DeleteIcon />
+													</button>
+												)}
+
+												{/* Remove button for shared lists */}
+												{list.isShared && (
+													<button
+														onClick={() => handleUnfollowSharedList(list)}
+														aria-label="Remove this shared list"
+													>
+														<RemoveCircleIcon />
+													</button>
+												)}
+												<ShareListComponent
+													name={list.name}
+													setListPath={setListPath}
+													path={list.path}
+												/>
+											</div>
+										</div>
+									</Fragment>
+								);
+							})}
+					</ul>
+					<form
+						onSubmit={handleSubmit}
+						className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4 justify-center"
+					>
+						<label htmlFor="listName" className="text-white font-medium	">
+							Create a new list:
+						</label>
+						<div className="flex flex-col">
+							<input
+								type="text"
+								id="listName"
+								value={listName}
+								onChange={(e) => setListName(e.target.value)}
+							/>
+							<span className="text-error">{error}</span>
+						</div>
 
-										{/* Remove button for shared lists */}
-										{list.isShared && (
-											<button
-												onClick={() => handleUnfollowSharedList(list)}
-												className="p-2"
-											>
-												<RemoveCircleIcon />
-											</button>
-										)}
-										<ShareListComponent
-											name={list.name}
-											setListPath={setListPath}
-											path={list.path}
-										/>
-									</div>
-								</div>
-							</Fragment>
-						);
-					})}
-			</ul>
-			<form
-				action=""
-				onSubmit={handleSubmit}
-				className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4"
-			>
-				<label htmlFor="listName">Create a new list:</label>
-				<input
-					type="text"
-					id="listName"
-					value={listName}
-					onChange={(e) => setListName(e.target.value)}
-				/>
-				<button type="button" onClick={startListening}>
-					{isListening ? 'Listening...' : <KeyboardVoiceIcon />}
-				</button>
-				<button>Submit</button>
-				<p>{error}</p>
-			</form>
-		</div>
+						<button
+							type="button"
+							onClick={startListening}
+							aria-label="Use microphone to add a new list"
+							className="bg-accent text-black hover:text-white"
+						>
+							{isListening ? 'Listening...' : <KeyboardVoiceIcon />}
+						</button>
+						<button className="bg-accent text-black hover:text-white">
+							Submit
+						</button>
+					</form>
+				</div>
+			) : (
+				<div className="flex flex-col h-[80vh]  my-8 p-8 rounded-3xl overflow-hidden mx-auto place-content-center items-center ">
+					<h1 className="text-center my-8 text-neutral text-6xl">
+						{' '}
+						Welcome to SnapShop!
+					</h1>
+					<SignInButton styles={'bg-neutral text-white btn-lg text-2xl'} />
+				</div>
+			)}
+		</>
 	);
 }

src/views/Layout.jsx

@@ -6,7 +6,7 @@ import { useAuth, SignInButton, SignOutButton } from '../api';
 const handleActive = ({ isActive }) => {
 	return {
 		fontWeight: isActive ? '900' : '',
-		color: isActive ? '#E8C900' : 'rgb(247 253 235 / 68%)',
+		color: isActive ? 'rgb(237 208 0)' : 'white',
 	};
 };
 
@@ -28,7 +28,7 @@ export function Layout() {
 						</div>
 
 						{/* Navbar on Desktop */}
-						<div className="space-x-8 navbar-end hidden sm:block">
+						<div className="space-x-8 hidden sm:block">
 							<NavLink to="/" style={handleActive}>
 								Home
 							</NavLink>
@@ -79,3 +79,4 @@ export function Layout() {
 		</>
 	);
 }
+// style={{background:'#969877'}}