Merge pull request #47 from the-collab-lab/sign-out-btn-style

Position of sign in/out button
the-collab-lab · Apr 5, 2024 · 427e415 · 427e415
2 parents 22ee641 + df0b3c9
commit 427e415
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
@@ -9,13 +9,10 @@ import { useAuth } from '../api';
 export function SingleList({ name, path, setListPath }) {
 	const { user } = useAuth();
 
-	const navigate = useNavigate();
-
 	function handleClick() {
 		setListPath(path);
-    navigate("list")
 	}
-  
+
 	async function deleteSelectedList() {
 		if (
 			window.confirm(
@@ -34,13 +31,12 @@ export function SingleList({ name, path, setListPath }) {
 	return (
 		<div className="SingleList">
 			<li>
-				<button onClick={handleClick}>{name}</button>
-				<button aria-label={`Delete ${name}`} onClick={deleteSelectedList}>
-					<FontAwesomeIcon icon={faTrashCan} />
-				</button>
 				<Link to="/list" className="list-link" onClick={handleClick}>
 					{name}
 				</Link>
+				<button aria-label={`Delete ${name}`} onClick={deleteSelectedList}>
+					<FontAwesomeIcon icon={faTrashCan} />
+				</button>
 			</li>
 		</div>
 	);

diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -28,6 +28,16 @@
 	margin: 0;
 }
 
+.sign-in {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 1em;
+}
+
+.sign-in-btn {
+	font-size: 1.2em;
+}
+
 .Layout-main {
 	margin: 0 auto;
 	padding-block: 0;
@@ -48,7 +58,6 @@
 
 @media screen and (min-width: 850px) {
 	.home-links {
-		/* width: auto; */
 		flex-direction: row;
 		padding-left: 0.7em;
 	}

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -19,8 +19,10 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
+					<div className="sign-in">
+						{!!user ? <SignOutButton /> : <SignInButton />}
+					</div>
 					<h1>Smart shopping list</h1>
-					{!!user ? <SignOutButton /> : <SignInButton />}
 					<Flex justify="end" px="3">
 						<DarkModeToggle
 							onChange={toggleDarkMode}