Merge pull request #120 from the-collab-lab/feature/mobile-footer-log…

…-button-116

Feature/mobile footer log button 116

src/api/useAuth.jsx

@@ -9,8 +9,10 @@ import Button from '../components/Button.jsx';
  * 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 = ({ className, value }) => (
 	<Button
+		className={className}
+		value={value}
 		text="Sign in"
 		type="button"
 		fn={() => signInWithPopup(auth, new GoogleAuthProvider())}

src/components/Button.jsx

@@ -6,14 +6,15 @@ export default function Button({
 	color,
 	fn,
 	testId,
+	buttonWidth,
 }) {
 	return (
 		<button
 			className={className}
 			value={value}
 			type={type}
 			onClick={fn}
-			style={{ backgroundColor: color }}
+			style={{ backgroundColor: color, width: buttonWidth }}
 			data-testid={testId}
 		>
 			{text}

src/index.css

@@ -137,6 +137,11 @@ input:focus {
 	outline: var(--black);
 }
 
+.logIn,
+.logOut {
+	font-size: 18px;
+}
+
 @media screen and (min-width: 780px) {
 	h1 {
 		font-size: 70px;

src/views/Layout.jsx

@@ -2,11 +2,31 @@ import { Outlet } from 'react-router-dom';
 
 import './Layout.css';
 import { auth } from '../api/config.js';
-import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
+import { useAuth } from '../api/useAuth.jsx';
 import LoggedOut from '../components/LoggedOut.jsx';
+import { useState } from 'react';
+import Button from '../components/Button.jsx';
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 
 export function Layout() {
+	const initialWindowSize = window.innerWidth;
+
 	const { user } = useAuth();
+	const [isMobile, setIsMobile] = useState(
+		initialWindowSize < 780 ? true : false,
+	);
+
+	function windowSizeCheck() {
+		if (window.innerWidth < 780 && isMobile === false) {
+			setIsMobile(true);
+		}
+		if (window.innerWidth >= 780 && isMobile === true) {
+			setIsMobile(false);
+		}
+	}
+
+	window.addEventListener('resize', windowSizeCheck);
+
 	return (
 		<div className="Layout">
 			{!!user ? (
@@ -16,24 +36,56 @@ export function Layout() {
 							<h1>Smart shopping list</h1>
 						</a>
 
-						<div>
-							<span>Welcome, {auth.currentUser.displayName}</span>
-						</div>
-						<SignOutButton />
+						{!isMobile && (
+							<div>
+								<div>
+									<span>Welcome, {auth.currentUser.displayName}</span>
+								</div>
+								<Button
+									fn={() => auth.signOut()}
+									color={'yellow'}
+									className={'logOut'}
+									text={'Log Out'}
+								/>
+							</div>
+						)}
 					</header>
 					<main className="Layout-main">
 						<Outlet />
 					</main>
+					{isMobile && (
+						<Button
+							fn={() => auth.signOut()}
+							color={'yellow'}
+							className={'logOut'}
+							text={'Log Out'}
+							buttonWidth={'100%'}
+						/>
+					)}
 				</>
 			) : (
 				<>
 					<header className="Layout-header">
 						<h1>Smart shopping list</h1>
-						<div>
-							<SignInButton />
-						</div>
+						{!isMobile && (
+							<Button
+								fn={() => signInWithPopup(auth, new GoogleAuthProvider())}
+								color={'yellow'}
+								className={'logIn'}
+								text={'Log In'}
+							/>
+						)}
 					</header>
 					<LoggedOut />
+					{isMobile && (
+						<Button
+							fn={() => signInWithPopup(auth, new GoogleAuthProvider())}
+							color={'yellow'}
+							className={'logIn'}
+							text={'Log In'}
+							buttonWidth={'98%'}
+						/>
+					)}
 				</>
 			)}
 		</div>

src/views/List.jsx

@@ -2,7 +2,6 @@ import './List.css';
 import AddItemForm from '../components/AddItemForm';
 import ShareForm from '../components/ShareForm';
 import ListSearchItems from '../components/ListSearchItems';
-import { SignOutButton } from '../api/useAuth';
 
 export function List({ data, isShoppingListLoading, listPath, listName }) {
 	if (!listPath) {