fix(frontend): hover effect on profile Button (#2587)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/lib/components/Menu/components/MenuButton/MenuButton.tsx

@@ -13,6 +13,7 @@ export interface ButtonProps {
   type: "add" | "open";
   isSelected?: boolean;
   color: "gold" | "primary";
+  parentHovered?: boolean;
 }
 
 export const MenuButton = (props: ButtonProps): JSX.Element => {
@@ -37,7 +38,7 @@ export const MenuButton = (props: ButtonProps): JSX.Element => {
           ${
             props.color === "gold"
               ? styles.gold
-              : isHovered
+              : isHovered || props.parentHovered
               ? styles.primary
               : ""
           }`}

frontend/lib/components/Menu/components/ProfileButton/ProfileButton.module.scss

@@ -1,3 +1,4 @@
+@use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
 
@@ -5,6 +6,7 @@
   display: flex;
   gap: Spacings.$spacing02;
   align-items: center;
+  border-radius: Radius.$normal;
 
   .credits {
     display: flex;
@@ -16,4 +18,8 @@
       color: var(--gold);
     }
   }
+
+  &:hover {
+    background-color: var(--background-3);
+  }
 }

frontend/lib/components/Menu/components/ProfileButton/ProfileButton.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { useUserApi } from "@/lib/api/user/useUserApi";
 import { MenuButton } from "@/lib/components/Menu/components/MenuButton/MenuButton";
@@ -11,6 +11,7 @@ import { useUserData } from "@/lib/hooks/useUserData";
 import styles from "./ProfileButton.module.scss";
 
 export const ProfileButton = (): JSX.Element => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
   const pathname = usePathname() ?? "";
   const isSelected = pathname.includes("/user");
   const { userIdentityData } = useUserData();
@@ -31,13 +32,19 @@ export const ProfileButton = (): JSX.Element => {
   }, []);
 
   return (
-    <Link className={styles.button_wrapper} href="/user">
+    <Link
+      className={styles.button_wrapper}
+      href="/user"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <MenuButton
         label={username}
         iconName="user"
         type="open"
         isSelected={isSelected}
         color="primary"
+        parentHovered={isHovered}
       />
       {remainingCredits !== null && (
         <div className={styles.credits}>

frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss

@@ -44,6 +44,12 @@
 
     &:hover {
       background-color: var(--background-3);
+
+      .header_left {
+        .header_title {
+          color: var(--primary-0);
+        }
+      }
     }
   }