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