Merge branch 'main' into sm-dg-style-header-navigation

the-collab-lab · Apr 5, 2024 · 465c131 · 465c131
2 parents 1213f52 + d317f60
commit 465c131
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 14 deletions.
diff --git a/src/api/useAuth.jsx b/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())}
 	>

diff --git a/src/components/SingleList.jsx b/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>
 	);
 }
diff --git a/src/index.css b/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,8 @@ html {
 }
 
 body {
-	background-color: var(--color-bg);
+	background-color: #fdfdf2;
+	color: var(--color-text);
 	font-family:
 		-apple-system,
 		BlinkMacSystemFont,

diff --git a/src/views/Home.jsx b/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

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -16,7 +16,7 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header
-					className="Layout-header flex flex-col items-center  bg-eggshell
+					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" />