Sm about page final (#67)

* set up route for about page, no button yet

* mostly complete functionality, still needs adjustment for screen sizes

* added button in header to about page

* made about icon larger

* links and header properly centered, aboutbutton component made

* fixed sizing and alignment of linkedin icons, special thanks text, bullets

* fix TCL link, opens new tab

* horizontal margins added to sections

* github profile links added to creators section

* minor sizing changes to button and haeder

src/App.jsx

@@ -1,6 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
-import { Home, Layout, List, ManageList } from './views';
+import { Home, Layout, List, ManageList, About } from './views';
 
 import { useAuth } from './api';
 
@@ -71,6 +71,7 @@ export function App() {
  />
  }
  />
+ <Route path="/about" element={<About />} />
  </Route>
  </Routes>
  </Router>

src/api/useAuth.jsx

@@ -10,7 +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 hover:bg-green-hover"
+ className="bg-pale-green rounded-lg px-3 py-1 text-eggshell text-3xl border-2 border-sage text-off-black hover:bg-green-hover"
  type="button"
  onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
  >
@@ -23,7 +23,7 @@ export const SignInButton = () => (
  */
 export const SignOutButton = () => (
  <button
- className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black hover:bg-green-hover"
+ className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black text-2xl hover:bg-green-hover"
  type="button"
  onClick={() => auth.signOut()}
  >

src/components/AboutButton.jsx

@@ -0,0 +1,13 @@
+import { BsQuestionCircleFill } from 'react-icons/bs';
+import { NavLink } from 'react-router-dom';
+
+export const AboutButton = () => {
+ return (
+ <NavLink to="/about" className="m-4">
+ <BsQuestionCircleFill
+ className="text-off-black text-5xl"
+ alt="about page link"
+ />
+ </NavLink>
+ );
+};

src/views/About.jsx

@@ -0,0 +1,104 @@
+import { IoLogoLinkedin, IoLogoGithub } from 'react-icons/io5';
+export function About() {
+ return (
+ <>
+ <section className="flex flex-col border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black tiny:mt-14 items-center justify-center bg-sage/50 rounded-2xl">
+ <h1 className="font-bold text-off-black my-2">
+ About this application:
+ </h1>
+ <p className="text-off-black my-2">
+ Basket Buddy is a smart shopping list application, that enables a user
+ to customize their shopping experience as it is used:
+ </p>
+ <ul className="ml-6 list-disc">
+ <li className="my-4">
+ Share and complete lists with other users, with changes updated in
+ real time
+ </li>
+ <li className="my-4">
+ Complete a list over multiple store visits, as you check items off a
+ list for 24 hours
+ </li>
+ <li className="my-4">
+ Set future purchase dates for items, and BB will help determine the
+ best interval over time with each purchase
+ </li>
+ </ul>
+ </section>
+ <section className="flex flex-col border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black tiny:mt-14 items-center justify-center bg-sage/50 rounded-2xl">
+ <h2 className="font-bold text-off-black">The Creators:</h2>
+ <div className="flex justify-between items-center w-2/3 md:w-1/3 my-4">
+ <a
+ href="https://www.linkedin.com/in/andreapang/"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <IoLogoLinkedin className="text-5xl" />
+ </a>
+ <span>Andrea Pang</span>
+ <a
+ href="https://github.com/andiedoescode"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <IoLogoGithub className="text-5xl" />
+ </a>
+ </div>
+ <div className="flex justify-between items-center w-2/3 md:w-1/3 my-4">
+ <a
+ href="https://www.linkedin.com/in/shanemisra/"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <IoLogoLinkedin className="text-5xl" />
+ </a>
+ <span>Shane Misra</span>
+ <a href="https://github.com/sdmisra" target="_blank" rel="noreferrer">
+ <IoLogoGithub className="text-5xl" />
+ </a>
+ </div>
+ <div className="flex justify-between items-center w-2/3 md:w-1/3 my-4">
+ <a
+ href="https://www.linkedin.com/in/emily-tiry/"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <IoLogoLinkedin className="text-5xl" />
+ </a>
+ <span>Emily Tiry</span>
+ <a href="https://github.com/etiry" target="_blank" rel="noreferrer">
+ <IoLogoGithub className="text-5xl" />
+ </a>
+ </div>
+ <div className="flex justify-between items-center w-2/3 md:w-1/3 my-4">
+ <a
+ href="https://www.linkedin.com/in/devina-gillis/"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <IoLogoLinkedin className="text-5xl" />
+ </a>
+ <span>Devina Gillis</span>
+ <a
+ href="https://github.com/DevinaG007"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <IoLogoGithub className="text-5xl" />
+ </a>
+ </div>
+ </section>
+ <section className="flex flex-col border border-dark-green py-8 px-12 mx-8 md:mx-24 text-off-black tiny:mt-14 items-center justify-center bg-sage/50 rounded-2xl">
+ <h2 className="font-bold text-off-black">Special thanks to:</h2>
+ <span className="text-2xl">Our mentors: Caitlyn, Luis, Raynaldo</span>
+ <a
+ href="https://the-collab-lab.codes/"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <span className="font-semibold text-off-black">The Collab Lab</span>
+ </a>
+ </section>
+ </>
+ );
+}

src/views/Layout.jsx

@@ -1,7 +1,7 @@
 import { Outlet, NavLink } from 'react-router-dom';
 import { IoHome, IoList, IoCreate } from 'react-icons/io5';
 import { auth } from '../api/config.js';
-
+import { AboutButton } from '../components/AboutButton.jsx';
 import './Layout.css';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
 import buddyLogo from '/img/basket-buddy-logo.png';
@@ -18,14 +18,18 @@ export function Layout() {
  <header 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" />
  {!!user ? (
- <div>
- <span className="mx-3">
+ <div className="flex items-center w-full md:w-3/5 justify-around ">
+ <span className="text-2xl">
  Signed in as {auth.currentUser.displayName}
  </span>
  <SignOutButton />
+ <AboutButton />
  </div>
  ) : (
- <SignInButton />
+ <div className="flex items-center justify-around w-full md:w-4/5">
+ <SignInButton />
+ <AboutButton />
+ </div>
  )}
  </header>
  <main className="Layout-main flex flex-col px-0 font-Rubik">

src/views/index.js

@@ -2,3 +2,4 @@ export * from './ManageList';
 export * from './Home';
 export * from './Layout';
 export * from './List';
+export * from './About';