Merge pull request #66 from the-collab-lab/ce-issue-29

Adjust padding on pages, buttons, input fields, width component, responsiveness
the-collab-lab · Apr 3, 2024 · 40fdec7 · 40fdec7
2 parents 9a01dcf + e314257
commit 40fdec7
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 66 deletions.
diff --git a/public/img/gear.svg b/public/img/gear.svg
diff --git a/src/components/ListButtons.jsx b/src/components/ListButtons.jsx
@@ -3,9 +3,9 @@ const ListButtons = (props) => {
 	const navigate = useNavigate();
 
 	const buttonVariants = {
-		purple: 'flex items-center justify-center rounded-lg bg-lightPurple',
+		purple: 'flex items-center justify-center rounded-md bg-lightPurple',
 		white:
-			'flex items-center justify-center rounded-lg bg-white border text-darkPurple',
+			'flex items-center justify-center  rounded-md bg-lightGrey border text-darkPurple',
 	};
 
 	const iconVariants = {
@@ -14,22 +14,22 @@ const ListButtons = (props) => {
 	};
 
 	const textVariants = {
-		purple: 'ps-2 text-offWhite font-poppins',
-		white: 'ps-2 text-darkPurple font-poppins',
+		purple: 'text-base sm:text-lg text-offWhite font-poppins',
+		white: 'text-base sm:text-lg text-darkPurple font-poppins',
 	};
 
 	return (
 		<div className="grid sm:grid-cols-3 grid-cols-2 gap-x-2 py-6 text-base sm:text-lg">
 			<button
-				className={`sm:col-span-2  py-5 ${buttonVariants[props.colorAdd]}`}
+				className={`sm:col-span-2  px-4 py-2 gap-6 shadow-lg ${buttonVariants[props.colorAdd]}`}
 				onClick={() => navigate('/manage-list')}
 			>
 				<i className={`${iconVariants[props.colorAdd]} fa-solid fa-plus `}></i>
 
 				<span className={`${textVariants[props.colorAdd]}`}>Add item</span>
 			</button>
 			<button
-				className={`sm:col-span-1  ${buttonVariants[props.colorShare]}`}
+				className={`sm:col-span-1  gap-6 shadow-lg ${buttonVariants[props.colorShare]}`}
 				onClick={() => navigate('/manage-list')}
 			>
 				<i

diff --git a/src/components/ListForm.jsx b/src/components/ListForm.jsx
@@ -71,7 +71,7 @@ const ListForm = (props) => {
 				value={newList}
 				onChange={(event) => handleInputChange(event)}
 				onClick={(event) => handleKeyPressed(event)}
-				className="grow shrink bg-puurWhite border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
+				className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
 			/>
 			<button
 				type="submit"

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -21,7 +21,7 @@ export function ListItem({
 	return (
 		<div
 			href="/"
-			className="bg-lightGrey hover:bg-white rounded-lg p-5 my-3 font-poppins text-base sm:text-lg"
+			className="bg-lightGrey hover:bg-white rounded-md py-2 px-4 my-3 font-poppins text-base sm:text-lg"
 		>
 			<li className="flex items-center justify-between">
 				<div className=" flex items-center justify-start">
@@ -44,7 +44,7 @@ export function ListItem({
 								version="1.1"
 								fill="white"
 								xmlns="http://www.w3.org/2000/svg"
-								className="rounded-xl fill-white stroke-2 stroke-darkPurple peer-focus:ring-2 ring-blue-900 peer-checked:fill-darkPurple"
+								className="rounded-xl fill-white stroke-2 stroke-lightPurple peer-focus:ring-2 ring-blue-900 peer-checked:fill-lightPurple"
 							>
 								<circle cx="11" cy="11" r="10" />
 							</svg>
@@ -63,7 +63,7 @@ export function ListItem({
 					onClick={() => handleDelete(listPath, itemId, name)}
 					aria-label={`Delete ${name}`}
 				>
-					<i className="fa-solid fa-x fa-xs"></i>
+					<i className="fa-solid fa-trash"></i>
 				</button>
 			</li>
 		</div>

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -64,7 +64,7 @@ export function NavBar({ user, lists, listPath }) {
 								</span>
 							</button>
 							{/* NAVIGATION-MOBILE-OPEN */}
-							<div className="h-full flex flex-col pt-12 justify-center	items-center">
+							<div className="h-full flex flex-col justify-center	items-center">
 								<NavBarContent
 									lists={lists}
 									listPath={listPath}

diff --git a/src/components/SearchList.jsx b/src/components/SearchList.jsx
@@ -25,7 +25,7 @@ export const SearchList = ({ data, setNewList }) => {
 		<form>
 			<div className="relative flex items-center ">
 				<input
-					className="bg-white border rounded-lg col-span-1 w-full	font-poppins p-5 "
+					className="bg-lightGrey border rounded-md col-span-1 w-full	shadow-lg font-poppins py-2 px-4 "
 					id="search"
 					type="text"
 					onChange={(e) => handleFiltering(e)}
@@ -36,9 +36,9 @@ export const SearchList = ({ data, setNewList }) => {
 				<button
 					onClick={(e) => resetInput(e)}
 					aria-label="clear the search bar"
-					className="border text-darkPurple rounded-sm h-7 px-1  absolute end-5 flex items-center"
+					className="border text-darkPurple rounded-sm h-6 px-1  absolute end-5 flex items-center"
 				>
-					<i className="fa-solid fa-x fa-2xs"></i>
+					<i className="fa-solid fa-x"></i>
 				</button>
 			</div>
 		</form>

diff --git a/src/views/Home.css b/src/views/Home.css
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -7,7 +7,7 @@ export function Home({ data, setListPath, userId, userEmail }) {
 	const [message, setMessage] = useState('');
 
 	return (
-		<div className="my-16 mx-auto max-w-xl flex flex-col text-center text-darkPurple font-poppins px-4">
+		<div className="pt-16 pb-24 mx-auto max-w-xl flex flex-col text-center text-darkPurple font-poppins px-4">
 			<h1 className="font-amiri text-2xl sm:text-3xl mb-10">All My Lists</h1>
 			<p className="mb-16 text-xl sm:text-2xl">
 				{data[0]
@@ -36,7 +36,7 @@ export function Home({ data, setListPath, userId, userEmail }) {
 			)}
 
 			<section>
-				<h2 className="text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2 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>
 				<ListForm

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -12,14 +12,14 @@ export function Layout({ lists, listPath }) {
 	};
 
 	return (
-		<div className="max-w-screen flex flex-col text-poppins min-w-96 bg-puurWhite min-h-screen">
+		<div className="w-screen flex flex-col text-poppins min-w-96 bg-puurWhite">
 			<NavBar user={user} lists={lists} listPath={listPath} />
-			<main className="w-full lg:pt-16  pb-12 xl:w-9/12  xl:mx-auto">
+			<main className="h-screen w-full lg:pt-16 xl:w-9/12  xl:mx-auto">
 				{!!user ? (
 					<Outlet />
 				) : (
-					<div className="flex justify-evenly m-20 lg:pt-0 lg:flex-row">
-						<div className="lg:w-fit flex flex-col items-center	ps-10">
+					<div className="flex flex-col justify-items-center	pt-12 lg:justify-between lg:m-20 lg:pt-0 lg:flex-row">
+						<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

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -42,13 +42,13 @@ export function List({ data, lists, listPath, isLoadingListData }) {
 	}
 
 	return (
-		<div className="text-center flex flex-col py-2 min-w-96 justify-center items-center align-center mx-auto">
-			<h1 className="font-amiri text-2xl sm:text-3xl text-darkPurple p-8">
+		<div className="flex flex-col pt-16 pb-24 px-4  max-w-xl justify-center items-center align-center mx-auto">
+			<h1 className="font-amiri text-2xl sm:text-3xl text-darkPurple mb-10">
 				{path[0].toUpperCase() + path.slice(1)}
 			</h1>
 
 			{data.length === 0 ? (
-				<div className="text-xl sm:text-2xl py-8 md:w-2/4 w-3/4">
+				<div className="text-xl sm:text-2xl py-8 w-full">
 					<p className="pb-12 text-darkPurple font-poppins">
 						This is your new list. There are no items added yet...
 					</p>
@@ -59,7 +59,7 @@ export function List({ data, lists, listPath, isLoadingListData }) {
 					<ListButtons colorAdd={'purple'} colorShare={'white'} />
 				</div>
 			) : (
-				<div className="py-8 md:w-2/4 w-3/4 text-base sm:text-lg">
+				<div className="py-8 w-full text-base sm:text-lg">
 					<SearchList data={sortedList} setNewList={setNewList} />
 					<ListButtons colorAdd={'white'} colorShare={'white'} />
 					{categoryArray.map((category, i) => (

diff --git a/src/views/ManageList.css b/src/views/ManageList.css
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { addItem } from '../api/firebase';
 import { shareList } from '../api/firebase';
-import './ManageList.css';
 import ErrorMessage from '../components/ErrorMessage';
 import {
 	inputHasValue,
@@ -100,16 +99,16 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 	}
 
 	return (
-		<div className="my-16 flex flex-col text-center items-center text-darkPurple font-poppins px-4">
-			<h1 className="font-amiri text-2xl sm:text-3xl text-darkPurple p-8">
+		<div className="pt-16 pb-24 mx-auto max-w-xl flex flex-col text-center items-center text-darkPurple font-poppins px-4">
+			<h1 className="font-amiri text-2xl sm:text-3xl text-darkPurple mb-10">
 				{displayName[0].toUpperCase() + displayName.slice(1)}
 			</h1>
-			<div className="mx-auto py-8 md:w-2/4 w-3/4">
+			<div className="mx-auto py-8">
 				<p className="pb-12 text-darkPurple font-poppins text-xl sm:text-2xl">
 					Add new items and share your list with other users
 				</p>
 			</div>
-			<section className="flex flex-col">
+			<section className="flex flex-col w-full">
 				<div className="flex flex-col">
 					<form
 						method="post"
@@ -125,32 +124,30 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 							type="text"
 							placeholder="Type a new item name"
 							name="item"
-							className="grow shrink bg-offWhite border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple my-5"
+							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-row">
-							<div>
-								<select
-									name="time"
-									id="time-select "
-									aria-label="When do you need this item?"
-									className="bag-4 bg-offWhite border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple my-5 mr-5"
-								>
-									<option value="none" selected disabled hidden>
-										Choose item's likely need date
-									</option>
-
-									<option value="soon">Soon (within 7 days)</option>
-									<option value="soonIsh">Soon-ish (in 14 days)</option>
-									<option value="notSoon">Not soon (in 30 days)</option>
-								</select>
-							</div>
+						<div className="flex flex-col sm:flex-row gap-4 text-base sm:text-2xl">
+							<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"
+							>
+								<option value="none" selected disabled hidden>
+									Choose item's likely need date
+								</option>
+
+								<option value="soon">Soon (within 7 days)</option>
+								<option value="soonIsh">Soon-ish (in 14 days)</option>
+								<option value="notSoon">Not soon (in 30 days)</option>
+							</select>
 							<button
 								type="submit"
-								className="flex items-center justify-center  gap-6 rounded-lg bg-lightPurple border-lightPurple text-offWhite my-5 px-5"
+								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"
 							>
 								<span>
-									<i class="fa-solid fa-plus"></i>
+									<i className="fa-solid fa-plus"></i>
 								</span>
 								Add
 							</button>
@@ -161,18 +158,12 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 					)}
 				</div>
 			</section>
-			<section className="flex flex-col my-20">
+			<section className="flex flex-col w-full my-20">
 				<form
 					method="post"
 					onSubmit={sendInvite}
 					className="flex flex-col text-base sm:text-lg"
 				>
-					{/* <label
-						htmlFor="email"
-						className="my-8 text-lg sm:text-xl text-left text-darkPurple border-solid border-darkPurple border-b pb-2"
-					>
-						SHARE THE LIST
-					</label> */}
 					<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>
@@ -183,15 +174,15 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 							name="email"
 							id="email"
 							placeholder="Share this list with another user"
-							className="grow shrink bg-offWhite border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
+							className="grow shrink bg-lightGrey border border-darkPurple rounded-md shadow-lg px-4 py-2 placeholder:text-darkPurple"
 							onChange={() => setShareListErrMessage('')}
 						></input>
 						<button
 							type="submit"
-							className="bg-offWhite  text-darkPurple border border-darkPurple flex justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-darkPurple px-4 py-2 gap-6 shrink-0"
+							className="bg-lightGrey text-darkPurple border border-darkPurple flex justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-darkPurple px-4 py-2 gap-6 shrink-0"
 						>
 							<span>
-								<i class="fa-solid fa-share-nodes"></i>
+								<i className="fa-solid fa-share-nodes"></i>
 							</span>
 							Share
 						</button>