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" />
-      <Box
-        display="flex"
-        alignItems="center"
-        opacity={isHomePage ? "0" : "1"}
-        transition="0.2s opacity"
-      >
-        <DressToImpressTitle />
-      </Box>
+      <HomeLink marginRight="2" />
       <Box marginLeft="auto">
         <UserNavBarSection />
       </Box>
@@ -31,51 +20,73 @@ 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"
-      transition="all 0.2s"
-      opacity="0.8"
-      _hover={{ transform: "scale(1.1)", opacity: "1" }}
-      _focus={{ transform: "scale(1.1)", opacity: "1" }}
       {...props}
     >
       <Box
-        position="absolute"
-        right="100%"
-        opacity={showArrow ? "1" : "0"}
-        transform={showArrow ? "none" : "translateX(3px)"}
+        display="flex"
+        alignItems="center"
+        marginRight="2"
+        position="relative"
         transition="all 0.2s"
+        opacity="0.8"
+        _groupHover={{ transform: "scale(1.1)", opacity: "1" }}
+        _groupFocus={{ transform: "scale(1.1)", opacity: "1" }}
       >
-        <ChevronLeftIcon />
+        <Box
+          position="absolute"
+          right="100%"
+          opacity={isHomePage ? "0" : "1"}
+          transform={isHomePage ? "translateX(3px)" : "none"}
+          transition="all 0.2s"
+        >
+          <ChevronLeftIcon />
+        </Box>
+        <Box
+          as="img"
+          src={HomeLinkIcon}
+          srcSet={`${HomeLinkIcon} 1x, ${HomeLinkIcon2x} 2x`}
+          alt=""
+          height="2em"
+          width="2em"
+          borderRadius="lg"
+          boxShadow="md"
+        />
+        <Box
+          height="2em"
+          width="2em"
+          position="absolute"
+          top="0"
+          left="0"
+          right="0"
+          bottom="0"
+          borderRadius="lg"
+          transition="border 0.2s"
+        />
       </Box>
       <Box
-        as="img"
-        src={HomeLinkIcon}
-        srcSet={`${HomeLinkIcon} 1x, ${HomeLinkIcon2x} 2x`}
-        alt=""
-        height="2em"
-        width="2em"
-        borderRadius="lg"
-        boxShadow="md"
-      />
-      <Box
-        height="2em"
-        width="2em"
-        position="absolute"
-        top="0"
-        left="0"
-        right="0"
-        bottom="0"
-        borderRadius="lg"
-        transition="border 0.2s"
-      />
+        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;