Merge pull request #88 from the-collab-lab/am-update-landing-page

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:[email protected]&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

@@ -2,16 +2,18 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 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 }) => (
  <button
  type="button"
  onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
+ className={largeSize ? 'large-size' : ''}
  >
  Sign In
  </button>
@@ -31,8 +33,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

@@ -126,6 +126,11 @@ h1 {
  font-family: 'Righteous', sans-serif;
 }
 
+h2,
+h3 {
+ font-family: 'Reddit Mono', monospace;
+}
+
 h5,
 p {
  margin: 0;

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';
 
@@ -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

@@ -28,12 +28,39 @@
  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;
 }

src/views/Home.jsx

@@ -9,32 +9,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> (
- <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>