Home Page Styling (#61)

* added bg to all pages, styled new list form

* styled list name buttons, added color to tailwind file

* styled sign-in and sign-out buttons

* styling: changed bg and text colors for form

* styling: made all lists the same width

* extend li element to full width, center list on desktop view

* added logo

* reverted previous commit

* Revert "added logo"

This reverts commit 6b38a92.

* re-adding list styling rather than button, centering

---------

Co-authored-by: Shane Misra <[email protected]>

src/api/useAuth.jsx

@@ -10,6 +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"
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
@@ -21,7 +22,11 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+	<button
+		className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black"
+		type="button"
+		onClick={() => auth.signOut()}
+	>
 		Sign Out
 	</button>
 );

src/components/SingleList.jsx

@@ -10,8 +10,13 @@ export function SingleList({ name, path, setListPath }) {
 	}
 
 	return (
-		<li className="SingleList">
-			<button onClick={handleClick}>{name}</button>
+		<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"
+				onClick={handleClick}
+			>
+				{name}
+			</button>
 		</li>
 	);
 }

src/index.css

@@ -31,7 +31,7 @@
 
 :root.theme-light {
 	--color-accent: var(--color-cobalt-blue);
-	--color-bg: var(--color-white);
+	--color-bg: #fdfdf2;
 	--color-border: hsla(220, 13%, 78%, 1);
 	--color-text: var(--color-black);
 }
@@ -59,7 +59,7 @@ html {
 }
 
 body {
-	background-color: var(--color-bg);
+	background-color: #fdfdf2;
 	color: var(--color-text);
 	font-family:
 		-apple-system,

src/views/Home.jsx

@@ -49,24 +49,27 @@ export function Home({ data, userId, userEmail, setListPath }) {
 	};
 
 	return (
-		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-			<form onSubmit={handleSubmit}>
-				<label htmlFor="listName">
-					New list name:
+		<div className="Home mt-8 font-Rubik">
+			<form
+				onSubmit={handleSubmit}
+				className="flex justify-between rounded-lg items-center"
+			>
+				<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>Create</button>
+				<button className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black">
+					Create
+				</button>
 			</form>
-			<ul>
+			<ul className="flex flex-col my-8 items-center text-2xl">
 				{data.map((item, index) => {
 					return (
 						<SingleList

src/views/Layout.jsx

@@ -9,12 +9,14 @@ export function Layout() {
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header">
+				<header className="Layout-header font-Rubik flex flex-col">
 					<h1>Smart shopping list</h1>
 					{!!user ? (
 						<div>
-							<span>Signed in as {auth.currentUser.displayName}</span> (
-							<SignOutButton />)
+							<span className="mx-3">
+								Signed in as {auth.currentUser.displayName}
+							</span>
+							<SignOutButton />
 						</div>
 					) : (
 						<SignInButton />

tailwind.config.js

@@ -12,6 +12,7 @@ export default {
 			yellow: '#FEFAE0',
 			vanilla: '#FAEDCD',
 			'pale-green': '#E9EDC9',
+			'off-black': '#353839',
 		},
 		extend: {
 			fontFamily: {