added close button to new bag modal

cdleveille · Jun 3, 2024 · 72d3b45 · 72d3b45
1 parent 59e6e37
commit 72d3b45
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -256,10 +256,11 @@ h1 {
 }
 
 .add-bag {
+	position: relative;
 	background-color: white;
 	width: calc(100vw - 2rem);
 	max-width: 32rem;
-	padding: 3rem 1rem 3rem 1rem;
+	padding: 3rem 1rem 3.5rem 1rem;
 	border-radius: 1rem;
 	border: 2px solid #757575;
 	min-width: 240px;

diff --git a/src/components/NewBag.tsx b/src/components/NewBag.tsx
@@ -7,7 +7,8 @@ import { useEffect, useRef, useState } from "react";
 import { createBag } from "@actions";
 import { useAuth } from "@clerk/nextjs";
 import AddIcon from "@mui/icons-material/Add";
-import { Button, Stack, TextField } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Button, IconButton, Stack, TextField } from "@mui/material";
 
 import type { Bag, NewBagProps } from "@types";
 
@@ -59,6 +60,13 @@ export const NewBag = ({ backOnSubmit }: NewBagProps) => {
 			onClick={event => event.stopPropagation()}
 		>
 			<Stack direction="column" spacing="3rem" justifyContent="center" alignItems="center" className="add-bag">
+				{backOnSubmit && (
+					<div style={{ position: "absolute", top: "0.75rem", right: "0.75rem" }}>
+						<IconButton aria-label="close" onClick={() => router.back()}>
+							<CloseIcon fontSize="large" />
+						</IconButton>
+					</div>
+				)}
 				<div className="add-bag-title">New Bag</div>
 				<div
 					style={{