icon button style tweaks and autofocus

src/app/globals.css

@@ -48,6 +48,11 @@ h1 {
 	user-select: none;
 }
 
+.settings-btn {
+	background-color: rgba(221, 221, 221, 0.6);
+	border-radius: 50%;
+}
+
 .scroll-to-top {
 	background-color: rgba(221, 221, 221, 0.6);
 	border-radius: 50%;

src/components/Controls.tsx

@@ -21,19 +21,19 @@ export const Controls = () => {
 			{isBagsView && isSignedIn && <div className="add-bag-btn"></div>}
 			<Link href="/" className={!isBagsView ? "selected-view" : ""} onClick={() => setView(View.SEARCH)}>
 				<IconButton aria-label="search">
-					<SearchIcon />
+					<SearchIcon fontSize="large" />
 				</IconButton>
 			</Link>
 			<DiscCount />
 			<Link href="/?view=bags" className={isBagsView ? "selected-view" : ""} onClick={() => setView(View.BAGS)}>
 				<IconButton aria-label="bags">
-					<Backpack />
+					<Backpack fontSize="large" />
 				</IconButton>
 			</Link>
 			{isBagsView && isSignedIn && (
 				<Link href="/bag/new" className="add-bag-btn">
 					<IconButton aria-label="search">
-						<AddIcon />
+						<AddIcon fontSize="large" />
 					</IconButton>
 				</Link>
 			)}

src/components/Header.tsx

@@ -3,19 +3,24 @@
 import Image from "next/image";
 
 import { UserButton } from "@components";
-import { Stack } from "@mui/material";
+import TuneIcon from "@mui/icons-material/Tune";
+import { IconButton, Stack } from "@mui/material";
 
 export const Header = () => {
 	return (
 		<Stack direction="row" justifyContent="space-between" width="100%">
-			<div style={{ width: "3rem" }}>
+			<div style={{ width: "3rem", height: "3rem" }}>
 				<UserButton />
 			</div>
 			<Stack direction="row" spacing={-2} alignItems="center" className="title">
 				<Image src="/img/discit.svg" alt="DiscIt" width={100} height={100} priority />
 				<h1>DiscIt</h1>
 			</Stack>
-			<div className="hidden" style={{ width: "3rem" }}></div>
+			<div style={{ width: "3rem", height: "3rem" }} className="settings-btn">
+				<IconButton aria-label="settings">
+					<TuneIcon fontSize="large" />
+				</IconButton>
+			</div>
 		</Stack>
 	);
 };

src/components/NewBag.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { createBag } from "@actions";
 import { useAuth } from "@clerk/nextjs";
@@ -19,6 +19,15 @@ export const NewBag = ({ backOnSubmit }: NewBagProps) => {
 
 	const router = useRouter();
 
+	const inputRef = useRef<HTMLInputElement>();
+
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			inputRef?.current?.focus?.();
+		}, 100);
+		return () => clearTimeout(timeout);
+	}, []);
+
 	const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		setError("");
 		const name = event.target.value;
@@ -64,6 +73,7 @@ export const NewBag = ({ backOnSubmit }: NewBagProps) => {
 						<TextField
 							name="add-bag-name"
 							label="name"
+							placeholder="name"
 							type="text"
 							variant="outlined"
 							value={name}
@@ -72,6 +82,7 @@ export const NewBag = ({ backOnSubmit }: NewBagProps) => {
 							sx={{ width: "100%", maxWidth: "24rem" }}
 							autoFocus
 							spellCheck={false}
+							inputRef={inputRef}
 						/>
 					</div>
 					<div className="error" style={{ height: "1.25rem" }}>