Issue #22: UI Enhancements and TailwindCSS Styling Adjustments

src/App.jsx

@@ -5,6 +5,7 @@ import { Loading } from './components/Loading';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
+import { ThemeProvider } from './context/ThemeContext';
 
 export function App() {
 	/**
@@ -41,42 +42,44 @@ export function App() {
 	const data = useShoppingListData(listPath);
 
 	return (
-		<Router>
-			<Routes>
-				<Route path="/" element={<Layout />}>
-					<Route
-						index
-						element={
-							<ProtectedRoute>
-								<Home
-									data={data}
-									lists={lists}
-									listPath={listPath}
-									setListPath={setListPath}
-									user={user}
-								/>
-							</ProtectedRoute>
-						}
-					/>
-					<Route
-						path="add-item"
-						element={
-							<ProtectedRoute>
-								<AddItem listPath={listPath} user={user} data={data} />
-							</ProtectedRoute>
-						}
-					/>
-					<Route
-						path="developers"
-						element={
-							<Suspense fallback={<Loading />}>
-								<Team />
-							</Suspense>
-						}
-					/>
-				</Route>
-			</Routes>
-		</Router>
+		<ThemeProvider>
+			<Router>
+				<Routes>
+					<Route path="/" element={<Layout />}>
+						<Route
+							index
+							element={
+								<ProtectedRoute>
+									<Home
+										data={data}
+										lists={lists}
+										selectedListPath={listPath}
+										setListPath={setListPath}
+										user={user}
+									/>
+								</ProtectedRoute>
+							}
+						/>
+						<Route
+							path="add-item"
+							element={
+								<ProtectedRoute>
+									<AddItem listPath={listPath} user={user} data={data} />
+								</ProtectedRoute>
+							}
+						/>
+						<Route
+							path="developers"
+							element={
+								<Suspense fallback={<Loading />}>
+									<Team />
+								</Suspense>
+							}
+						/>
+					</Route>
+				</Routes>
+			</Router>
+		</ThemeProvider>
 	);
 }
 

src/components/IconButton.jsx

@@ -1,4 +1,4 @@
-import '../views/Layout.css';
+// import '../views/Layout.css';
 
 export function IconButton({
 	as: Component = 'button',
@@ -10,10 +10,10 @@ export function IconButton({
 			{...props}
 			className={`flex items-center justify-center px-4 py-4 rounded-md shadow-md transition duration-200 ease-in-out 
 			${props.className} 
-			${props.disabled ? 'bg-[#184E77] text-black cursor-not-allowed' : 'bg-[#184E77] text-white hover:bg-[#1E6091]'}`}
+			${props.disabled ? 'bg-btnPrimary text-black cursor-not-allowed' : 'bg-btnPrimary text-white hover:bg-[#1E6091]'}`}
 			disabled={props.disabled}
 		>
-			{IconComponent && <IconComponent className="mr-4 text-2xl" />}
+			{IconComponent && <IconComponent className={`mr-2 ml-2 text-2xl  `} />}
 			{props.label && <span className="text-2xl">{props.label}</span>}
 		</Component>
 	);

src/components/ListItem.jsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useToggle } from '@uidotdev/usehooks';
 import { Toggle } from './Toggle.jsx';
 import { notify } from '../utils/notifications';
-import './ListItem.css';
 import { updateItem, deleteItem } from '../api/firebase.js';
 import { FaTrashAlt } from 'react-icons/fa';
 import { IconButton } from './IconButton.jsx';
@@ -20,6 +19,17 @@ export function ListItem({
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
 
+	// const formatDateLastPurchased = (dateLastPurchased) => {
+	// 	if (dateLastPurchased) {
+	// 		const date = dateLastPurchased.toDate();
+	// 		const year = date.getFullYear();
+	// 		const month = date.getMonth() + 1;
+	// 		const day = date.getDate();
+	// 		return `${month}/${day}/${year}`;
+	// 	}
+	// 	return 'n/a';
+	// };
+
 	useEffect(() => {
 		if (dateLastPurchased) {
 			const checkExpiration = () => {
@@ -79,29 +89,63 @@ export function ListItem({
 		}
 	};
 
-	const urgencyClass = sortCriteria.tag.toLowerCase().replace(/\s/g, '');
+	const urgencyMap = {
+		'Due soon': {
+			light: 'text-duesoon',
+			dark: 'dark:text-duesoondark',
+		},
+		'Due kind of soon': {
+			light: 'text-duekindofsoon',
+			dark: 'dark:text-duekindofsoondark',
+		},
+		'Not due soon': {
+			light: 'text-notduesoon',
+			dark: 'dark:text-notduesoondark',
+		},
+		Overdue: {
+			light: 'text-overdue',
+			dark: 'dark:text-overduedark',
+		},
+		'No longer active': {
+			light: 'text-nolongeractive',
+			dark: 'dark:text-nolongeractivedark',
+		},
+	};
+
+	const mode = localStorage.getItem('theme');
 
 	return (
 		<>
-			<div className="ListItem">
-				<Toggle
-					toggle={handleToggle}
-					on={purchased}
-					name={name}
-					isDisabled={isDisabled}
-					dateLastPurchased={dateLastPurchased}
-				/>
-				{name}
-
-				<div className={urgencyClass}>{sortCriteria.tag}</div>
+			<div className=" w-full relative flex  text-2xl items-center p-[10px] mb-[10px] rounded-lg transition-colors duration-300 min-w-0 ">
+				<div className="w-[30px]">
+					<Toggle
+						toggle={handleToggle}
+						on={purchased}
+						name={name}
+						isDisabled={isDisabled}
+						dateLastPurchased={dateLastPurchased}
+					/>
+				</div>
+				<div className="flex items-center justify-between w-full">
+					<div className=" grow mr-3">
+						<div className="break-all font-semibold">{name}</div>
+					</div>
 
-				<IconButton
-					aria-label={`Delete ${name}`}
-					as="button"
-					className="p-1"
-					IconComponent={FaTrashAlt}
-					onClick={handleDelete}
-				/>
+					<div className="flex items-center gap-4">
+						<div
+							className={`${urgencyMap[sortCriteria.tag][mode]} text-2xl inline-flex items-center rounded-md p-2 text-2xl font-semibold ring-1 ring-inset mr-6`}
+						>
+							{sortCriteria.tag}{' '}
+						</div>
+						<IconButton
+							aria-label={`Delete ${name}`}
+							as="button"
+							className="p-1  hover:scale-105 hover:shadow-md hover:shadow-black/20 transition-transform "
+							IconComponent={FaTrashAlt}
+							onClick={handleDelete}
+						/>
+					</div>
+				</div>
 			</div>
 		</>
 	);

src/components/ModalDialog.jsx

@@ -24,12 +24,12 @@ export default function ModalDialog({ isOpen, onClose, children, title }) {
 								<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
 									<DialogTitle
 										as="h3"
-										className="text-2xl font-bold leading-6 text-gray-900"
+										className="text-3xl m-1 py-1 font-bold leading-6 text-txtPrimary"
 									>
 										{title}
 									</DialogTitle>
 									<div className="mt-2">
-										<p className="text-lg text-gray-500">{children}</p>
+										<p className="text-xl text-gray-500">{children}</p>
 									</div>
 								</div>
 							</div>

src/components/Toggle.jsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import './Toggle.css';
 
 export function Toggle({ on, toggle, name, isDisabled }) {
 	const [message, setMessage] = useState('');
@@ -23,20 +22,20 @@ export function Toggle({ on, toggle, name, isDisabled }) {
 		}
 	};
 	return (
-		<div className="Toggle">
-			<label className="Toggle-label" htmlFor={name}>
+		<div className="flex items-center mr-2">
+			<label className="text-base" htmlFor={name}>
 				<input
 					type="checkbox"
 					id={name}
 					checked={on}
 					onChange={handleToggle}
 					onClick={handleClick}
-					className="Toggle-checkbox"
+					className="mr-2 cursor-pointer"
 					disabled={isDisabled}
 					aria-label={`Toggle purchase status for ${name}`}
 				/>
 			</label>
-			{message && <p className="Toggle-message">{message}</p>}
+			{message && <p className="ml-2">{message}</p>}
 		</div>
 	);
 }

src/components/index.js

@@ -1,2 +1 @@
 export * from './ListItem';
-export * from './SingleList';

src/context/ThemeContext.jsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, useState } from 'react';
+
+export const ThemeContext = createContext(null);
+
+export const useTheme = () => {
+	const context = useContext(ThemeContext);
+	return context;
+};
+
+export const ThemeProvider = ({ children }) => {
+	const initialTheme = localStorage.getItem('theme');
+	const [theme, setTheme] = useState(initialTheme || 'light');
+
+	return (
+		<ThemeContext.Provider value={{ theme, setTheme }}>
+			{children}
+		</ThemeContext.Provider>
+	);
+};
+
+//To do : Move Theme toggle logic from Layout jsx to here