make the Dress to Impress text clickable

oops, right, it was not part of the link! Now it is. Feels much better :)

src/app/GlobalHeader.js

@@ -10,20 +10,9 @@ import HomeLinkIcon from "../images/home-link-icon.png";
 import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
 
 function GlobalHeader() {
-  const { pathname } = useLocation();
-  const isHomePage = pathname === "/";
-
   return (
     <Box display="flex" alignItems="center" flexWrap="wrap">
-      <HomeLink showArrow={!isHomePage} marginRight="2" />
+      <HomeLink marginRight="2" />
-      <Box
-        display="flex"
-        alignItems="center"
-        opacity={isHomePage ? "0" : "1"}
-        transition="0.2s opacity"
-      >
-        <DressToImpressTitle />
-      </Box>
       <Box marginLeft="auto">
         <UserNavBarSection />
       </Box>
@@ -31,26 +20,34 @@ function GlobalHeader() {
   );
 }
 
-function HomeLink({ showArrow, ...props }) {
+function HomeLink(props) {
+  const { pathname } = useLocation();
+  const isHomePage = pathname === "/";
+
   return (
     <Box
       as={Link}
       to="/"
       display="flex"
       alignItems="center"
-      position="relative"
       role="group"
+      {...props}
+    >
+      <Box
+        display="flex"
+        alignItems="center"
+        marginRight="2"
+        position="relative"
         transition="all 0.2s"
         opacity="0.8"
-      _hover={{ transform: "scale(1.1)", opacity: "1" }}
+        _groupHover={{ transform: "scale(1.1)", opacity: "1" }}
-      _focus={{ transform: "scale(1.1)", opacity: "1" }}
+        _groupFocus={{ transform: "scale(1.1)", opacity: "1" }}
-      {...props}
       >
         <Box
           position="absolute"
           right="100%"
-        opacity={showArrow ? "1" : "0"}
+          opacity={isHomePage ? "0" : "1"}
-        transform={showArrow ? "none" : "translateX(3px)"}
+          transform={isHomePage ? "translateX(3px)" : "none"}
           transition="all 0.2s"
         >
           <ChevronLeftIcon />
@@ -77,6 +74,20 @@ function HomeLink({ showArrow, ...props }) {
           transition="border 0.2s"
         />
       </Box>
+      <Box
+        fontFamily="Delicious"
+        fontWeight="600"
+        fontSize="2xl"
+        display={{ base: "none", sm: "block" }}
+        opacity={isHomePage ? "0" : "1"}
+        transition="all 0.2s"
+        marginRight="2"
+        _groupHover={{ fontWeight: "900" }}
+        _groupFocus={{ fontWeight: "900" }}
+      >
+        Dress to Impress
+      </Box>
+    </Box>
   );
 }
 
@@ -121,20 +132,6 @@ function UserNavBarSection() {
   }
 }
 
-function DressToImpressTitle(props) {
-  return (
-    <Box
-      fontFamily="Delicious"
-      fontWeight="bold"
-      fontSize="2xl"
-      display={{ base: "none", sm: "block" }}
-      {...props}
-    >
-      Dress to Impress
-    </Box>
-  );
-}
-
 const NavButton = React.forwardRef(({ icon, ...props }, ref) => {
   const Component = icon ? IconButton : Button;