Merge pull request #48 from the-collab-lab/gl-lc-ag-km-designing-header

Designing header
the-collab-lab · Mar 29, 2024 · a065465 · a065465
2 parents 5f44875 + b366614
commit a065465
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/public/img/header-img.png b/public/img/header-img.png
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -31,8 +31,11 @@ export function NavBar() {
 	const [value, setValue] = React.useState('/');
 
 	return (
-		<AppBar position="static">
-			<Container maxWidth="xl">
+		<AppBar
+			position="static"
+			sx={{ backgroundColor: '#003780', color: '#fdeecd' }}
+		>
+			<Container maxWidth="xl" className="nav-bar">
 				<Toolbar variant="dense" disableGutters>
 					{/*Logo and app name for medium or larger screens*/}
 					<SvgIcon

diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -19,22 +19,39 @@
 
 .Layout-header {
 	background-color: var(--color-bg);
-	padding-bottom: 0.5rem;
-	padding-top: max(env(safe-area-inset-top), 1rem);
+	/* padding-bottom: 0.5rem;
+	padding-top: max(env(safe-area-inset-top), 1rem); */
+	padding: 0;
 	text-align: center;
+	margin: 0;
+	padding: 15rem;
+	background-color: #fdeecd;
+	color: #003780;
+	background-image: url('/public/img/header-img.png');
+	background-position: center;
+	background-size: 30%;
+	background-repeat: no-repeat;
 }
 
-.Layout-header > h1 {
+/* .Layout-header > h1 {
 	margin: 0;
-}
+	padding:100px;
+	background-color: #FDEECD;
+	color: #003780;
+	background-image:url("/public/img/header-img.png");
+	background-position: center;
+	background-size: 30%;
+	background-repeat: no-repeat;
+
+} */
 
 .Layout-main {
 	margin: 0 auto;
 	padding-block: 0;
 	padding-block-end: 6.26rem;
 	width: min(72ch, 100%);
 }
-
+/* 
 .Nav {
 	background-color: var(--color-bg);
 	border-top: 1px solid var(--color-border);
@@ -70,4 +87,4 @@
 .Nav-link.active {
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
-}
+} */
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -19,15 +19,11 @@ export function Layout() {
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header">
-					<h1>SwiftShop</h1>
-
-					<NavBar />
-
-					<main className="Layout-main">
-						<Outlet />
-					</main>
-				</header>
+				<header className="Layout-header"></header>
+				<NavBar />
+				<main className="Layout-main">
+					<Outlet />
+				</main>
 			</div>
 		</>
 	);