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%",