Merge pull request #926 from scroll-tech/fix-style

fix: custom navbar bg color

.gitignore

@@ -24,4 +24,8 @@ yarn-error.log*
 
 .vscode
 .env
-.tool-versions
+.tool-versions
+
+
+.next
+next-env.d.ts

src/components/Header/constants.ts

@@ -184,6 +184,7 @@ const mainnetNavigations = [
             label: "Brand Kit",
             key: "brand kit",
             href: "/brand-kit",
+            rootKey: "resources",
           },
           {
             label: "Forum",

src/components/Header/desktop_header.tsx

@@ -13,21 +13,22 @@ import useShowWalletConnector from "@/hooks/useShowWalletToolkit"
 
 import Announcement from "./announcement"
 import { navigations } from "./constants"
-import useCheckNoBg from "./useCheckNoBg"
+import useCheckCustomNavBarBg from "./useCheckCustomNavBarBg"
 import useCheckTheme from "./useCheckTheme"
 
-const StyledBox = styled<any>(Stack, { shouldForwardProp: prop => prop !== "dark" })(({ theme, transparent, dark }) => ({
+const StyledBox = styled<any>(Stack, { shouldForwardProp: prop => prop !== "dark" && prop !== "bgColor" })(({ theme, bgColor, dark }) => ({
   position: "sticky",
   top: 0,
   width: "100%",
   zIndex: 10,
-  backgroundColor: transparent ? "transparent" : dark ? theme.palette.themeBackground.dark : theme.palette.themeBackground.light,
+  backgroundColor: bgColor ? theme.palette.themeBackground[bgColor] : dark ? theme.palette.themeBackground.dark : theme.palette.themeBackground.light,
 }))
 
-const StyledPopper = styled<any>(Popper, { shouldForwardProp: prop => prop !== "dark" })(({ theme, transparent, dark }) => ({
-  backgroundColor: transparent ? "transparent" : dark ? theme.palette.themeBackground.dark : theme.palette.themeBackground.light,
+const StyledPopper = styled<any>(Popper, { shouldForwardProp: prop => prop !== "dark" && prop !== "bgColor" })(({ theme, bgColor, dark }) => ({
+  backgroundColor: bgColor ? theme.palette.themeBackground[bgColor] : dark ? theme.palette.themeBackground.dark : theme.palette.themeBackground.light,
   padding: "0 2rem 1rem",
   marginLeft: "-2rem !important",
+  zIndex: theme.zIndex.appBar,
 }))
 
 const HeaderContainer = styled(Box)(({ theme }) => ({
@@ -157,9 +158,8 @@ const LinkStyledSubButton = styled<any>(NavLink, { shouldForwardProp: prop => pr
 
 const App = ({ currentMenu }) => {
   const { cx } = useStyles()
-  const noBg = useCheckNoBg()
+  const navbarBg = useCheckCustomNavBarBg()
   const { isDesktop } = useCheckViewport()
-
   const dark = useCheckTheme()
 
   const [checked, setChecked] = useState("")
@@ -181,7 +181,9 @@ const App = ({ currentMenu }) => {
   const renderSubMenuList = children => {
     return children.map((section, idx) => (
       <SectionList key={idx} dark={dark}>
-        <Typography sx={{ fontSize: "1.4rem", fontWeight: "bold", lineHeight: "3rem" }}>{section.label}</Typography>
+        <Typography sx={{ fontSize: "1.4rem", fontWeight: "bold", lineHeight: "3rem", color: dark ? "primary.contrastText" : "text.primary" }}>
+          {section.label}
+        </Typography>
         {section.children
           // only show sub menu item when the href is set
           ?.filter(subItem => subItem.href)
@@ -230,7 +232,7 @@ const App = ({ currentMenu }) => {
             inheritViewBox
           ></SvgIcon>
           {item.key === checked && (
-            <StyledPopper open={true} placement="bottom-start" anchorEl={anchorEl} transition transparent={noBg} dark={dark}>
+            <StyledPopper open={true} placement="bottom-start" anchorEl={anchorEl} transition bgColor={navbarBg} dark={dark}>
               {({ TransitionProps }) => (
                 <Fade {...TransitionProps}>
                   <SubMenuList onClick={handleMouseLeave}>{renderSubMenuList(item.children)}</SubMenuList>
@@ -266,7 +268,7 @@ const App = ({ currentMenu }) => {
   }
 
   return (
-    <StyledBox transparent={noBg} dark={dark}>
+    <StyledBox bgColor={navbarBg} dark={dark}>
       <Announcement />
       <Container>
         <HeaderContainer>

src/components/Header/mobile_header.tsx

@@ -11,7 +11,7 @@ import useShowWalletConnector from "@/hooks/useShowWalletToolkit"
 import Logo from "../ScrollLogo"
 import Announcement from "./announcement"
 import { navigations } from "./constants"
-import useCheckNoBg from "./useCheckNoBg"
+import useCheckCustomNavBarBg from "./useCheckCustomNavBarBg"
 import useCheckTheme from "./useCheckTheme"
 
 const NavStack = styled(Stack)(({ theme }) => ({
@@ -131,7 +131,7 @@ const ExpandMoreIcon = styled(ExpandMore)(({ theme }) => ({
 }))
 
 const App = ({ currentMenu }) => {
-  const noBg = useCheckNoBg()
+  const navbarBg = useCheckCustomNavBarBg()
   const showWalletConnector = useShowWalletConnector()
 
   const dark = useCheckTheme()
@@ -231,7 +231,7 @@ const App = ({ currentMenu }) => {
   return (
     <Box
       className={open ? "active" : ""}
-      sx={{ backgroundColor: noBg && !open ? "transparent" : dark ? "themeBackground.dark" : "themeBackground.light" }}
+      sx={{ backgroundColor: navbarBg && !open ? `themeBackground[${navbarBg}]` : dark ? "themeBackground.dark" : "themeBackground.light" }}
     >
       <Announcement />
       <NavStack direction="row" justifyContent="space-between" alignItems="center">

src/components/Header/useCheckCustomNavBarBg.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from "react"
+import { useLocation } from "react-router-dom"
+
+import useScrollTrigger from "@mui/material/useScrollTrigger"
+
+const TRANSPARENT_BG_PAGE_LIST = ["/story"]
+// themeBackground
+const CUSTOM_BG_PAGE_MAP = {
+  "/brand-kit": "brand",
+  "/join-us": "normal",
+}
+
+const useCheckCustomNavBarBg = () => {
+  const isScrolling = useScrollTrigger({ disableHysteresis: true, threshold: 10 })
+
+  const { pathname } = useLocation()
+  const isNoBgPage = useMemo(() => TRANSPARENT_BG_PAGE_LIST.includes(pathname), [pathname])
+
+  const navbarBg = useMemo(() => {
+    if (isNoBgPage) {
+      return isScrolling ? "" : "transparent"
+    }
+    return CUSTOM_BG_PAGE_MAP[pathname] || ""
+  }, [isNoBgPage, isScrolling, pathname])
+
+  return navbarBg
+}
+
+export default useCheckCustomNavBarBg

src/constants/brandKit.ts

@@ -29,6 +29,7 @@ export const brandAssets = [
     versions: [
       {
         title: "Full coloured logo on light background",
+        type: "light",
         cover: FullColouredLogoSvg,
         coverClass: "LogoDemo",
         formats: {
@@ -39,6 +40,7 @@ export const brandAssets = [
       },
       {
         title: "White logo on dark background",
+        type: "dark",
         cover: InvertedLogoSvg,
         coverClass: "LogoDemo",
         formats: {

src/pages/brand-kit/Assets/AssetCard.tsx

@@ -146,6 +146,10 @@ const useStyles = makeStyles<any>()((theme, { type, name }) => ({
     gridArea: "cover",
   },
 
+  coverdark: {
+    backgroundColor: theme.palette.themeBackground.dark,
+  },
+
   sampleImage0: {
     gridArea: "sample1",
     width: "100%",
@@ -249,9 +253,9 @@ const AssetCard = props => {
       <Typography className={classes.name}>{name}</Typography>
       <Box className={classes.content}>
         {versions.map((version, index) => (
-          <Box className={cx(classes.detail, classes[type])} sx={{ marginTop: !index || type !== "largeImage" ? 0 : ["4rem", "8rem"] }}>
+          <Box key={index} className={cx(classes.detail, classes[type])} sx={{ marginTop: !index || type !== "largeImage" ? 0 : ["4rem", "8rem"] }}>
             {version.title ? <Typography className={classes.versionTitle}>{version.title}</Typography> : null}
-            <Box className={cx(classes.cover, classes[version.coverClass])}>
+            <Box className={cx(classes.cover, classes[version.coverClass], classes[`cover${version.type}`])}>
               <img alt="" src={version.cover} />
             </Box>
             <Box className={classes.downloadBox}>

src/pages/brand-kit/Assets/index.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => ({
   float: {
     width: "calc(50% - 1.5rem)",
     float: "right",
-    "&:nth-child(2n)": {
+    "&:nth-of-type(2n)": {
       float: "left",
     },
     [theme.breakpoints.down("md")]: {
@@ -25,8 +25,8 @@ const Assets = props => {
   return (
     <SectionWrapper transparent sx={{ pt: ["0"] }}>
       {brandAssets.map((item, index) => (
-        <SuccessionToView threshold={0.1} className={item.type === "onlyOneImage" ? classes.float : ""}>
-          <SuccessionItem key={index}>
+        <SuccessionToView key={index} threshold={0.1} className={item.type === "onlyOneImage" ? classes.float : ""}>
+          <SuccessionItem>
             <AssetCard data={item}></AssetCard>
           </SuccessionItem>
         </SuccessionToView>

src/pages/brand-kit/index.tsx

@@ -7,10 +7,8 @@ import Header from "./Header"
 
 const useStyles = makeStyles()(theme => ({
   container: {
-    marginTop: "-6.5rem",
-    paddingTop: "6.5rem",
     overflow: "hidden",
-    background: "#FFEEDA",
+    background: theme.palette.themeBackground.brand,
   },
 }))
 

src/theme/options.ts

@@ -59,6 +59,8 @@ export const paletteOptions = {
     highlight: "#FFDEB5",
     optionHightlight: "#FFE6C8",
     tag: "#262626",
+    transparent: "transparent",
+    brand: "#FFEEDA",
   },
   border: {
     main: "#000",

src/types/index.d.ts

@@ -61,6 +61,8 @@ declare module "@mui/material/styles" {
       highlight: string
       optionHightlight: string
       tag: string
+      transparent: string
+      brand: string
     }
     link: {
       main: string
@@ -116,6 +118,8 @@ declare module "@mui/material/styles" {
       highlight: string
       optionHightlight: string
       tag: string
+      transparent: string
+      brand: string
     }
     link?: {
       main?: string