styles to shareList page, more bolding, adjust default home

Author: sar-mko

src/api/useAuth.jsx

@@ -8,11 +8,11 @@ import { addUserToDatabase } from './firebase.js';
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = () => (
+export const SignInButton = ({ styles }) => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-		className="m-0 bg-accent text-black font-bold hover:text-white"
+		className={`m-0 bg-accent text-black font-bold hover:text-white ${styles}`}
 	>
 		Sign In
 	</button>

src/views/Home.jsx

@@ -135,10 +135,10 @@ export function Home({ data, setListPath, setAllLists }) {
 						onSubmit={handleSubmit}
 						className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4 justify-center"
 					>
-						<label htmlFor="listName" className="text-white">
+						<label htmlFor="listName" className="text-white font-medium	">
 							Create a new list:
 						</label>
-						<div className="flex flex-col ">
+						<div className="flex flex-col">
 							<input
 								type="text"
 								id="listName"
@@ -162,9 +162,12 @@ export function Home({ data, setListPath, setAllLists }) {
 					</form>
 				</div>
 			) : (
-				<div className="flex flex-col h-[80vh]  my-8 p-8 rounded-3xl shadow-xl overflow-hidden mx-auto  bg-neutral place-content-center items-center">
-					<h1 className="text-center my-8 text-accent">Welcome to SnapShop!</h1>
-					<SignInButton />
+				<div className="flex flex-col h-[80vh]  my-8 p-8 rounded-3xl overflow-hidden mx-auto place-content-center items-center ">
+					<h1 className="text-center my-8 text-neutral text-6xl">
+						{' '}
+						Welcome to SnapShop!
+					</h1>
+					<SignInButton styles={'bg-neutral text-white btn-lg text-2xl'} />
 				</div>
 			)}
 		</>

src/views/List.jsx

@@ -80,7 +80,11 @@ export function List({ data, userId, path }) {
 				<BasicModal dataEmpty={dataEmpty} message={message} />
 			)}
 
-			<button onClick={addItemNavigate} aria-label="Add a new item">
+			<button
+				onClick={addItemNavigate}
+				aria-label="Add a new item"
+				className="ml-0"
+			>
 				{' '}
 				Add item <AddBoxRoundedIcon fontSize="large" />
 			</button>
@@ -96,6 +100,7 @@ export function List({ data, userId, path }) {
 					value={filterVal}
 					onChange={handleChange}
 					placeholder="e.g. Apple"
+					className="placeholder-zinc-600"
 				/>
 				<SearchRoundedIcon />
 				<button

src/views/ManageList.jsx

@@ -116,7 +116,7 @@ export function ManageList({ list }) {
 						id="name-of-item"
 						value={formData.name}
 						onChange={handleChange}
-						className="placeholder-zinc-700"
+						className="placeholder-zinc-600"
 						required
 					></input>
 
@@ -139,7 +139,7 @@ export function ManageList({ list }) {
 						value={formData.frequency}
 						name="frequency"
 						onChange={handleChange}
-						className="placeholder-zinc-700"
+						className="placeholder-zinc-600"
 						required
 					>
 						<option value="" disabled>

src/views/ShareList.jsx

@@ -26,7 +26,7 @@ export function ShareList({ userId }) {
 
 	return (
 		<>
-			<div className="manage-list-form">
+			<div className="manage-list-form flex flex-col h-[10vh] my-8 p-8 rounded-3xl shadow-xl overflow-hidden mx-auto  bg-neutral text-white font-medium">
 				<form onSubmit={handleEmailSubmit}>
 					<label htmlFor="invite-email">Invite user by email:</label>
 					<input
@@ -37,6 +37,7 @@ export function ShareList({ userId }) {
 						value={email}
 						onChange={handleEmailChange}
 						required
+						className="text-black placeholder-zinc-600"
 					></input>
 
 					<button type="submit">Share List</button>