25. Make app more responsive for mobile compatibility

src/components/AddItem.jsx

@@ -64,7 +64,7 @@ export default function AddItem({ listPath, data }) {
 
 	return (
 		<form onSubmit={handleSubmit}>
-			<div className="flex xsm:justify-center sm:justify-normal items-end flex-wrap xsm:gap-2 sm:gap-4 w-full xsm: mb-6">
+			<div className="flex items-end flex-wrap xsm:justify-center sm:justify-normal xsm:gap-2 sm:gap-4 w-full xsm:mb-4">
 				<TextInput
 					label="Add item"
 					name="itemName"

src/components/AddList.jsx

@@ -5,6 +5,7 @@ import { useAuth } from '../api/useAuth.jsx';
 import Button from './Button.jsx';
 import TextInput from './TextInput.jsx';
 import { GoPlus } from 'react-icons/go';
+import capitalizeFirstLetterOfEachWord from '../utils/capitalize.js';
 
 export default function AddList({ setListPath }) {
 	const [listName, setListName] = useState('');
@@ -23,13 +24,17 @@ export default function AddList({ setListPath }) {
 			// if list is created newList will be true else newList will be false
 			if (newList) {
 				setListName('');
-				setMessage(`Your list, ${listName}, was successfully created.`);
+				setMessage(
+					`${capitalizeFirstLetterOfEachWord(listName)} was successfully created.`,
+				);
 				setListPath(listPath);
 				setTimeout(() => {
 					navigate('/list');
 				}, 2000);
 			} else {
-				setMessage(`Your list, ${listName} was not created. Please try again.`);
+				setMessage(
+					`${capitalizeFirstLetterOfEachWord(listName)} was not created. Please try again.`,
+				);
 			}
 		} catch (err) {
 			console.error(err);
@@ -52,7 +57,7 @@ export default function AddList({ setListPath }) {
 				/>
 				<Button
 					type="submit"
-					text="Add item"
+					text="Add list"
 					bgColor="bg-tcl-blue"
 					textColor="text-white"
 					icon={<GoPlus size={19} />}

src/components/NavigationBar.jsx

@@ -3,14 +3,14 @@ import { React, useState, useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
 import { NavigationBarSingleList } from '../components/NavigationBarSingleList.jsx';
+import AddList from '../components/AddList.jsx';
+import AppInfo from '../components/AppInfo.jsx';
 import PlusSign from '../assets/PlusSign.jsx';
-import NavigationBarModal from '../components/NavigationBarModal.jsx';
+import Modal from './Modal.jsx';
 import { IoMenu } from 'react-icons/io5';
 import { IoMdHelpCircle } from 'react-icons/io';
 import siteTitle from '../assets/titleLogo.png';
 import logo from '../assets/logo.png';
-import Modal from './Modal.jsx';
-import AppInfo from './AppInfo.jsx';
 
 export default function NavigationBar({ data, setListPath, setLoading }) {
 	const { user } = useAuth();
@@ -75,12 +75,12 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 							to="/"
 							className="flex xsm:justify-center sm:justify-center pt-4 rounded-md"
 						>
-							<div className="">
+							<div>
 								{screenSize > 480 ? (
 									<img
 										src={siteTitle}
 										alt="List Genius wide logo"
-										className="xsm:hidden sm:flex sm:h-[20px]"
+										className="xsm:hidden sm:flex sm:h-[18px]"
 									/>
 								) : (
 									<img
@@ -97,12 +97,12 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 						>
 							<IoMenu size={28} className="sm:hidden" />
 						</button>
-						<div className={`${sidebarWidth} h-[125px] xsm:pt-0 sm:pt-6`}>
+						<div className={`${sidebarWidth} h-[125px] xsm:pt-0 sm:pt-2`}>
 							{/* If a user clicks the "New list" button, then the "My Lists" header and the "New List" button disappear and the Create List form appears. */}
 							{!openFormModal ? (
 								<>
 									<hr
-										className={`h-px bg-[#D9D9D9] border mb-4 ${sidebarWidth} h-[125px] sm:hidden`}
+										className={`h-px bg-[#D9D9D9] border mb-4 ${sidebarWidth} h-[125px]`}
 									></hr>
 									<div
 										className={`w-full flex justify-between ${sidebarWidth} h-[34px] px-2 items-center`}
@@ -130,17 +130,15 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 
 							{/* The user's lists display when the user's uid matches the uid contained in the listPath of a shopping list.*/}
 							{openFormModal ? (
-								<NavigationBarModal
-									setListPath={setListPath}
-									isOpen={openFormModal}
-									onClose={closeModal}
-									className="max-w-fit w-[90px] h-[34px] rounded-lg pt-2 pr-3 pb-2 pl-3 border"
-									color="light"
-								/>
+								<Modal isOpen={openFormModal} onClose={closeModal}>
+									<div className="flex flex-col gap-4 p-4">
+										<AddList setListPath={setListPath} />
+									</div>
+								</Modal>
 							) : (
 								<div className={`flex-col ${sidebarWidth} `}>
 									<div
-										className={`flex min-h-12 xsm:h-[30vh] sm:h-[40vh] pb-4 ${sidebarWidth}`}
+										className={`flex min-h-12 xsm:h-[30vh] sm:h-[35vh] pt-2 pb-4 ${sidebarWidth}`}
 									>
 										{data.length > 0 ? (
 											data.find(
@@ -149,7 +147,7 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 													user?.uid,
 											) ? (
 												<ul
-													className={`${sidebarWidth} gap-6 text-sm font-family: Inter font-medium leading-4 text-left overflow-auto`}
+													className={`${sidebarWidth} gap-6 text-sm text-left overflow-auto`}
 												>
 													{' '}
 													{data.map((list) => (
@@ -171,14 +169,14 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 												</ul>
 											) : (
 												<p
-													className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium text-[#6B7280]`}
+													className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium font-family: 'Inter' text-[#6B7280]`}
 												>
 													No Lists
 												</p>
 											)
 										) : (
 											<p
-												className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium text-[#6B7280]`}
+												className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium font-family: 'Inter' text-[#6B7280]`}
 											>
 												No Lists
 											</p>
@@ -191,12 +189,12 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 									{/* Lists shared with the user by other users display when the signed-in user's uid does not match the listPath uid of a shopping list.*/}
 									<div className="flex flex-col min-h-12 overflow-auto">
 										<p
-											className={`${sidebarWidth} h-[14px] font-medium text-sm leading-[14px] text-[#6B7280] flex pl-2 pb-4`}
+											className={`${sidebarWidth} h-[14px] font-medium font-family: 'Inter' text-sm leading-[14px] text-[#6B7280] flex pl-2 pb-4`}
 										>
 											Shared With Me
 										</p>
 										<div
-											className={`flex min-h-12 h-[40vh] pb-4 ${sidebarWidth}`}
+											className={`flex min-h-12 xsm:h-[30vh] sm:h-[35vh] pt-2 pb-8 ${sidebarWidth}`}
 										>
 											{data.length > 0 ? (
 												data.find(
@@ -207,7 +205,7 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 														) !== user?.uid,
 												) ? (
 													<ul
-														className={`${sidebarWidth} gap-6 text-sm font-medium leading-4 text-left rounded-lg min-h-12 overflow-auto`}
+														className={`${sidebarWidth} gap-6 text-sm font-family: Inter font-medium leading-4 text-left rounded-lg min-h-12 overflow-auto`}
 													>
 														{' '}
 														{data.map((list) => (
@@ -229,14 +227,14 @@ export default function NavigationBar({ data, setListPath, setLoading }) {
 													</ul>
 												) : (
 													<p
-														className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium text-[#6B7280]`}
+														className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium font-family: 'Inter' text-[#6B7280]`}
 													>
 														No Lists
 													</p>
 												)
 											) : (
 												<p
-													className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium text-[#6B7280]`}
+													className={`pl-2 text-center place-self-center ${sidebarWidth} h-3.5 leading-[14px] text-sm font-medium font-family: 'Inter' text-[#6B7280]`}
 												>
 													No Lists
 												</p>

src/components/NavigationBarSingleList.jsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import BulletPointListName from '../assets/BulletPointListName';
+import capitalizeFirstLetterOfEachWord from '../utils/capitalize';
 
 export function NavigationBarSingleList({
 	name,
@@ -42,7 +43,7 @@ export function NavigationBarSingleList({
 					localStorageListName={localStorageListName}
 					name={name}
 				/>
-				<p>{name}</p>
+				<p>{capitalizeFirstLetterOfEachWord(name)}</p>
 			</Link>
 		</li>
 	);

src/components/SingleList.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../api/useAuth.jsx';
 import { deleteList, deleteSharedList } from '../api';
 import { VscTrash } from 'react-icons/vsc';
+import capitalizeFirstLetterOfEachWord from '../utils/capitalize.js';
 
 export function SingleList({ name, path, setListPath, setLoading }) {
 	const navigate = useNavigate();
@@ -20,7 +21,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 			if (!path.includes(user.uid)) {
 				if (
 					window.confirm(
-						`The ${name} list has been shared with you. Deleting it will remove it from your lists. You will loose access unless it's shared with you again. Are you sure you want to proceed with the deletion?`,
+						`The ${capitalizeFirstLetterOfEachWord(name)} list has been shared with you. Deleting it will remove it from your lists. You will loose access unless it's shared with you again. Are you sure you want to proceed with the deletion?`,
 					)
 				) {
 					await deleteSharedList(user.email, path.split('/')[0], name);
@@ -41,7 +42,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 		} catch (err) {
 			console.error(err.message);
 			alert(
-				`An error occurred while deleting your ${name} list: ${err.message}`,
+				`An error occurred while deleting your ${capitalizeFirstLetterOfEachWord(name)} list: ${err.message}`,
 			);
 		}
 	};
@@ -54,7 +55,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 				onClick={() => handleClick()}
 				className="flex items-center w-full h-full"
 			>
-				{name}
+				{capitalizeFirstLetterOfEachWord(name)}
 			</Link>
 			<button onClick={() => handleDelete()}>
 				<VscTrash size={20} className="text-gray-600" />

src/views/Layout.jsx

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 import NavigationBar from '../components/NavigationBar.jsx';
 
 export default function Layout({ data, setListPath, setLoading }) {
-	const mainContentMargin = 'xsm:mx-2 sm:ml-44 md:ml-48 lg:ml-64';
+	const mainContentMargin = 'xsm:mx-2 sm:ml-44 md:ml-48 lg:ml-56';
 
 	return (
 		<>

src/views/List.jsx

@@ -88,7 +88,7 @@ export default function List({ data, listPath, lists, loading }) {
 							</div>
 						</div>
 					) : null}
-					<span className="flex xsm:justify-between sm:justify-normal items-center xsm:gap-4 sm:gap-2 flex-wrap mb-6">
+					<span className="flex xsm:justify-between items-center xsm:gap-4 sm:gap-2 flex-wrap mb-6">
 						{/* AddItem component */}
 						<div className="justify-center flex sm:flex-col sm:items-start">
 							<AddItem listPath={listPath} data={data} />
@@ -158,12 +158,12 @@ export default function List({ data, listPath, lists, loading }) {
 			) : loading ? (
 				<Spinner />
 			) : data.length < 1 ? (
-				<>
-					<p className="py-2">
+				<div className="flex flex-col justify-center px-8">
+					<p className="pb-8 font-medium xsm:pt-16 sm:pt-8">
 						Please add an item to your {listName} list to get started
 					</p>
 					<AddItem listPath={listPath} data={data} />
-				</>
+				</div>
 			) : null}
 		</>
 	);