Merge pull request #144 from tahmid-saj/dev-nutrition-tracker-styling

adjusting app bar
tahmid-saj · Jun 21, 2024 · c160332 · c160332
2 parents a0baccd + bf6bc30
commit c160332
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 14 deletions.
diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx b/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
@@ -151,8 +151,11 @@ export default function HiddenDrawer() {
   );
 
   return (
-    <div>
-      <Button onClick={toggleDrawer(true)}>
+    <div className="nutrition-tracker-app-bar">
+      <Button sx={{ position: "fixed", top: "0", width: "100%", justifyContent: "left", 
+        backgroundColor: COLOR_CODES.general["9"] 
+        }}
+        onClick={toggleDrawer(true)}>
         <div className='nutrition-tracker-title'>
           <MenuIcon/>
           <Typography sx={{ marginLeft: "10px", color: COLOR_CODES.general["0"] }} variant="h6">

diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss b/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
@@ -6,4 +6,8 @@ ion-icon {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.nutrition-tracker-app-bar {
+  cursor: pointer;
 }
diff --git a/...d-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx b/...d-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -57,7 +57,7 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="calories-burned-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <div className="calories-burned-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Calories burned calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>

diff --git a/src/pages/shared/home/home.component.jsx b/src/pages/shared/home/home.component.jsx
@@ -11,7 +11,7 @@ import { selectCurrentUser } from "../../../store/shared/user/user.selector.js";
 import { COLOR_CODES, NAV_LINKS } from "../../../utils/constants/shared.constants.js";
 
 const styles = {
-  width: 350,
+  width: 360,
   height: 450,
   backgroundColor: COLOR_CODES.general["0"],
   marginBottom: "6%"
@@ -79,8 +79,8 @@ const Home = () => {
   }
 
   return (
-    <Fragment>
-      <div className="container">
+    <div className="container">
+      <HomeContainer>
         <div className="row justify-content-center align-items-center">
           <div className="col-sm-12 col-md-6 col-lg-4">
             <MediaCard styles={ styles } header={ homeCardContent.chatbot.header } imageUrl={ homeCardContent.chatbot.imageUrl } 
@@ -127,8 +127,8 @@ const Home = () => {
             imageTitle={ homeCardContent.summary.header } path={ homeCardContent.summary.path } content={ homeCardContent.summary.description }></MediaCard>
           </div>
         </div>
-      </div>
-    </Fragment>
+      </HomeContainer>
+    </div>
   );
 };
 

diff --git a/src/pages/shared/home/home.styles.jsx b/src/pages/shared/home/home.styles.jsx
@@ -1,8 +1,7 @@
 import styled from "styled-components"
 
 export const HomeContainer = styled.div`
-  display: flex;
+  display: block;
   justify-content: center;
   align-items: center;
-  margin: 3%;
 `
diff --git a/src/routes/shared/navigation/navigation.component.jsx b/src/routes/shared/navigation/navigation.component.jsx
@@ -2,7 +2,7 @@ import { Fragment, useContext, useState } from "react";
 import { Outlet, Link, useNavigate } from "react-router-dom";
 
 import "./navigation.styles.jsx";
-import { OutletContainer } from "./navigation.styles.jsx";
+import { DrawerContainer } from "./navigation.styles.jsx";
 
 import { signOutUser } from "../../../utils/firebase/firebase.utils";
 import MiniDrawer from "../../../components/shared/mui/drawer/drawer.component.jsx";
@@ -40,7 +40,9 @@ const Navigation = () => {
         }
       >
       </MiniDrawer> */}
-      <HiddenDrawer></HiddenDrawer>
+      <DrawerContainer>
+        <HiddenDrawer></HiddenDrawer>
+      </DrawerContainer>
 
       {/* <div className="navigation">
         <Link className="logo" to="/"

diff --git a/src/routes/shared/navigation/navigation.styles.jsx b/src/routes/shared/navigation/navigation.styles.jsx
@@ -1,5 +1,6 @@
 import styled from "styled-components"
+import { COMMON_SPACING } from "../../../utils/constants/shared.constants"
 
-export const OutletContainer = styled.div`
-  padding-left: 3%;
+export const DrawerContainer = styled.div`
+  margin-bottom: 60px;
 `
diff --git a/src/utils/constants/shared.constants.js b/src/utils/constants/shared.constants.js
@@ -204,6 +204,7 @@ export const COMMON_SPACING = {
   screenWidthOnDrawerClose: 500,
   navBarWidth: 225,
   navBarMargin: 230,
+  hiddenAppBarMarginTop: 60,
   pageContent: {
     margin: {
       top: "0%",