Relocate Share List func to modal + navigation to lists from Home + styled Home components

index.html

@@ -14,10 +14,15 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
-			href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
+			rel="stylesheet"
+		/>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Monda:[email protected]&family=Montserrat:wght@700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
 			rel="stylesheet"
 		/>
-		<link rel="icon" type="image/svg+xml" href="/src/favicon-cart.png" />
 		<meta name="color-scheme" content="dark light" />
 		<title>GrocerEase</title>
 		<script type="module" src="/src/index.jsx" async></script>

src/App.jsx

@@ -1,16 +1,14 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-
-import { Home, Layout, List, ManageList } from './views';
-
+import { Home, Layout, List } from './views';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
-
 import { useStateWithStorage } from './utils';
-
+import { useState } from 'react';
 import ProtectedRoutes from './utils/ProtectedRoutes';
-
 import Login from './views/Login';
 
+
 export function App() {
+	const [isModalOpen, setIsModalOpen] = useState(false);
 	/**
 	 * This custom hook takes the path of a shopping list
 	 * in our database and syncs it with localStorage for later use.
@@ -46,6 +44,11 @@ export function App() {
 	 */
 	const data = useShoppingListData(listPath);
 
+	const handleShareModalClick = () => {
+		console.log('isModalOpen', isModalOpen);
+		setIsModalOpen(!isModalOpen);
+	};
+
 	return (
 		<Router>
 			<Routes>
@@ -54,7 +57,14 @@ export function App() {
 						<Route
 							index
 							element={
-								<Home user={user} data={lists} setListPath={setListPath} />
+								<Home
+								user={user}
+								data={lists}
+								listPath={listPath}
+								setListPath={setListPath}
+								isModalOpen={isModalOpen}
+								handleShareModalClick={handleShareModalClick}
+							/>
 							}
 						/>
 						<Route

src/api/firebase.js

@@ -7,7 +7,6 @@ import {
 	onSnapshot,
 	updateDoc,
 	addDoc,
-	Timestamp,
 	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';

src/components/CreateShoppingList.jsx

@@ -23,16 +23,27 @@ export default function CreateShoppingList({ user, setListPath }) {
 	};
 
 	return (
-		<form onSubmit={handleSubmit}>
-			<label htmlFor="shoppingList">Enter Shopping List name:</label>
-			<input
-				id="shoppingList"
-				type="text"
-				value={listName}
-				onChange={(e) => setListName(e.target.value)}
-				required
-			/>
-			<button type="submit">Create Shopping List</button>
+		<form onSubmit={handleSubmit} className="flex flex-row space-x-3 items-end">
+			<div className="flex flex-col">
+				<label htmlFor="shoppingList" className="text-xs font-extralight">
+					Create a new list
+				</label>
+				<input
+					className="border-[1px] rounded-lg h-[3rem] focus-visible:outline-none focus:ring-1 focus:ring-green-500"
+					id="shoppingList"
+					type="text"
+					value={listName}
+					onChange={(e) => setListName(e.target.value)}
+					required
+				/>
+			</div>
+
+			<button
+				type="submit"
+				className="bg-green-500 hover:bg-green-500 hover:bg-opacity-80 text-black font-bold h-[3rem] p-3 rounded-lg align-bottom"
+			>
+				Create +
+			</button>
 		</form>
 	);
 }

src/components/ShareModal.jsx

@@ -0,0 +1,65 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useState } from 'react';
+import { shareList } from '@/api';
+
+export default function ShareModal({
+	handleShareModalClick,
+	listPath,
+	user,
+	name,
+}) {
+	const [recipientEmail, setRecipientEmail] = useState('');
+	const currentUserId = user?.uid;
+
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		await shareList(listPath, currentUserId, recipientEmail);
+		setRecipientEmail('');
+	};
+
+	return (
+		<div className="fixed inset-0 flex justify-center items-center z-10">
+			<div
+				className="fixed inset-0 bg-[rgba(49,49,49,0.8)]"
+				onClick={handleShareModalClick}
+			></div>
+			<div>
+				<form
+					onSubmit={(event) => handleSubmit(event)}
+					className="relative text-black bg-slate-50 z-10 rounded p-10 w-full max-w-2xl  flex flex-col justify-between items-center space-y-6"
+				>
+					<h2 className="font-bold text-lg">You're sharing {name}</h2>
+					<div className="w-full">
+						<label htmlFor="email" className="block mb-2 text-sm">
+							Invite a user by email:
+						</label>
+						<input
+							className="w-full bg-white border-[1px] border-gray-400 focus-visible:outline-none focus:ring-1 focus:ring-green-500 rounded-xl p-2"
+							type="text"
+							id="email"
+							required
+							value={recipientEmail}
+							onChange={(e) => setRecipientEmail(e.target.value)}
+						/>
+					</div>
+					<div className="flex flex-row justify-center space-x-4 w-full">
+						<button
+							onClick={handleShareModalClick}
+							className="bg-white  hover:bg-slate-100 hover:bg-opacity-80 py-62 px-8 border rounded-xl w-1/2"
+						>
+							Close
+						</button>
+						<button
+							type="submit"
+							className="bg-pink-500  hover:bg-pink-500 hover:bg-opacity-80  py-3 px-8 rounded-xl w-1/2"
+						>
+							Invite
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}