Styling fixes and standardization (#65)

* Home page side margins, input background color, changed logo source * New list input fixed, list name hover color change, standardized general button padding * Standardized button radius, font color, increased header top margin * Changed nesting for header display * Standardized input text size * Adjusted margin * Missing text color * Default text color in inputs * Hover color to sign in and sign out buttons
the-collab-lab · Apr 7, 2024 · b414b29 · b414b29
1 parent 4045baa
commit b414b29
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 54 deletions.
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -10,7 +10,7 @@ import { addUserToDatabase } from './firebase.js';
  */
 export const SignInButton = () => (
 	<button
-		className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black"
+		className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black hover:bg-green-hover"
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
@@ -23,7 +23,7 @@ export const SignInButton = () => (
  */
 export const SignOutButton = () => (
 	<button
-		className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black"
+		className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black hover:bg-green-hover"
 		type="button"
 		onClick={() => auth.signOut()}
 	>

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
@@ -53,7 +53,7 @@ export function AddItem({ data, listPath }) {
 				onSubmit={handleItemSubmit}
 				className="grid xs:grid-cols-addItem grid-cols-gridTiny grid-rows-2 items-center"
 			>
-				<label htmlFor="itemName" className="col-span-1">
+				<label htmlFor="itemName" className="col-span-1 text-off-black">
 					New Item:
 				</label>
 				<input
@@ -62,15 +62,18 @@ export function AddItem({ data, listPath }) {
 					type="text"
 					value={newItem.itemName}
 					onChange={handleItemChange}
-					className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full mt-2 text-2xl col-span-1 shrink"
+					className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full mt-2 col-span-1 shrink 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 md:m-w-2xl order-last xs:order-none col-span-2 xs:col-span-1"
+					className="bg-sage p-2 px-3 rounded-xl text-3xl min-h-14 mt-4 md:m-w-2xl order-last xs:order-none col-span-2 xs:col-span-1"
 				>
 					Add
 				</button>
-				<label htmlFor="daysUntilNextPurchase" className="col-span-1">
+				<label
+					htmlFor="daysUntilNextPurchase"
+					className="col-span-1 text-off-black"
+				>
 					Urgency:
 				</label>
 				<select
@@ -79,7 +82,7 @@ export function AddItem({ data, listPath }) {
 					value={newItem.daysUntilNextPurchase}
 					onChange={handleItemChange}
 					required
-					className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full grow mt-2 text-xl xs:text-2xl"
+					className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full grow mt-2 text-xl xs:text-2xl text-off-black"
 				>
 					<option value="">Select Urgency</option>
 					<option value={7}>Soon</option>

diff --git a/src/components/ListHeader.jsx b/src/components/ListHeader.jsx
@@ -1,6 +1,6 @@
 export function ListHeader({ text }) {
 	return (
-		<h2 className="flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12">
+		<h2 className="mt-4 flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12 text-off-black">
 			{text}
 		</h2>
 	);

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -49,14 +49,14 @@ export function ListItem({ listPath, item }) {
 	};
 
 	return (
-		<li className="ListItem bg-pale-green hover:bg-green-hover border border-dark-green min-h-14 rounded-xl text-3xl mb-2 items-center grid grid-cols-gridTiny xs:grid-cols-listItem">
+		<li className="ListItem bg-pale-green hover:bg-green-hover border border-dark-green min-h-14 rounded-xl text-3xl mb-2 items-center grid grid-cols-gridTiny xs:grid-cols-listItem text-off-black">
 			<input
 				type="checkbox"
 				id={item.name}
 				name="purchased"
 				onChange={changeHandler}
 				checked={isChecked}
-				className="rounded-full border-dark-green w-8 h-8 mx-4 hover:bg-slate-100 row-span-2 xs:row-span-1"
+				className="rounded-full border-dark-green w-8 h-8 mx-4 hover:bg-slate-100 row-span-2 xs:row-span-1 "
 			/>
 			<label htmlFor={item.name}>
 				<RiShoppingCart2Fill className="inline" /> {item.name}

diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
@@ -12,7 +12,7 @@ export function SingleList({ name, path, setListPath }) {
 	return (
 		<li className="SingleList flex flex-col items-center w-full">
 			<button
-				className="border-2 border-sage rounded-lg bg-pale-green my-2 px-3 py-2 text-off-black w-full md:w-1/2"
+				className="border-2 border-sage rounded-xl bg-pale-green m-2 px-3 py-2 text-3xl min-h-14 text-off-black w-full md:w-1/2 hover:bg-green-hover"
 				onClick={handleClick}
 			>
 				{name}

diff --git a/src/components/UrgencyLabel.jsx b/src/components/UrgencyLabel.jsx
@@ -22,7 +22,7 @@ export function UrgencyLabel({ text }) {
 	return (
 		<span
 			className={
-				'ml-auto mr-4 rounded-lg px-2 py-1 text-center uppercase text-xl ' +
+				'ml-auto mr-4 rounded-lg px-2 py-1 text-center uppercase text-xl text-off-black ' +
 				labelColor
 			}
 		>

diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -49,23 +49,23 @@ export function Home({ data, userId, userEmail, setListPath }) {
 	};
 
 	return (
-		<div className="Home mt-8 font-Rubik">
+		<div className="Home mt-8 font-Rubik mx-8 md:mx-24">
 			<form
 				onSubmit={handleSubmit}
-				className="flex justify-between rounded-lg items-center"
+				className="flex rounded-lg items-center gap-x-6"
 			>
 				<label htmlFor="listName" className="text-off-black">
 					New list:
-					<input
-						type="text"
-						id="listName"
-						name="listName"
-						value={newListName}
-						onChange={handleChange}
-						className="w-2/3 ml-2 border-2 border-sage rounded-lg bg-eggshell"
-					/>
 				</label>
-				<button className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black">
+				<input
+					type="text"
+					id="listName"
+					name="listName"
+					value={newListName}
+					onChange={handleChange}
+					className="border-2 border-sage rounded-lg min-h-14 bg-white grow text-xl xs:text-2xl text-off-black"
+				/>
+				<button className="bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black">
 					Create
 				</button>
 			</form>

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -4,7 +4,7 @@ import { auth } from '../api/config.js';
 
 import './Layout.css';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
-import buddyLogo from '../../public/img/basket-buddy-logo.png';
+import buddyLogo from '/img/basket-buddy-logo.png';
 
 export function Layout() {
 	const { user } = useAuth();
@@ -14,15 +14,14 @@ export function Layout() {
 		'Nav-link text-eggshell border-2 rounded-full border-vanilla  hover:text-sage hover:border-sage';
 	return (
 		<>
-			<div className="Layout bg-eggshell">
-				<header
-					className="Layout-header flex flex-col items-center bg-eggshell font-Rubik
-				text-off-black"
-				>
+			<div className="Layout">
+				<header className="Layout-header flex flex-col items-center bg-eggshell font-Rubik text-off-black">
 					<img className="md:w-1/3" src={buddyLogo} alt="Basket Buddy" />
 					{!!user ? (
 						<div>
-							<span>Signed in as {auth.currentUser.displayName}</span>
+							<span className="mx-3">
+								Signed in as {auth.currentUser.displayName}
+							</span>
 							<SignOutButton />
 						</div>
 					) : (

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -33,12 +33,26 @@ export function List({ data, listPath }) {
 	return (
 		<>
 			{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={() => 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="">
+							<label htmlFor="itemFilter" className="text-off-black">
 								Filter:
 							</label>
 							<input
@@ -47,12 +61,12 @@ export function List({ data, listPath }) {
 								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-2xl"
+								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-2 py-1 grow min-h-14 xs:max-w-28 mt-2"
+									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>
@@ -61,25 +75,12 @@ export function List({ data, listPath }) {
 					</section>
 				) : null}
 				{listPath && data.length === 0 ? (
-					<div className="bg-pale-green border border-dark-green rounded-2xl py-8 mt-8">
-						<h3 className="text-center font-semibold">
+					<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}
-				{!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-2xl px-4 py-2 hover:bg-pale-green"
-							>
-								Select a list
-							</button>
-						</div>
-					</>
-				) : null}
 
 				<section>
 					<ul>

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -65,7 +65,7 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
 					<section className="mx-8 md:mx-24">
 						<form onSubmit={handleShareSubmit} className="w-full">
 							<div>
-								<label htmlFor="shareEmail" className="text-4xl">
+								<label htmlFor="shareEmail" className="text-4xl text-off-black">
 									Share List
 								</label>
 							</div>
@@ -77,22 +77,22 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
 									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"
+									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"
+									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">List Options</h3>
+						<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"
+							className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full text-off-black"
 						>
 							Delete List
 						</button>
@@ -105,7 +105,7 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
 					<div className="flex justify-center">
 						<button
 							onClick={() => handleClick('/')}
-							className="border border-dark-green rounded-2xl px-4 py-2 hover:bg-pale-green"
+							className="border border-dark-green rounded-xl px-4 py-2 hover:bg-pale-green text-off-black"
 						>
 							Select a list
 						</button>