From 46cc6fb2861b62f4534c9a8209a478d72dcc21b1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:06:02 -0700
Subject: [PATCH 1/3] feat: migrate nav element, add border-b

---
 src/components/Nav/index.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
index da8f00c4202..10c79de2de8 100644
--- a/src/components/Nav/index.tsx
+++ b/src/components/Nav/index.tsx
@@ -8,8 +8,6 @@ import Search from "@/components/Search"
 
 import { isDesktop } from "@/lib/utils/isDesktop"
 
-import { NAV_PY } from "@/lib/constants"
-
 import DesktopNavMenu from "./Desktop"
 import Menu from "./Menu"
 import { useNav } from "./useNav"
@@ -30,17 +28,10 @@ const Nav = () => {
 
   return (
     <Box position="sticky" top={0} zIndex="sticky" width="full">
-      <Flex
+      <nav
+        className="flex h-19 justify-center border-b border-b-disabled bg-background p-4 xl:px-8"
         ref={navWrapperRef}
-        as="nav"
         aria-label={t("nav-primary")}
-        bg="background.base"
-        borderBottom="1px"
-        borderColor="rgba(0, 0, 0, 0.1)"
-        height="4.75rem"
-        justifyContent="center"
-        py={NAV_PY}
-        px={{ base: 4, xl: 8 }}
       >
         <Flex
           alignItems={{ base: "center", md: "normal" }}
@@ -94,7 +85,7 @@ const Nav = () => {
             </Flex>
           </Flex>
         </Flex>
-      </Flex>
+      </nav>
     </Box>
   )
 }

From 0e92088b0c8b7383075e7f2c91646b036f98a584 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:35:28 -0700
Subject: [PATCH 2/3] fix: rm focus styling

consistent with other nav items
---
 src/components/Nav/Desktop/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index 92214ca540c..7f02b966e41 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -22,6 +22,7 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
 
   const ThemeIcon = useColorModeValue(<MdBrightness2 />, <MdWbSunny />)
   const themeIconAriaLabel = useColorModeValue(
+    // TODO: add i18n support
     "Switch to Dark Theme",
     "Switch to Light Theme"
   )
@@ -65,7 +66,6 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
           },
         }}
         _hover={desktopHoverFocusStyles}
-        _focus={desktopHoverFocusStyles}
         onClick={toggleColorMode}
       />
 

From 5d551cb856dbe8cb1e4065adbd465af17cd5754c Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:49:55 -0700
Subject: [PATCH 3/3] fix: nav button styling consistency

---
 src/components/Nav/Desktop/index.tsx   | 44 ++++++++++++--------------
 src/components/Search/SearchButton.tsx |  2 +-
 src/components/Search/index.tsx        |  2 +-
 src/styles/docsearch.css               |  4 +--
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index 7f02b966e41..a16e131116b 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -5,10 +5,11 @@ import { BsTranslate } from "react-icons/bs"
 import { MdBrightness2, MdWbSunny } from "react-icons/md"
 import { HStack, useColorModeValue, useEventListener } from "@chakra-ui/react"
 
-import { IconButton } from "@/components/Buttons"
 import LanguagePicker from "@/components/LanguagePicker"
 import { Button } from "@/components/ui/buttons/Button"
 
+import { cn } from "@/lib/utils/cn"
+
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
 type DesktopNavMenuProps = {
@@ -20,21 +21,12 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
   const { locale } = useRouter()
   const languagePickerRef = useRef<HTMLButtonElement>(null)
 
-  const ThemeIcon = useColorModeValue(<MdBrightness2 />, <MdWbSunny />)
   const themeIconAriaLabel = useColorModeValue(
-    // TODO: add i18n support
+    // TODO: Add i18n support
     "Switch to Dark Theme",
     "Switch to Light Theme"
   )
 
-  const desktopHoverFocusStyles = {
-    "& > svg": {
-      transform: "rotate(10deg)",
-      color: "primary.hover",
-      transition: "transform 0.5s, color 0.2s",
-    },
-  }
-
   /**
    * Adds a keydown event listener to toggle color mode (ctrl|cmd + \)
    * or open the language picker (\).
@@ -54,20 +46,26 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
 
   return (
     <HStack hideBelow="md" gap="0">
-      <IconButton
-        icon={ThemeIcon}
-        aria-label={themeIconAriaLabel}
+      <Button
         variant="ghost"
         isSecondary
-        px={{ base: "2", xl: "3" }}
-        sx={{
-          "& > svg": {
-            transition: "transform 0.5s, color 0.2s",
-          },
-        }}
-        _hover={desktopHoverFocusStyles}
+        className="group p-2 hover:!text-primary-hover xl:p-3"
         onClick={toggleColorMode}
-      />
+        aria-label={themeIconAriaLabel}
+      >
+        <MdBrightness2
+          className={cn(
+            "dark:hidden",
+            "transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500"
+          )}
+        />
+        <MdWbSunny
+          className={cn(
+            "hidden dark:block",
+            "transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500"
+          )}
+        />
+      </Button>
 
       {/* Locale-picker menu */}
       <LanguagePicker>
@@ -75,7 +73,7 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
           name={DESKTOP_LANGUAGE_BUTTON_NAME}
           ref={languagePickerRef}
           variant="ghost"
-          className="gap-0 px-2 text-body transition-colors duration-200 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover xl:px-3 [&>svg]:transition-transform [&>svg]:duration-500 [&_svg]:hover:rotate-12"
+          className="gap-0 px-2 text-body transition-colors duration-500 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover xl:px-3 [&_svg]:transition-transform [&_svg]:duration-500 [&_svg]:hover:rotate-12"
         >
           <BsTranslate className="me-2 align-middle text-2xl" />
           <span className="hidden lg:inline-block">
diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx
index 19ae404f87c..a475d2111de 100644
--- a/src/components/Search/SearchButton.tsx
+++ b/src/components/Search/SearchButton.tsx
@@ -12,7 +12,7 @@ const SearchButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Button
         ref={ref}
         variant="ghost"
-        className="me-3 border border-disabled hover:border-primary-hover"
+        className="group me-3 border border-disabled hover:border-primary-hover"
         {...props}
         asChild
       >
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 1ff7b8e88b3..8e8f74b7e74 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -59,7 +59,7 @@ const Search = forwardRef<HTMLButtonElement, Props>(
         <div className="block xl:hidden">
           <Button
             ref={mergedButtonRefs}
-            className="px-2 transition-transform duration-200 ease-in-out hover:rotate-6 hover:text-primary"
+            className="px-2 transition-transform duration-200 hover:rotate-12 hover:!text-primary focus:text-primary"
             variant="ghost"
             isSecondary
             onClick={() => {
diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
index 91f6906a80d..8fda310acde 100644
--- a/src/styles/docsearch.css
+++ b/src/styles/docsearch.css
@@ -7,12 +7,12 @@
 }
 
 .DocSearch-Button-Container svg {
-  @apply size-3.5;
+  @apply size-3.5 group-hover:rotate-12 transition-transform duration-500 group-hover:transition-transform group-hover:duration-500;
 }
 
 .DocSearch-Search-Icon,
 .DocSearch-Button-Placeholder {
-  @apply text-body;
+  @apply text-body group-hover:text-primary-hover;
 }
 
 .DocSearch-Button-Placeholder {