Merge branch 'main' into feature/button-hover

src/App.jsx

@@ -60,8 +60,8 @@ export function App() {
 								<Home
 									data={listsData}
 									areListsLoading={areListsLoading}
-									setListPath={setListPath}
 									listPath={listPath}
+									setListPath={setListPath}
 									listName={listName}
 									exact
 								/>

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,21 +6,18 @@ export default function Button({
 	color,
 	fn,
 	testId,
+	buttonWidth,
 }) {
 	return (
-		<div class="buttonContainer">
-			<span className="buttonBack"></span>
-
-			<button
-				className={className}
-				value={value}
-				type={type}
-				onClick={fn}
-				style={{ backgroundColor: color }}
-				data-testid={testId}
-			>
-				{text}
-			</button>
-		</div>
+		<button
+			className={className}
+			value={value}
+			type={type}
+			onClick={fn}
+			style={{ backgroundColor: color, width: buttonWidth }}
+			data-testid={testId}
+		>
+			{text}
+		</button>
 	);
 }

src/components/SelectListForm.jsx

@@ -4,11 +4,12 @@ import Button from './Button';
 
 export default function SelectListForm({
 	data,
-	listPath,
 	areListsLoading,
 	setListPath,
+	listName,
 }) {
-	const [selectedList, setSelectedList] = useState('');
+	const initialListState = listName ? listName : 'Select a list';
+	const [selectedList, setSelectedList] = useState(initialListState);
 	const navigate = useNavigate();
 	const handleSelectChange = (e) => {
 		const input = e.target.value;
@@ -21,12 +22,12 @@ export default function SelectListForm({
 				<div>Loading lists...</div>
 			) : (
 				<div>
-					<label htmlFor="listSelector">Select List</label>
 					<select
 						id="listSelector"
 						value={selectedList}
 						onChange={handleSelectChange}
 					>
+						<option>{selectedList}</option>
 						{data.map((data) => {
 							return (
 								<option key={data.path} value={data.path}>

src/index.css

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

src/views/Home.jsx

@@ -21,9 +21,9 @@ export function Home({
 
 			<SelectListForm
 				data={data}
-				listPath={listPath}
 				areListsLoading={areListsLoading}
 				setListPath={setListPath}
+				listName={listName}
 			/>
 		</div>
 	);

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) {