brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed margin causing app to scroll when it shouldn't

Browse source
This commit is contained in:
Carter 2025-04-22 12:59:10 -06:00
parent e56c5f0781
commit ffa060cee8
3 changed files with 73 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

130
src/app/Header.tsx
View file

@ -11,71 +11,73 @@ import SideNavigator from "navigation/SideNavigator";
import { useState } from "react";
import BottomNavigator from "navigation/BottomNavigator";
const useStyles = makeStyles((theme: Theme) => ({
const useStyles = makeStyles((theme: Theme) => {
return ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
backgroundImage: "none", // This prevents de-saturation of header in dark mode
backgroundColor: "#272727"
},
toolbar: {
marginLeft: theme.spacing(0.5),
[theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(1.5)
}
},
buttonContainer: {
marginRight: theme.spacing(0.5),
[theme.breakpoints.up("md")]: {
marginRight: theme.spacing(1.5)
},
color: getSignatureAccentColour() + " !important"
},
button: {
color: getSignatureAccentColour() + " !important"
},
hide: {
display: "none"
},
logoContainer: {
display: "flex",
alignItems: "center",
height: "56px",
justifyContent: "flex-start",
[theme.breakpoints.up("md")]: {
height: "64px"
}
},
logoLink: {
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "5px",
backgroundColor: hasTransparentLogoBG()
? ""
: theme.palette.mode === "light"
? "#fff"
: "#0000"
},
HeaderLogo: {
objectFit: "cover",
height: "56px",
width: "auto",
padding: theme.spacing(1),
[theme.breakpoints.up("md")]: {
height: "64px"
}
},
appBarRight: {
display: "flex",
flexDirection: "row",
marginLeft: theme.spacing(2),
marginRight: theme.spacing(1),
[theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(3),
marginRight: theme.spacing(2)
}
},
}));
zIndex: theme.zIndex.drawer + 1,
backgroundImage: "none", // This prevents de-saturation of header in dark mode
backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
},
toolbar: {
marginLeft: theme.spacing(0.5),
[theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(1.5)
}
},
buttonContainer: {
marginRight: theme.spacing(0.5),
[theme.breakpoints.up("md")]: {
marginRight: theme.spacing(1.5)
},
color: getSignatureAccentColour() + " !important"
},
button: {
color: getSignatureAccentColour() + " !important"
},
hide: {
display: "none"
},
logoContainer: {
display: "flex",
alignItems: "center",
height: "56px",
justifyContent: "flex-start",
[theme.breakpoints.up("md")]: {
height: "64px"
}
},
logoLink: {
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "5px",
backgroundColor: hasTransparentLogoBG()
? ""
: theme.palette.mode === "light"
? "#fff"
: "#0000"
},
HeaderLogo: {
objectFit: "cover",
height: "56px",
width: "auto",
padding: theme.spacing(1),
[theme.breakpoints.up("md")]: {
height: "64px"
}
},
appBarRight: {
display: "flex",
flexDirection: "row",
marginLeft: theme.spacing(2),
marginRight: theme.spacing(1),
[theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(3),
marginRight: theme.spacing(2)
}
}
})
});
export default function Header() {

14
src/app/UserWrapper.tsx
View file

@ -22,16 +22,16 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>
const useStyles = makeStyles((theme: Theme) => ({
appContent: {
marginTop: 56,
marginBottom: 56,
marginLeft: "0px",
paddingTop: 56,
paddingBottom: 56,
paddingLeft: "0px",
[theme.breakpoints.up("sm")]: {
marginTop: 64,
marginBottom: 0
paddingTop: 64,
paddingBottom: 0,
},
[theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(9)
}
paddingLeft: theme.spacing(9)
},
},
container: {
backgroundColor: theme.palette.background.default,