Merge branch 'main' into dialogs

Author: borjaMarti

index.html

@@ -8,11 +8,11 @@
 		/>
 		<meta
 			name="description"
-			content="A smart shopping list that learns your purchase habits and makes suggestions, so you don't forget to buy what's important."
+			content="Despiensa, a smart shopping list that learns your purchase habits and makes suggestions, so you don't forget to buy what's important."
 		/>
-		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+		<link rel="icon" type="image/png" href="/src/assets/favicon.png" />
 		<meta name="color-scheme" content="dark light" />
-		<title>Smart Shopping List</title>
+		<title>Despiensa</title>
 		<script type="module" src="/src/index.jsx" async></script>
 		<script
 			src="https://kit.fontawesome.com/d9b2f1cd4a.js"

public/logo192.png

@@ -9,10 +9,11 @@ export function NavBar({ user, lists, listPath }) {
 			{/* DESKTOP MENU */}
 			<nav className="h-16 hidden fixed z-20 w-full lg:flex shadow-md bg-offWhite text-darkPurple text-lg sm:text-xl">
 				<div className="h-full w-full flex flex-row justify-between items-center xl:w-9/12 xl:mx-auto ">
-					<div className="h-full flex items-center pl-12">
-						<h2 className="font-amiri text-xl sm:text-2xl font-bold">
-							Smart Shopping List
+					<div className="h-full flex flex-col justify-center pl-12">
+						<h2 className="font-amiri text-2xl sm:text-3xl font-bold">
+							Despiensa
 						</h2>
+						<p className="text-xs font-poppins">Un-think your pantry</p>
 					</div>
 					{!!user && (
 						<div className="h-full flex flex-row items-center">
@@ -29,8 +30,8 @@ export function NavBar({ user, lists, listPath }) {
 			<nav className="h-12 w-full flex flex-row justify-between lg:hidden relative shadow-md text-darkPurple bg-offWhite text-lg sm:text-xl">
 				{/* MOBILE-MENU */}
 				<div className="h-full flex items-center pl-12">
-					<h2 className="font-amiri text-xl sm:text-2xl font-bold">
-						Smart Shopping List
+					<h2 className="font-amiri text-2xl sm:text-3xl font-bold">
+						Despiensa
 					</h2>
 				</div>
 				{!!user && (

public/logo512.png

@@ -16,7 +16,7 @@ export function Home({ data, setListPath, userId, userEmail }) {
 			</p>
 
 			{data[0] && (
-				<section className="mb-20">
+				<section className="mb-8">
 					<h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8">
 						SELECT A LIST
 					</h2>
@@ -35,7 +35,7 @@ export function Home({ data, setListPath, userId, userEmail }) {
 				</section>
 			)}
 
-			<section>
+			<section className="mb-8">
 				<h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8 ">
 					CREATE A NEW LIST
 				</h2>

src/assets/favicon.png

@@ -22,11 +22,11 @@ export function Layout({ lists, listPath, user, isLoadingUser }) {
 						<div className="lg:w-fit flex flex-col items-center">
 							<h1 className="max-w-sm font-amiri text-3xl sm:text-4xl text-darkPurple leading-[3rem] sm:leading-[3rem]">
 								Simplify your shopping with{' '}
-								<span className="font-semibold">SmartShoppingList</span>, the
-								intuitive list organizer.
+								<span className="font-semibold">Despiensa</span>, the intuitive
+								list organizer.
 							</h1>
 							<button
-								className="w-80 mt-8 p-2 rounded-md font-poppins text-base sm:text-lg  text-puurWhite bg-lightPurple"
+								className="w-80 mt-8 p-2 rounded-md font-poppins text-base sm:text-lg  text-puurWhite bg-lightPurple hover:bg-hoverPurple transition ease-in-out"
 								type="button"
 								onClick={handleClickSignIn}
 							>

src/components/NavBar/NavBar.jsx

@@ -108,7 +108,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 					Add new items and share your list with other users
 				</p>
 			</div>
-			<section className="flex flex-col w-full">
+			<section className="flex flex-col w-full mb-8">
 				<div className="flex flex-col">
 					<form
 						method="post"
@@ -127,12 +127,12 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 							className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple mb-5"
 							onChange={() => setAddItemErrMessage('')}
 						></input>
-						<div className="flex flex-col sm:flex-row gap-4 text-base sm:text-2xl">
+						<div className="grid sm:grid-cols-3 grid-cols-1 grid-rows-2 sm:grid-rows-1  gap-y-4 sm:gap-x-2  text-base sm:text-lg">
 							<select
 								name="time"
 								id="time-select "
 								aria-label="When do you need this item?"
-								className="grow shrink  bg-lightGrey text-base sm:text-lg border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
+								className="col-span-3 sm:col-span-2 bg-lightGrey text-base sm:text-lg border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
 							>
 								<option value="none" selected disabled hidden>
 									Choose item's likely need date
@@ -144,7 +144,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 							</select>
 							<button
 								type="submit"
-								className="flex items-center text-base sm:text-lg justify-center shrink-0  gap-6 shadow-lg rounded-md bg-lightPurple hover:bg-hoverPurple text-offWhite transition ease-in-out px-4 py-2"
+								className=" col-span-3 sm:col-span-1 gap-6 flex items-center text-base sm:text-lg justify-center shadow-lg rounded-md bg-lightPurple hover:bg-hoverPurple text-offWhite transition ease-in-out px-4 py-2"
 							>
 								<span>
 									<i className="fa-solid fa-plus"></i>
@@ -158,7 +158,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 					)}
 				</div>
 			</section>
-			<section className="flex flex-col w-full my-20">
+			<section className="flex flex-col w-full my-8">
 				<form
 					method="post"
 					onSubmit={sendInvite}
@@ -167,19 +167,19 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 					<h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 mb-8">
 						SHARE THE LIST
 					</h2>
-					<div className="flex flex-col sm:flex-row gap-4">
+					<div className="grid sm:grid-cols-3 grid-cols-1 grid-rows-2 sm:grid-rows-1  gap-y-4 sm:gap-x-2 text-base sm:text-lg">
 						<input
 							aria-label="Share the list"
 							type="email"
 							name="email"
 							id="email"
 							placeholder="Share this list with another user"
-							className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
+							className="col-span-3 sm:col-span-2 bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
 							onChange={() => setShareListErrMessage('')}
 						></input>
 						<button
 							type="submit"
-							className="bg-lightGrey text-darkPurple border border-darkPurple flex justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-hoverPurple hover:text-puurWhite px-4 py-2 gap-6 shrink-0"
+							className="col-span-3 sm:col-span-1 flex bg-lightGrey text-darkPurple border border-darkPurple justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-hoverPurple hover:text-puurWhite px-4 py-2 gap-6 shrink-0"
 						>
 							<span>
 								<i className="fa-solid fa-share-nodes"></i>