header improvements

cdleveille · Jun 9, 2024 · 6f81106 · 6f81106
1 parent 2174841
commit 6f81106
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -246,14 +246,23 @@ h1 {
 
 .user-btn {
 	position: absolute;
-	top: 0.75rem;
-	left: 0.75rem;
+	top: 1.25rem;
+	left: 1.25rem;
+	width: 3rem;
+	height: 3rem;
 }
 
 .user-btn-loading-spinner {
 	position: absolute;
 	top: 0.25rem;
 	left: 0.25rem;
+	z-index: 1000;
+}
+
+.settings-btn {
+	position: absolute;
+	top: 1.25rem;
+	right: 1.25rem;
 }
 
 .bag-list-dropdown {

diff --git a/src/components/misc/Header.tsx b/src/components/misc/Header.tsx
@@ -5,15 +5,13 @@ import { Stack } from "@mui/material";
 
 export const Header = () => {
 	return (
-		<Stack direction="row" justifyContent="space-between" width="100%">
-			<div style={{ width: "3rem", height: "3rem" }}>
-				<UserButton />
-			</div>
+		<>
+			<UserButton />
 			<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>
 			<SettingsButton />
-		</Stack>
+		</>
 	);
 };
diff --git a/src/components/user/SettingsButton.tsx b/src/components/user/SettingsButton.tsx
@@ -7,7 +7,7 @@ import TuneIcon from "@mui/icons-material/Tune";
 export const SettingsButton = () => {
 	const { showSettingsModal } = useAppContext();
 	return (
-		<IconButton aria-label="settings" onClick={showSettingsModal}>
+		<IconButton className="settings-btn" aria-label="settings" onClick={showSettingsModal}>
 			<TuneIcon sx={{ fontSize: "2rem" }} />
 		</IconButton>
 	);

diff --git a/src/components/user/UserButton.tsx b/src/components/user/UserButton.tsx
@@ -1,13 +1,18 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 import { SignedIn, SignedOut, UserButton as ClerkUserButton } from "@clerk/nextjs";
 import { useAppContext } from "@hooks";
 import Icon from "@mui/icons-material/AccountCircle";
 import { CircularProgress, IconButton } from "@mui/material";
 
 export const UserButton = () => {
+	const [isLoading, setIsLoading] = useState(true);
 	const { showSignInModal } = useAppContext();
 
+	useEffect(() => setIsLoading(false), []);
+
 	return (
 		<div className="user-btn">
 			<SignedOut>
@@ -16,9 +21,11 @@ export const UserButton = () => {
 				</IconButton>
 			</SignedOut>
 			<SignedIn>
-				<div className="user-btn-loading-spinner">
-					<CircularProgress />
-				</div>
+				{isLoading && (
+					<div className="user-btn-loading-spinner">
+						<CircularProgress />
+					</div>
+				)}
 				<ClerkUserButton
 					appearance={{
 						elements: {