Fix Nav styles to match DS header

src/@chakra-ui/gatsby-plugin/components/Button.ts

@@ -10,13 +10,10 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
  */
 const ICON_SELECTOR = "& svg"
 
-const getBaseColor = (isSecondary: boolean) =>
-  !isSecondary ? "primary.base" : "body.base"
-
 const baseStyle = defineStyle((props) => ({
   borderRadius: "base",
   border: "1px",
-  color: getBaseColor(props.isSecondary),
+  color: "primary.base",
   lineHeight: "1.6",
   transitionProperty: "common",
   transitionDuration: "normal",
@@ -58,10 +55,20 @@ const variantOutline = defineStyle({
   },
 })
 
+const variantSecondaryOutline = defineStyle({
+  ...variantOutline,
+  color: "body.base",
+})
+
 const variantGhost = {
   borderColor: "transparent",
 }
 
+const variantSecondaryGhost = {
+  ...variantGhost,
+  color: "body.base",
+}
+
 const variantLink = defineStyle({
   borderColor: "transparent",
   color: "primary.base",
@@ -92,27 +99,29 @@ const variantIcon = defineStyle({
 })
 
 const sizes = {
-  md: {
-    py: "2 !important",
-    px: "4 !important",
+  md: defineStyle({
+    py: "2",
+    px: "4",
     [ICON_SELECTOR]: {
       fontSize: "2xl",
     },
-  },
-  sm: {
+  }),
+  sm: defineStyle({
     fontSize: "xs",
-    py: "1.5 !important",
-    px: "2 !important",
+    py: "1.5",
+    px: "2",
     [ICON_SELECTOR]: {
       fontSize: "md",
     },
-  },
+  }),
 }
 
 const variants = {
   solid: variantSolid,
   outline: variantOutline,
+  secondaryOutline: variantSecondaryOutline,
   ghost: variantGhost,
+  secondaryGhost: variantSecondaryGhost,
   link: variantLink,
   icon: variantIcon,
 }

src/components/Button/index.tsx

@@ -2,17 +2,16 @@ import React from "react"
 import {
   Button as ChakraButton,
   ButtonProps,
-  useStyleConfig,
+  forwardRef,
 } from "@chakra-ui/react"
 
 import { scrollIntoView } from "../../utils/scrollIntoView"
 
 export interface IProps extends ButtonProps {
   toId?: string
-  isSecondary?: boolean
 }
 
-const Button: React.FC<IProps> = ({ toId, isSecondary, onClick, ...props }) => {
+const Button = forwardRef<IProps, "button">(({ toId, onClick, ...props }) => {
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (toId) {
       scrollIntoView(toId)
@@ -21,14 +20,7 @@ const Button: React.FC<IProps> = ({ toId, isSecondary, onClick, ...props }) => {
     onClick?.(e)
   }
 
-  /**
-   *  Prevent React warning that does not recognize `isSecondary` on DOM
-   *  while still sending prop to the theme config
-   */
-  const styles = useStyleConfig("Button", { ...props, isSecondary })
-
-  // `styles` object sent to `sx` prop per convention
-  return <ChakraButton onClick={handleOnClick} sx={styles} {...props} />
-}
+  return <ChakraButton onClick={handleOnClick} {...props} />
+})
 
 export default Button

src/components/ButtonLink.tsx

@@ -3,30 +3,17 @@ import { Button, ButtonProps, useStyleConfig } from "@chakra-ui/react"
 
 import Link, { IBaseProps as ILinkProps } from "./Link"
 
-export interface IProps extends ILinkProps, ButtonProps {
-  isSecondary?: boolean
-}
+export interface IProps extends ILinkProps, ButtonProps {}
 
-const ButtonLink: React.FC<IProps> = ({ children, isSecondary, ...props }) => {
-  /**
-   *  Prevent React warning that does not recognize `isSecondary` on DOM
-   *  while still sending prop to the theme config
-   */
-  const styles = useStyleConfig("Button", {
-    ...props,
-    isSecondary,
-  })
+const ButtonLink: React.FC<IProps> = ({ children, ...props }) => {
+  const buttonStyles = useStyleConfig("Button", { ...props })
 
   return (
     <Button
       as={Link}
       activeStyle={{}}
-      // `styles` object sent to `sx` prop per convention
-      sx={{
-        ...styles,
-        textDecoration: "none",
-        _hover: { ...styles["_hover"], textDecoration: "none" },
-      }}
+      textDecoration="none"
+      _hover={{ ...buttonStyles["_hover"], textDecoration: "none" }}
       {...props}
     >
       {children}

src/components/Nav/Menu.tsx

@@ -1,19 +1,19 @@
 import React from "react"
 import { useI18next } from "gatsby-plugin-react-i18next"
-import { Flex, List } from "@chakra-ui/react"
+import { Flex, FlexProps, List } from "@chakra-ui/react"
 
 import NavDropdown from "./Dropdown"
 import { getDirection } from "../../utils/translations"
 
 import { Lang } from "../../utils/languages"
 import { ISections } from "./types"
 
-export interface IProps {
+export interface IProps extends FlexProps {
   path: string
   sections: ISections
 }
 
-const Menu: React.FC<IProps> = ({ path, sections }) => {
+const Menu: React.FC<IProps> = ({ path, sections, ...props }) => {
   const { language } = useI18next()
   const direction = getDirection(language as Lang)
   const shouldShowSubNav = path.includes("/developers/")
@@ -23,7 +23,13 @@ const Menu: React.FC<IProps> = ({ path, sections }) => {
   const [start, basics, protocol] = learn.items
 
   return (
-    <Flex as={List} alignItems="center" m={0} gap={{ base: 3, xl: 6 }}>
+    <Flex
+      as={List}
+      alignItems="center"
+      m={0}
+      gap={{ base: 3, xl: 6 }}
+      {...props}
+    >
       <NavDropdown section={useEthereum} hasSubNav={shouldShowSubNav}>
         {useEthereum.items.map((item, index) => (
           <NavDropdown.Item

src/components/Nav/Mobile.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment, ReactNode, RefObject } from "react"
 import {
   Box,
-  IconButton,
   Icon,
   Drawer,
   DrawerOverlay,
@@ -12,17 +11,18 @@ import {
   forwardRef,
   DrawerFooter,
   Flex,
+  ButtonProps,
 } from "@chakra-ui/react"
 import { MdBrightness2, MdLanguage, MdSearch, MdWbSunny } from "react-icons/md"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 import { motion } from "framer-motion"
 
 import Link from "../Link"
+import Button from "../Button"
 import Translation from "../Translation"
 
 import { ISections } from "./types"
 import { ChildOnlyProp } from "../../types"
-import { SearchIconButton } from "../Search"
 
 const NavListItem = forwardRef<{ "aria-label"?: string }, typeof List>(
   (props, ref) => <ListItem ref={ref} mb={12} {...props} />
@@ -104,7 +104,7 @@ const glyphPathVariants = {
   },
 }
 
-export interface IProps {
+export interface IProps extends ButtonProps {
   isMenuOpen: boolean
   isDarkTheme: boolean
   toggleMenu: () => void
@@ -124,6 +124,7 @@ const MobileNavMenu: React.FC<IProps> = ({
   linkSections,
   fromPageParameter,
   drawerContainerRef,
+  ...props
 }) => {
   const { t } = useTranslation()
 
@@ -132,54 +133,44 @@ const MobileNavMenu: React.FC<IProps> = ({
   }
 
   return (
-    <Box
-      display={{ base: "flex", lg: "none" }}
-      gap={2}
-      sx={{ svg: { fill: "body.base" } }}
-    >
-      <SearchIconButton
-        onClick={toggleSearch}
-        aria-label={t("aria-toggle-search-button")}
-        size="sm"
-      />
-      <IconButton
-        icon={
-          <Icon
-            viewBox="0 0 24 40"
-            pointerEvents={isMenuOpen ? "none" : "auto"}
-            mx={0.5}
-            width={6}
-            height={10}
-            position="relative"
-            strokeWidth="2px"
-            zIndex={100}
-            _hover={{
-              color: "primary.base",
-              "& > path": {
-                stroke: "primary.base",
-              },
-            }}
-            sx={{
-              "& > path": {
-                stroke: "text",
-                fill: "none",
-              },
-            }}
-          >
-            <motion.path
-              variants={glyphPathVariants}
-              initial={false}
-              animate={isMenuOpen ? "open" : "closed"}
-            />
-          </Icon>
-        }
+    <>
+      <Button
         onClick={toggleMenu}
         aria-label={t("aria-toggle-search-button")}
-        variant="icon"
-        size="sm"
+        variant="secondaryGhost"
+        px={0}
         zIndex={2000}
-        _hover={{ svg: { fill: "primary.base" } }}
-      />
+        {...props}
+      >
+        <Icon
+          viewBox="0 0 24 40"
+          pointerEvents={isMenuOpen ? "none" : "auto"}
+          mx={0.5}
+          width={6}
+          height={10}
+          position="relative"
+          strokeWidth="2px"
+          zIndex={100}
+          _hover={{
+            color: "primary.base",
+            "& > path": {
+              stroke: "primary.base",
+            },
+          }}
+          sx={{
+            "& > path": {
+              stroke: "text",
+              fill: "none",
+            },
+          }}
+        >
+          <motion.path
+            variants={glyphPathVariants}
+            initial={false}
+            animate={isMenuOpen ? "open" : "closed"}
+          />
+        </Icon>
+      </Button>
       <Drawer
         portalProps={{ containerRef: drawerContainerRef }}
         isOpen={isMenuOpen}
@@ -299,7 +290,7 @@ const MobileNavMenu: React.FC<IProps> = ({
           </DrawerFooter>
         </DrawerContent>
       </Drawer>
-    </Box>
+    </>
   )
 }