Merge branch 'main' into mf-styling-list-and-items-pages

index.html

@@ -12,8 +12,8 @@
 		/>
 		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
 		<link
+			href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
 			rel="stylesheet"
-			href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
 		/>
 		<link
 			href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap"

src/api/useAuth.css

@@ -0,0 +1,7 @@
+.large-size {
+	margin: auto;
+	font-size: 35px;
+	height: 80px;
+	width: 270px;
+	margin-bottom: 70px;
+}

src/api/useAuth.jsx

@@ -3,13 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { auth } from './config.js';
 import { addUserToDatabase } from './firebase.js';
+import './useAuth.css';
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
  * 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 = ({ largeSize }) => {
 	let navigate = useNavigate();
 
 	const handleSignIn = async () => {
@@ -25,7 +26,7 @@ export const SignInButton = () => {
 	};
 
 	return (
-		<button type="button" onClick={handleSignIn}>
+		<button type="button" onClick={handleSignIn} className={largeSize ? 'large-size' : ''}>
 			Sign In
 		</button>
 	);
@@ -45,8 +46,12 @@ async function handleSignOut() {
 	}
 }
 
-export const SignOutButton = () => (
-	<button type="button" onClick={() => handleSignOut()}>
+export const SignOutButton = ({ largeSize }) => (
+	<button
+		type="button"
+		onClick={() => handleSignOut()}
+		className={largeSize ? 'large-size' : ''}
+	>
 		Sign Out
 	</button>
 );

src/index.css

@@ -131,11 +131,15 @@ h1 {
 	font-family: 'Righteous', sans-serif;
 }
 
-h3,
+
 h4,
 h5 {
 	font-family: 'Righteous', sans-serif;
 	font-weight: 400;
+
+h2,
+h3 {
+	font-family: 'Reddit Mono', monospace;
 }
 
 h5,

src/views/About.css

@@ -29,6 +29,11 @@
 	font-size: 1.5rem;
 }
 
+.About-credits {
+	text-align: center;
+	margin-left: 250px;
+}
+
 @media only screen and (max-width: 900px) {
 	.About-main {
 		max-width: 600px;
@@ -38,4 +43,8 @@
 		flex-direction: column;
 		text-align: center;
 	}
+
+	.About-credits {
+		margin-left: 0;
+	}
 }

src/views/About.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { Emoji } from '../components';
 import './About.css';
 
@@ -7,7 +8,7 @@ export function About() {
 			<main className="About-main">
 				<h1 className="About-title">How It Works</h1>
 				<section className="About-section">
-					<img width="250px" alt="phone screenshot" src="../img/phone.png" />
+					<img width="250px" alt="phone screenshot" src="../img/phone1.png" />
 					<div className="About-section-text">
 						<h2>Lending a list-ening ear</h2>
 						<p>
@@ -18,18 +19,18 @@ export function About() {
 					</div>
 				</section>
 				<section className="About-section">
-					<img width="250px" alt="phone screenshot" src="../img/phone.png" />
+					<img width="250px" alt="phone screenshot" src="../img/phone2.png" />
 					<div className="About-section-text">
 						<h2>Before you go down the Aisle</h2>
 						<p>
-							Inside your list, tap the big 'Add' button to add a new item.
-							Aisle Be There for you, asking when you might need to restock your
+							Inside your list, tap the 'Add' button to add a new item. Aisle Be
+							There for you, asking when you might need to restock your
 							aisle-ments! <Emoji label="coffee">☕</Emoji>
 						</p>
 					</div>
 				</section>
 				<section className="About-section">
-					<img width="250px" alt="phone screenshot" src="../img/phone.png" />
+					<img width="250px" alt="phone screenshot" src="../img/phone3.png" />
 					<div className="About-section-text">
 						<h2>Aisle check on you</h2>
 						<p>
@@ -41,7 +42,7 @@ export function About() {
 					</div>
 				</section>
 				<section className="About-section">
-					<img width="250px" alt="phone screenshot" src="../img/phone.png" />
+					<img width="250px" alt="phone screenshot" src="../img/phone4.png" />
 					<div className="About-section-text">
 						<h2>Aisle Be There to guide you</h2>
 						<p>
@@ -52,7 +53,7 @@ export function About() {
 					</div>
 				</section>
 				<section className="About-section">
-					<img width="250px" alt="phone screenshot" src="../img/phone.png" />
+					<img width="250px" alt="phone screenshot" src="../img/phone5.png" />
 					<div className="About-section-text">
 						<h2>Aisle Be your community</h2>
 						<p>
@@ -61,6 +62,17 @@ export function About() {
 						</p>
 					</div>
 				</section>
+				<section className="About-section">
+					<div className="About-section-text">
+						<div className="About-credits">
+							<h2>Credits</h2>
+							<p>
+								Home page illustration by{' '}
+								<Link to="https://storyset.com/web">Storyset</Link>
+							</p>
+						</div>
+					</div>
+				</section>
 			</main>
 		</>
 	);

src/views/Home.css

@@ -29,14 +29,41 @@
 	margin: 0;
 }
 
-.intro-text {
+.Home-app-name {
+	color: #5a23b3;
+	font-size: 45px;
+	text-shadow: 1px 0.5px 0 white;
+}
+
+.Home-intro-text {
+	display: flex;
+	justify-content: center;
 	width: 400px;
 	margin: auto;
-	padding-bottom: 20px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.Home-welcome-to {
+	font-size: 30px;
+	margin: auto;
+	margin-top: 30px;
+	margin-bottom: 10px;
+}
+
+.Home-register-here {
+	margin-top: 40px;
+}
+
+.Home-button {
+	font-size: 35px;
+	margin: auto;
+	height: 80px;
+	width: 270px;
 }
 
-img.Landing-check {
-	height: 200px;
+img.Home-welcome {
+	height: 400px;
 }
 
 .Home-profile-img {

src/views/Home.jsx

@@ -8,38 +8,38 @@ export function Home() {
 		<>
 			<div className="Home">
 				<header className="Home-header">
-					<h2>Welcome to Aisle Be There!</h2>
-					<h3 className="intro-text">
+					<h2 className="Home-welcome-to">welcome to</h2>
+					<h1 className="Home-app-name">Aisle Be There!</h1>
+					<h3 className="Home-intro-text">
 						The app for making smart shopping lists. Create lists to manage any
-						type of shopping, and mark items by how soon you'll need them again.
+						type of shopping and mark items by how soon you'll need them again.
 					</h3>
 					<img
-						className="Landing-check"
-						src="img/checkbox.png"
-						alt="black checkbox with green check"
+						className="Home-welcome"
+						src="img/home-welcome-image.svg"
+						alt="two people standing in front of a large list with a floating hand checking an item off"
 					/>
-					<h3>
-						New to the app? Click <Link to="/about">here</Link> to learn more!
-					</h3>
 					{!!user ? (
 						<div>
-							<span>Welcome back {auth.currentUser.displayName}!</span>
-							<img
-								src={auth.currentUser.photoURL}
-								alt="profile"
-								className="Home-profile-img"
-							/>
-							(
-							<SignOutButton />)
+							<h2>Welcome back</h2>
+							<h2>{auth.currentUser.displayName}!</h2>
+							<br />
+							<Link to="/list">
+								<button className="Home-button">View Lists</button>
+							</Link>
+							<br />
+							<br />
 							<br />
-							<span>
-								View your lists <Link to="/list">here</Link>
-							</span>
+							<SignOutButton largeSize />
 						</div>
 					) : (
 						<div>
-							<span>Click 'Sign In' to register and get started: </span>
-							<SignInButton />
+							<h3>New to the app?</h3>
+							<Link to="/about">
+								<button className="Home-button">Learn More</button>
+							</Link>
+							<h3 className="Home-register-here">Register here:</h3>
+							<SignInButton largeSize />
 						</div>
 					)}
 				</header>