From d1552c2cbeefcc771d7ccb7413fb90b1d67b4280 Mon Sep 17 00:00:00 2001
From: andiedoescode <pang.andrea@gmail.com>
Date: Tue, 9 Apr 2024 12:45:53 -0400
Subject: [PATCH] Conditional styling for List and ManageList when logged out,
 padding adjustment to ListHeader component

---
 src/components/ListHeader.jsx |   2 +-
 src/views/List.jsx            | 117 +++++++++++++++++++---------------
 src/views/ManageList.jsx      | 106 ++++++++++++++++--------------
 3 files changed, 124 insertions(+), 101 deletions(-)

diff --git a/src/components/ListHeader.jsx b/src/components/ListHeader.jsx
index 427149c..87dd7af 100644
--- a/src/components/ListHeader.jsx
+++ b/src/components/ListHeader.jsx
@@ -1,6 +1,6 @@
 export function ListHeader({ text }) {
 	return (
-		<h2 className="mt-4 flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12 text-off-black">
+		<h2 className="mt-4 flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12 text-off-black px-4">
 			{text}
 		</h2>
 	);
diff --git a/src/views/List.jsx b/src/views/List.jsx
index c047f6d..0c59643 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { comparePurchaseUrgency } from '../api/firebase';
 import { AddItem, ListItem } from '../components';
 import { ListHeader } from '../components/ListHeader.jsx';
+import { auth } from '../api/config.js';
 
 export function List({ data, listPath }) {
 	const [searchTerm, setSearchTerm] = useState('');
@@ -32,64 +33,74 @@ export function List({ data, listPath }) {
 
 	return (
 		<>
-			{listPath ? <ListHeader text={listName} /> : null}
-			{!listPath ? (
+			{!auth.currentUser ? (
+				<div className="border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black text-center tiny:mt-18 xs:mt-32 sm:mt-40 items-center justify-center bg-sage/75 rounded-2xl font-medium">
+					Sign in to see your lists.
+				</div>
+			) : (
 				<>
-					<ListHeader text="You haven't selected a list yet. Click below to select a list." />
-					<div className="flex justify-center">
-						<button
-							onClick={() => handleClick('/')}
-							className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
-						>
-							Select a list
-						</button>
-					</div>
-				</>
-			) : null}
-
-			<section className="mx-8 md:mx-24 flex flex-col">
-				{listPath ? <AddItem data={data} listPath={listPath} /> : null}
-				{data.length > 0 ? (
-					<section className="mt-8 mb-4">
-						<form className="flex flex-wrap items-center gap-x-6">
-							<label htmlFor="itemFilter" className="text-off-black">
-								Filter:
-							</label>
-							<input
-								type="text"
-								id="itemFilter"
-								name="itemFilter"
-								value={searchTerm}
-								onChange={handleChange}
-								className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 grow max-w-full mt-2 text-xl xs:text-2xl text-off-black"
-							/>
-							{searchTerm ? (
+					{listPath ? <ListHeader text={listName} /> : null}
+					{!listPath ? (
+						<>
+							<ListHeader text="You haven't selected a list yet. Click below to select a list." />
+							<div className="flex justify-center">
 								<button
-									onClick={reset}
-									className="bg-red-400 rounded-xl px-3 py-1 grow min-h-14 xs:max-w-28 mt-2 text-off-black"
+									onClick={() => handleClick('/')}
+									className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
 								>
-									Reset
+									Select a list
 								</button>
-							) : null}
-						</form>
-					</section>
-				) : null}
-				{listPath && data.length === 0 ? (
-					<div className="bg-pale-green border border-dark-green rounded-xl py-8 mt-8">
-						<h3 className="text-center font-semibold text-off-black">
-							This list is currently empty!
-						</h3>
-					</div>
-				) : null}
+							</div>
+						</>
+					) : null}
 
-				<section>
-					<ul>
-						{filteredData.map((item) => {
-							return <ListItem key={item.id} item={item} listPath={listPath} />;
-						})}
-					</ul>
-				</section>
-			</section>
+					<section className="mx-8 md:mx-24 flex flex-col">
+						{listPath ? <AddItem data={data} listPath={listPath} /> : null}
+						{data.length > 0 ? (
+							<section className="mt-8 mb-4">
+								<form className="flex flex-wrap items-center gap-x-6">
+									<label htmlFor="itemFilter" className="text-off-black">
+										Filter:
+									</label>
+									<input
+										type="text"
+										id="itemFilter"
+										name="itemFilter"
+										value={searchTerm}
+										onChange={handleChange}
+										className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 grow max-w-full mt-2 text-xl xs:text-2xl text-off-black"
+									/>
+									{searchTerm ? (
+										<button
+											onClick={reset}
+											className="bg-red-400 rounded-xl px-3 py-1 grow min-h-14 xs:max-w-28 mt-2 text-off-black"
+										>
+											Reset
+										</button>
+									) : null}
+								</form>
+							</section>
+						) : null}
+						{listPath && data.length === 0 ? (
+							<div className="bg-pale-green border border-dark-green rounded-xl py-8 mt-8">
+								<h3 className="text-center font-semibold text-off-black">
+									This list is currently empty!
+								</h3>
+							</div>
+						) : null}
+
+						<section>
+							<ul>
+								{filteredData.map((item) => {
+									return (
+										<ListItem key={item.id} item={item} listPath={listPath} />
+									);
+								})}
+							</ul>
+						</section>
+					</section>
+				</>
+			)}
 		</>
 	);
 }
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index e7cf762..f30732b 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { deleteList, shareList } from '../api/firebase.js';
 import { ListHeader } from '../components/ListHeader.jsx';
+import { auth } from '../api/config.js';
 
 export function ManageList({ setListPath, listPath, userEmail, userId }) {
 	const navigate = useNavigate();
@@ -59,59 +60,70 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
 
 	return (
 		<>
-			{listPath ? (
+			{!auth.currentUser ? (
+				<div className="border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black text-center tiny:mt-18 xs:mt-32 sm:mt-40 items-center justify-center bg-sage/75 rounded-2xl font-medium">
+					Sign in to manage lists.
+				</div>
+			) : (
 				<>
-					<ListHeader text={listName} />
-					<section className="mx-8 md:mx-24">
-						<form onSubmit={handleShareSubmit} className="w-full">
-							<div>
-								<label htmlFor="shareEmail" className="text-4xl text-off-black">
-									Share List
-								</label>
-							</div>
-							<div className="flex flex-wrap xs:flex-nowrap gap-x-6">
-								<input
-									id="shareEmail"
-									name="shareEmail"
-									type="email"
-									value={shareEmail}
-									placeholder="Enter Recipient Email"
-									onChange={handleShareChange}
-									className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 md:w-8/12 grow mt-4 text-xl xs:text-2xl text-off-black"
-								></input>
+					{listPath ? (
+						<>
+							<ListHeader text={listName} />
+							<section className="mx-8 md:mx-24">
+								<form onSubmit={handleShareSubmit} className="w-full">
+									<div>
+										<label
+											htmlFor="shareEmail"
+											className="text-4xl text-off-black"
+										>
+											Share List
+										</label>
+									</div>
+									<div className="flex flex-wrap xs:flex-nowrap gap-x-6">
+										<input
+											id="shareEmail"
+											name="shareEmail"
+											type="email"
+											value={shareEmail}
+											placeholder="Enter Recipient Email"
+											onChange={handleShareChange}
+											className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 md:w-8/12 grow mt-4 text-xl xs:text-2xl text-off-black"
+										></input>
+										<button
+											type="submit"
+											className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 grow xs:grow-0 text-off-black"
+										>
+											Send invite!
+										</button>
+									</div>
+								</form>
+							</section>
+							<section className="mx-8 md:mx-24 mt-24">
+								<h3 className="text-4xl text-off-black">List Options</h3>
+								<button
+									onClick={handleDelete}
+									className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full text-off-black"
+								>
+									Delete List
+								</button>
+							</section>
+						</>
+					) : null}
+					{!listPath ? (
+						<>
+							<ListHeader text="You haven't selected a list yet. Click below to select a list." />
+							<div className="flex justify-center">
 								<button
-									type="submit"
-									className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 grow xs:grow-0 text-off-black"
+									onClick={() => handleClick('/')}
+									className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
 								>
-									Send invite!
+									Select a list
 								</button>
 							</div>
-						</form>
-					</section>
-					<section className="mx-8 md:mx-24 mt-24">
-						<h3 className="text-4xl text-off-black">List Options</h3>
-						<button
-							onClick={handleDelete}
-							className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full text-off-black"
-						>
-							Delete List
-						</button>
-					</section>
-				</>
-			) : null}
-			{!listPath ? (
-				<>
-					<ListHeader text="You haven't selected a list yet. Click below to select a list." />
-					<div className="flex justify-center">
-						<button
-							onClick={() => handleClick('/')}
-							className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
-						>
-							Select a list
-						</button>
-					</div>
+						</>
+					) : null}
 				</>
-			) : null}
+			)}
 		</>
 	);
 }