SidebarFooterButton: clean code + remove hover link on buttons

frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx

@@ -1,22 +1,20 @@
-import Link from "next/link";
 import { useTranslation } from "react-i18next";
 import { FaBrain } from "react-icons/fa";
 
-import { sidebarLinkStyle } from "@/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
+import { SidebarFooterButton } from "./SidebarFooterButton";
+
 export const BrainManagementButton = (): JSX.Element => {
   const { currentBrainId } = useBrainContext();
   const { t } = useTranslation("brain");
 
   return (
-    <Link
+    <SidebarFooterButton
       href={`/brains-management/${currentBrainId ?? ""}`}
-      className={sidebarLinkStyle}
+      icon={<FaBrain className="w-8 h-8" />}
+      label={t("myBrains")}
       data-testid="brain-management-button"
-    >
-      <FaBrain className="w-8 h-8" />
-      <span>{t("myBrains")}</span>
-    </Link>
+    />
   );
 };

frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx

@@ -0,0 +1,34 @@
+import { useRouter } from "next/navigation";
+
+type SidebarFooterButtonProps = {
+  icon: JSX.Element;
+  label: string | JSX.Element;
+  href?: string;
+  onClick?: () => void;
+};
+
+export const SidebarFooterButton = ({
+  icon,
+  label,
+  href,
+  onClick,
+}: SidebarFooterButtonProps): JSX.Element => {
+  const router = useRouter();
+
+  if (href !== undefined) {
+    onClick = () => {
+      void router.push(href);
+    };
+  }
+
+  return (
+    <button
+      type="button"
+      className="w-full rounded-lg px-5 py-2 text-base flex justify-start items-center gap-4 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-primary focus:outline-none"
+      onClick={onClick}
+    >
+      {icon}
+      <span className="text-ellipsis overflow-hidden">{label}</span>
+    </button>
+  );
+};

frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx

@@ -5,7 +5,7 @@ import { FiUser } from "react-icons/fi";
 import { StripePricingModal } from "@/lib/components/Stripe";
 import { useUserData } from "@/lib/hooks/useUserData";
 
-import { sidebarLinkStyle } from "../styles/SidebarLinkStyle";
+import { SidebarFooterButton } from "./SidebarFooterButton";
 
 export const UpgradeToPlus = (): JSX.Element => {
   const { userData } = useUserData();
@@ -20,15 +20,17 @@ export const UpgradeToPlus = (): JSX.Element => {
   return (
     <StripePricingModal
       Trigger={
-        <button type="button" className={sidebarLinkStyle}>
-          <FiUser className="w-8 h-8" />
-          <span>
-            {t("upgrade")}{" "}
-            <span className="rounded bg-primary/50 py-1 px-3 text-xs">
-              {t("new")}
-            </span>
-          </span>
-        </button>
+        <SidebarFooterButton
+          icon={<FiUser className="w-8 h-8" />}
+          label={
+            <>
+              {t("upgrade")}{" "}
+              <span className="rounded bg-primary/50 py-1 px-3 text-xs">
+                {t("new")}
+              </span>
+            </>
+          }
+        />
       }
     />
   );

frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx

@@ -1,21 +1,18 @@
-import Link from "next/link";
-
 import { Avatar } from "@/lib/components/ui/Avatar";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 
+import { SidebarFooterButton } from "./SidebarFooterButton";
 import { useGravatar } from "../../../../../hooks/useGravatar";
-import { sidebarLinkStyle } from "../styles/SidebarLinkStyle";
 
 export const UserButton = (): JSX.Element => {
   const { session } = useSupabase();
   const { gravatarUrl } = useGravatar();
 
   return (
-    <Link aria-label="account" className={sidebarLinkStyle} href={"/user"}>
-      <Avatar url={gravatarUrl} alt="user-gravatar" />
-      <span className="text-ellipsis overflow-hidden">
-        {session?.user.email ?? ""}
-      </span>
-    </Link>
+    <SidebarFooterButton
+      href={"/user"}
+      icon={<Avatar url={gravatarUrl} />}
+      label={session?.user.email ?? ""}
+    />
   );
 };

frontend/lib/components/ui/Avatar.tsx

@@ -4,20 +4,18 @@ import { cn } from "@/lib/utils";
 
 type AvatarProps = {
   url: string;
-  alt: string;
   imgClassName?: string;
   className?: string;
 };
 export const Avatar = ({
   url,
-  alt,
   imgClassName,
   className,
 }: AvatarProps): JSX.Element => {
   return (
-    <div className={cn("relative w-8 h-8", className)}>
+    <div className={cn("relative w-8 h-8 shrink-0", className)}>
       <Image
-        alt={alt}
+        alt="avatar"
         fill={true}
         sizes="32px"
         src={url}