From 722ab565b90abd93c86cc8db2862f31d8f2501e7 Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 23 Jun 2024 12:20:58 +0200
Subject: [PATCH 01/10] tooltip begin

---
 components/NavBar/NavBar.tsx                 | 58 ++++++++++++++------
 components/NavBar/Tooltip/Tooltip.jsx        | 11 ++++
 components/NavBar/Tooltip/Tooltip.module.css | 46 ++++++++++++++++
 3 files changed, 98 insertions(+), 17 deletions(-)
 create mode 100644 components/NavBar/Tooltip/Tooltip.jsx
 create mode 100644 components/NavBar/Tooltip/Tooltip.module.css

diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index f41c700..75e081c 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -1,18 +1,19 @@
-'use client';
-
-import { getOsuModeCookie } from '@/app/actions';
-import logo from '@/public/logos/small.svg';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import HamburgerMobile from './HamburgerMobile/HamburgerMobile';
-import ModeSwitcher from './ModeSwitcher/ModeSwitcher';
-import styles from './NavBar.module.css';
-import Routes from './Routes/Routes';
-import SearchButton from './SearchButton/SearchButton';
-import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher';
-import UserLogged from './UserLogged/UserLogged';
+"use client";
 
+import { getOsuModeCookie } from "@/app/actions";
+import logo from "@/public/logos/small.svg";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import HamburgerMobile from "./HamburgerMobile/HamburgerMobile";
+import ModeSwitcher from "./ModeSwitcher/ModeSwitcher";
+import styles from "./NavBar.module.css";
+import Routes from "./Routes/Routes";
+import SearchButton from "./SearchButton/SearchButton";
+import ThemeSwitcher from "./ThemeSwitcher/ThemeSwitcher";
+import UserLogged from "./UserLogged/UserLogged";
+import moonSVG from "@/public/icons/moon.svg";
+import Tooltip from "./Tooltip/Tooltip";
 export default function NavBar() {
   const [cookieMode, setCookieMode] = useState({});
 
@@ -23,10 +24,30 @@ export default function NavBar() {
     });
   }, []);
 
+  const tooltipContent = (
+    <div>
+      <div>Friends</div>
+      <div>Sign out</div>
+      <div className={styles.iconContainer}>
+        <img
+          src={moonSVG}
+          alt="Moon Icon"
+        />
+      </div>
+    </div>
+  );
+
   return (
     <nav className={styles.navbar}>
-      <Link href={'/'} className={styles.logoLink}>
-        <Image src={logo} alt="o!TR" fill />
+      <Link
+        href={"/"}
+        className={styles.logoLink}
+      >
+        <Image
+          src={logo}
+          alt="o!TR"
+          fill
+        />
       </Link>
       <div className={styles.content}>
         <Routes />
@@ -35,7 +56,10 @@ export default function NavBar() {
           <SearchButton />
           {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
           <ThemeSwitcher />
-          <UserLogged />
+          {/* TODO: refactor to be local to UserLogged */}
+          <Tooltip content={tooltipContent}>
+            <UserLogged />
+          </Tooltip>
         </div>
       </div>
       {/* Hamburger Menu Icon for mobile */}
diff --git a/components/NavBar/Tooltip/Tooltip.jsx b/components/NavBar/Tooltip/Tooltip.jsx
new file mode 100644
index 0000000..7bb7e8a
--- /dev/null
+++ b/components/NavBar/Tooltip/Tooltip.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./Tooltip.module.css";
+
+export default function Tooltip({ children, content }) {
+  return (
+    <div className={styles.tooltipContainer}>
+      {children}
+      <span className={styles.tooltipContent}>{content}</span>
+    </div>
+  );
+}
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
new file mode 100644
index 0000000..4e2fed9
--- /dev/null
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -0,0 +1,46 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltipContent {
+  visibility: hidden;
+  width: 100px;
+  background-color: white;
+  color: black;
+  text-align: center;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  z-index: 1;
+  top: 120%; /* Position the tooltip below the text */
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltipContainer:hover .tooltipContent {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tooltipContent div {
+  margin-bottom: 10px;
+}
+
+.tooltipContent div:last-child {
+  margin-bottom: 0;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.iconContainer img {
+  width: 24px;
+  height: 24px;
+}

From 5bb59130bde1644852dfd79ca55190a2441fa8b2 Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 30 Jun 2024 16:32:15 +0200
Subject: [PATCH 02/10] behavior improved, style still off

---
 components/NavBar/NavBar.tsx                 | 20 +-------
 components/NavBar/Tooltip/Tooltip.jsx        | 49 ++++++++++++++++++--
 components/NavBar/Tooltip/Tooltip.module.css | 39 +++++++---------
 components/NavBar/UserLogged/UserLogged.tsx  | 41 +++++++++++-----
 4 files changed, 95 insertions(+), 54 deletions(-)

diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index 75e081c..88a0f92 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -12,8 +12,7 @@ import Routes from "./Routes/Routes";
 import SearchButton from "./SearchButton/SearchButton";
 import ThemeSwitcher from "./ThemeSwitcher/ThemeSwitcher";
 import UserLogged from "./UserLogged/UserLogged";
-import moonSVG from "@/public/icons/moon.svg";
-import Tooltip from "./Tooltip/Tooltip";
+
 export default function NavBar() {
   const [cookieMode, setCookieMode] = useState({});
 
@@ -24,19 +23,6 @@ export default function NavBar() {
     });
   }, []);
 
-  const tooltipContent = (
-    <div>
-      <div>Friends</div>
-      <div>Sign out</div>
-      <div className={styles.iconContainer}>
-        <img
-          src={moonSVG}
-          alt="Moon Icon"
-        />
-      </div>
-    </div>
-  );
-
   return (
     <nav className={styles.navbar}>
       <Link
@@ -57,9 +43,7 @@ export default function NavBar() {
           {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
           <ThemeSwitcher />
           {/* TODO: refactor to be local to UserLogged */}
-          <Tooltip content={tooltipContent}>
-            <UserLogged />
-          </Tooltip>
+          <UserLogged />
         </div>
       </div>
       {/* Hamburger Menu Icon for mobile */}
diff --git a/components/NavBar/Tooltip/Tooltip.jsx b/components/NavBar/Tooltip/Tooltip.jsx
index 7bb7e8a..6586e8e 100644
--- a/components/NavBar/Tooltip/Tooltip.jsx
+++ b/components/NavBar/Tooltip/Tooltip.jsx
@@ -1,11 +1,54 @@
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import styles from "./Tooltip.module.css";
 
 export default function Tooltip({ children, content }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 100);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
-    <div className={styles.tooltipContainer}>
+    <div
+      className={styles.tooltipContainer}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       {children}
-      <span className={styles.tooltipContent}>{content}</span>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            ref={tooltipRef}
+            className={styles.tooltipContent}
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            {content}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index 4e2fed9..ae0fd44 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -4,43 +4,38 @@
 }
 
 .tooltipContent {
-  visibility: hidden;
-  width: 100px;
+  position: absolute;
+  z-index: 1000;
+  top: calc(100% + 10px);
+  right: 0; /* Align to the right of the container */
   background-color: white;
   color: black;
-  text-align: center;
   border-radius: 8px;
-  padding: 10px;
+  padding: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  position: absolute;
-  z-index: 1;
-  top: 120%; /* Position the tooltip below the text */
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.tooltipContainer:hover .tooltipContent {
-  visibility: visible;
-  opacity: 1;
+  min-width: 150px; /* Ensure minimum width for content */
+  white-space: nowrap;
 }
 
-.tooltipContent div {
-  margin-bottom: 10px;
+.tooltipContent > div {
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 
-.tooltipContent div:last-child {
-  margin-bottom: 0;
+.tooltipContent > div:not(:last-child) {
+  border-bottom: 1px solid #e0e0e0;
 }
 
 .iconContainer {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-left: auto; /* Push icon to the right */
 }
 
 .iconContainer img {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
 }
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index f5cae8f..a24b44e 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -1,20 +1,39 @@
-'use client';
+"use client";
 
-import { useUser } from '@/util/hooks';
-import Image from 'next/image';
-import styles from '../NavBar.module.css';
+import { useUser } from "@/util/hooks";
+import Image from "next/image";
+import moonSVG from "@/public/icons/moon.svg";
+import styles from "../NavBar.module.css";
+import Tooltip from "./../Tooltip/Tooltip";
+
+const tooltipContent = (
+  <>
+    <div>Friends</div>
+    <div>Sign out</div>
+    <div className={styles.iconContainer}>
+      <Image
+        src={moonSVG}
+        alt="Moon Icon"
+        width={20}
+        height={20}
+      />
+    </div>
+  </>
+);
 
 export default function UserLogged() {
   const user = useUser();
 
   if (user?.osuId)
     return (
-      <div className={styles.userPropic}>
-        <Image
-          src={`http://s.ppy.sh/a/${user?.osuId}`}
-          alt="User Propic"
-          fill
-        />
-      </div>
+      <Tooltip content={tooltipContent}>
+        <div className={styles.userPropic}>
+          <Image
+            src={`http://s.ppy.sh/a/${user?.osuId}`}
+            alt="User Propic"
+            fill
+          />
+        </div>
+      </Tooltip>
     );
 }

From a222cb143989b8bf7ebd270dcb0cbe22d42916cc Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 7 Jul 2024 13:31:54 +0200
Subject: [PATCH 03/10] improved style

---
 components/NavBar/Tooltip/Tooltip.module.css | 35 +++++++++++++++-----
 components/NavBar/UserLogged/UserLogged.tsx  |  8 +++--
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index ae0fd44..ec1f5a1 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -7,13 +7,13 @@
   position: absolute;
   z-index: 1000;
   top: calc(100% + 10px);
-  right: 0; /* Align to the right of the container */
+  right: -44px;
   background-color: white;
   color: black;
   border-radius: 8px;
   padding: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  min-width: 150px; /* Ensure minimum width for content */
+  min-width: 120px;
   white-space: nowrap;
 }
 
@@ -21,21 +21,40 @@
   padding: 8px 0;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
+}
+
+.tooltipContent > div > span {
+  cursor: pointer;
+  transition: color 0.2s ease, background-color 0.2s ease;
+  /* padding: 4px 8px; */
+  border-radius: 4px;
 }
 
-.tooltipContent > div:not(:last-child) {
-  border-bottom: 1px solid #e0e0e0;
+.tooltipContent > div > span:hover {
+  color: #888;
 }
 
-.iconContainer {
+/* .iconContainer {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: auto; /* Push icon to the right */
+  margin-left: auto;
+  cursor: pointer;
+  transition: filter 0.2s ease;
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.iconContainer:hover {
+  background-color: #f0f0f0;
+}
+
+.iconContainer:hover img {
+  filter: brightness(1.5);
 }
 
 .iconContainer img {
   width: 20px;
   height: 20px;
-}
+} */
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index a24b44e..e83d1df 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -8,8 +8,12 @@ import Tooltip from "./../Tooltip/Tooltip";
 
 const tooltipContent = (
   <>
-    <div>Friends</div>
-    <div>Sign out</div>
+    <div>
+      <span>Friends</span>
+    </div>
+    <div>
+      <span>Sign out</span>
+    </div>
     <div className={styles.iconContainer}>
       <Image
         src={moonSVG}

From 668e68dff80d7f119b05bb57a32fccd93bbecc65 Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 14 Jul 2024 16:24:02 +0200
Subject: [PATCH 04/10] moved theme switcher into tooltip

---
 components/NavBar/NavBar.tsx                  | 14 ++-------
 .../NavBar/ThemeSwitcher/ThemeSwitcher.tsx    | 29 ++++++++-----------
 components/NavBar/Tooltip/Tooltip.module.css  | 25 ----------------
 components/NavBar/UserLogged/UserLogged.tsx   | 10 ++-----
 4 files changed, 16 insertions(+), 62 deletions(-)

diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index 88a0f92..014a20e 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -10,7 +10,6 @@ import ModeSwitcher from "./ModeSwitcher/ModeSwitcher";
 import styles from "./NavBar.module.css";
 import Routes from "./Routes/Routes";
 import SearchButton from "./SearchButton/SearchButton";
-import ThemeSwitcher from "./ThemeSwitcher/ThemeSwitcher";
 import UserLogged from "./UserLogged/UserLogged";
 
 export default function NavBar() {
@@ -25,15 +24,8 @@ export default function NavBar() {
 
   return (
     <nav className={styles.navbar}>
-      <Link
-        href={"/"}
-        className={styles.logoLink}
-      >
-        <Image
-          src={logo}
-          alt="o!TR"
-          fill
-        />
+      <Link href={"/"} className={styles.logoLink}>
+        <Image src={logo} alt="o!TR" fill />
       </Link>
       <div className={styles.content}>
         <Routes />
@@ -41,8 +33,6 @@ export default function NavBar() {
         <div className={styles.actions}>
           <SearchButton />
           {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
-          <ThemeSwitcher />
-          {/* TODO: refactor to be local to UserLogged */}
           <UserLogged />
         </div>
       </div>
diff --git a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
index 92c75c6..a87daa5 100644
--- a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
@@ -1,29 +1,24 @@
-'use client';
-import moonSVG from '@/public/icons/moon.svg';
-import sunSVG from '@/public/icons/sun.svg';
-import { useTheme } from 'next-themes';
-import Image from 'next/image';
-import { useHotkeys } from 'react-hotkeys-hook';
-import styles from './ThemeSwitcher.module.css';
+"use client";
+import moonSVG from "@/public/icons/moon.svg";
+import sunSVG from "@/public/icons/sun.svg";
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import { useHotkeys } from "react-hotkeys-hook";
+import styles from "./ThemeSwitcher.module.css";
 
 export default function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
-  useHotkeys('ctrl+l', (e) => {
+  useHotkeys("ctrl+l", (e) => {
     e.preventDefault();
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    setTheme(theme === "light" ? "dark" : "light");
   });
 
   return (
-    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
       <div className={styles.themeSwitcher}>
-        {theme === 'light' && <Image src={sunSVG} alt="Theme Switcher" fill />}
-        {theme === 'dark' && <Image src={moonSVG} alt="Theme Switcher" fill />}
+        {theme === "light" && <Image src={sunSVG} alt="Theme Switcher" fill />}
+        {theme === "dark" && <Image src={moonSVG} alt="Theme Switcher" fill />}
         {!theme && <></>}
-        {/* <Image
-              src={theme === 'light' ? sunSVG : moonSVG}
-              alt="Theme Switcher"
-              fill
-            /> */}
       </div>
     </button>
   );
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index ec1f5a1..38c5ccd 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -27,34 +27,9 @@
 .tooltipContent > div > span {
   cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease;
-  /* padding: 4px 8px; */
   border-radius: 4px;
 }
 
 .tooltipContent > div > span:hover {
   color: #888;
 }
-
-/* .iconContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: auto;
-  cursor: pointer;
-  transition: filter 0.2s ease;
-  padding: 4px;
-  border-radius: 4px;
-}
-
-.iconContainer:hover {
-  background-color: #f0f0f0;
-}
-
-.iconContainer:hover img {
-  filter: brightness(1.5);
-}
-
-.iconContainer img {
-  width: 20px;
-  height: 20px;
-} */
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index e83d1df..3efbe63 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -2,10 +2,9 @@
 
 import { useUser } from "@/util/hooks";
 import Image from "next/image";
-import moonSVG from "@/public/icons/moon.svg";
 import styles from "../NavBar.module.css";
 import Tooltip from "./../Tooltip/Tooltip";
-
+import ThemeSwitcher from "../ThemeSwitcher/ThemeSwitcher";
 const tooltipContent = (
   <>
     <div>
@@ -15,12 +14,7 @@ const tooltipContent = (
       <span>Sign out</span>
     </div>
     <div className={styles.iconContainer}>
-      <Image
-        src={moonSVG}
-        alt="Moon Icon"
-        width={20}
-        height={20}
-      />
+      <ThemeSwitcher />
     </div>
   </>
 );

From 32b1e992536a7e3e645ceadba59fab282b743e0f Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 14 Jul 2024 16:47:05 +0200
Subject: [PATCH 05/10] hover effect on dark mode

---
 components/NavBar/Tooltip/Tooltip.module.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index 38c5ccd..7e6d0ba 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -8,8 +8,10 @@
   z-index: 1000;
   top: calc(100% + 10px);
   right: -44px;
-  background-color: white;
-  color: black;
+  background-color: hsla(var(--background-content-hsl));
+  color: hsla(var(--foreground-inactive-hsl));
+  transition: color 0.2s ease-out;
+
   border-radius: 8px;
   padding: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -30,6 +32,10 @@
   border-radius: 4px;
 }
 
-.tooltipContent > div > span:hover {
+:root .tooltipContent > div > span:hover {
   color: #888;
 }
+
+[data-theme="dark"] .tooltipContent > div > span:hover {
+  color: hsla(var(--foreground-active-hsl));
+}

From 6ce8dc8838053104199e7b31aff55fbeb06c425d Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Thu, 18 Jul 2024 19:18:19 +0200
Subject: [PATCH 06/10] reverted to single quotes

---
 .prettierrc                                   |  3 +++
 components/NavBar/NavBar.tsx                  | 26 +++++++++----------
 .../NavBar/ThemeSwitcher/ThemeSwitcher.tsx    | 24 ++++++++---------
 .../Tooltip/{Tooltip.jsx => Tooltip.tsx}      |  6 ++---
 components/NavBar/UserLogged/UserLogged.tsx   | 12 ++++-----
 5 files changed, 37 insertions(+), 34 deletions(-)
 create mode 100644 .prettierrc
 rename components/NavBar/Tooltip/{Tooltip.jsx => Tooltip.tsx} (88%)

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..544138b
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index 014a20e..0c8341a 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { getOsuModeCookie } from "@/app/actions";
-import logo from "@/public/logos/small.svg";
-import Image from "next/image";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import HamburgerMobile from "./HamburgerMobile/HamburgerMobile";
-import ModeSwitcher from "./ModeSwitcher/ModeSwitcher";
-import styles from "./NavBar.module.css";
-import Routes from "./Routes/Routes";
-import SearchButton from "./SearchButton/SearchButton";
-import UserLogged from "./UserLogged/UserLogged";
+import { getOsuModeCookie } from '@/app/actions';
+import logo from '@/public/logos/small.svg';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import HamburgerMobile from './HamburgerMobile/HamburgerMobile';
+import ModeSwitcher from './ModeSwitcher/ModeSwitcher';
+import styles from './NavBar.module.css';
+import Routes from './Routes/Routes';
+import SearchButton from './SearchButton/SearchButton';
+import UserLogged from './UserLogged/UserLogged';
 
 export default function NavBar() {
   const [cookieMode, setCookieMode] = useState({});
@@ -24,7 +24,7 @@ export default function NavBar() {
 
   return (
     <nav className={styles.navbar}>
-      <Link href={"/"} className={styles.logoLink}>
+      <Link href={'/'} className={styles.logoLink}>
         <Image src={logo} alt="o!TR" fill />
       </Link>
       <div className={styles.content}>
diff --git a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
index a87daa5..2638f30 100644
--- a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
@@ -1,23 +1,23 @@
-"use client";
-import moonSVG from "@/public/icons/moon.svg";
-import sunSVG from "@/public/icons/sun.svg";
-import { useTheme } from "next-themes";
-import Image from "next/image";
-import { useHotkeys } from "react-hotkeys-hook";
-import styles from "./ThemeSwitcher.module.css";
+'use client';
+import moonSVG from '@/public/icons/moon.svg';
+import sunSVG from '@/public/icons/sun.svg';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+import { useHotkeys } from 'react-hotkeys-hook';
+import styles from './ThemeSwitcher.module.css';
 
 export default function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
-  useHotkeys("ctrl+l", (e) => {
+  useHotkeys('ctrl+l', (e) => {
     e.preventDefault();
-    setTheme(theme === "light" ? "dark" : "light");
+    setTheme(theme === 'light' ? 'dark' : 'light');
   });
 
   return (
-    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
       <div className={styles.themeSwitcher}>
-        {theme === "light" && <Image src={sunSVG} alt="Theme Switcher" fill />}
-        {theme === "dark" && <Image src={moonSVG} alt="Theme Switcher" fill />}
+        {theme === 'light' && <Image src={sunSVG} alt="Theme Switcher" fill />}
+        {theme === 'dark' && <Image src={moonSVG} alt="Theme Switcher" fill />}
         {!theme && <></>}
       </div>
     </button>
diff --git a/components/NavBar/Tooltip/Tooltip.jsx b/components/NavBar/Tooltip/Tooltip.tsx
similarity index 88%
rename from components/NavBar/Tooltip/Tooltip.jsx
rename to components/NavBar/Tooltip/Tooltip.tsx
index 6586e8e..2858c52 100644
--- a/components/NavBar/Tooltip/Tooltip.jsx
+++ b/components/NavBar/Tooltip/Tooltip.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useRef, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import styles from "./Tooltip.module.css";
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import styles from './Tooltip.module.css';
 
 export default function Tooltip({ children, content }) {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index 3efbe63..72e3229 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useUser } from "@/util/hooks";
-import Image from "next/image";
-import styles from "../NavBar.module.css";
-import Tooltip from "./../Tooltip/Tooltip";
-import ThemeSwitcher from "../ThemeSwitcher/ThemeSwitcher";
+import { useUser } from '@/util/hooks';
+import Image from 'next/image';
+import styles from '../NavBar.module.css';
+import Tooltip from './../Tooltip/Tooltip';
+import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
 const tooltipContent = (
   <>
     <div>

From 7aa8652f482ef64bfa6c03446abb8d8acd3dc552 Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 4 Aug 2024 18:09:50 +0200
Subject: [PATCH 07/10] update framer e warning fix

---
 components/NavBar/Tooltip/Tooltip.module.css |  4 +--
 components/NavBar/Tooltip/Tooltip.tsx        |  2 +-
 components/NavBar/UserLogged/UserLogged.tsx  |  1 +
 package-lock.json                            | 38 ++++++++++++--------
 package.json                                 |  2 +-
 5 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index 7e6d0ba..85fd034 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -10,8 +10,6 @@
   right: -44px;
   background-color: hsla(var(--background-content-hsl));
   color: hsla(var(--foreground-inactive-hsl));
-  transition: color 0.2s ease-out;
-
   border-radius: 8px;
   padding: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -36,6 +34,6 @@
   color: #888;
 }
 
-[data-theme="dark"] .tooltipContent > div > span:hover {
+[data-theme='dark'] .tooltipContent > div > span:hover {
   color: hsla(var(--foreground-active-hsl));
 }
diff --git a/components/NavBar/Tooltip/Tooltip.tsx b/components/NavBar/Tooltip/Tooltip.tsx
index 2858c52..07ff41c 100644
--- a/components/NavBar/Tooltip/Tooltip.tsx
+++ b/components/NavBar/Tooltip/Tooltip.tsx
@@ -15,7 +15,7 @@ export default function Tooltip({ children, content }) {
   const handleMouseLeave = () => {
     timeoutRef.current = setTimeout(() => {
       setIsOpen(false);
-    }, 100);
+    }, 500);
   };
 
   useEffect(() => {
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index 72e3229..153e7cb 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -30,6 +30,7 @@ export default function UserLogged() {
             src={`http://s.ppy.sh/a/${user?.osuId}`}
             alt="User Propic"
             fill
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           />
         </div>
       </Tooltip>
diff --git a/package-lock.json b/package-lock.json
index 5e6bcf4..815e9a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "chart.js": "^4.4.0",
         "chartjs-adapter-date-fns": "^3.0.0",
         "clsx": "^2.0.0",
-        "framer-motion": "^10.16.4",
+        "framer-motion": "^11.3.21",
         "iron-session": "^8.0.1",
         "next": "^14.1.2",
         "next-themes": "^0.3.0",
@@ -63,6 +63,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@emotion/memoize": "0.7.4"
       }
@@ -71,7 +72,8 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -967,12 +969,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1870,10 +1873,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1943,20 +1947,22 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "10.16.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
-      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
+      "version": "11.3.21",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.21.tgz",
+      "integrity": "sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
       },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
       "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       },
       "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
         "react": {
           "optional": true
         },
@@ -2501,6 +2507,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3913,6 +3920,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
diff --git a/package.json b/package.json
index 557cd2c..d2961ca 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "clsx": "^2.0.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.3.21",
     "iron-session": "^8.0.1",
     "next": "^14.1.2",
     "next-themes": "^0.3.0",

From 744ce01a00eaa539c1b612e22983f80e2240721f Mon Sep 17 00:00:00 2001
From: Giovanni Martire <akinari@outlook.it>
Date: Mon, 5 Aug 2024 17:26:12 +0200
Subject: [PATCH 08/10] tooltip animation fix

---
 app/globals.css                              |  4 +++
 components/NavBar/Tooltip/Tooltip.module.css | 26 ++++++++++++----
 components/NavBar/Tooltip/Tooltip.tsx        | 31 +++++++-------------
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index dec6328..397b112 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -19,6 +19,8 @@
   --foreground-inactive-hsl: 0, 0%, 6%;
   --foreground-active-hsl: 0, 0%, 6%;
 
+  --background-navbar-tooltip-hsl: 0, 0%, 100%;
+
   --foreground-nodata-hsl: 210, 2%, 82%;
 
   --color-grey: 0, 0%, 6%;
@@ -220,6 +222,8 @@
 
   --foreground-nodata-hsl: 240, 3%, 22%;
 
+  --background-navbar-tooltip-hsl: 240, 6%, 10%;
+
   --mods-NM-bg: 226, 99%, 65%;
   --mods-NM-bg-row: 226, 99%, 65%, 0.15;
   --mods-HD-bg: 43, 98%, 60%;
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index 85fd034..94b4f16 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -1,20 +1,34 @@
 .tooltipContainer {
   position: relative;
   display: inline-block;
+  height: 100%;
 }
 
-.tooltipContent {
+.parent {
   position: absolute;
   z-index: 1000;
-  top: calc(100% + 10px);
+  top: calc(100% - 10px);
   right: -44px;
-  background-color: hsla(var(--background-content-hsl));
+  min-width: 120px;
+  white-space: nowrap;
+  opacity: 0;
+  padding-top: 8px;
+  visibility: hidden;
+}
+
+.tooltipContent {
+  padding: 12px;
+  background-color: hsla(var(--background-navbar-tooltip-hsl));
   color: hsla(var(--foreground-inactive-hsl));
   border-radius: 8px;
-  padding: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  min-width: 120px;
-  white-space: nowrap;
+}
+
+.tooltipContainer:hover > .parent {
+  opacity: 1;
+  top: calc(100% - 2px);
+  visibility: visible;
+  transition: all 0.2s ease-out;
 }
 
 .tooltipContent > div {
diff --git a/components/NavBar/Tooltip/Tooltip.tsx b/components/NavBar/Tooltip/Tooltip.tsx
index 07ff41c..3c368fc 100644
--- a/components/NavBar/Tooltip/Tooltip.tsx
+++ b/components/NavBar/Tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './Tooltip.module.css';
 
 export default function Tooltip({ children, content }) {
@@ -29,26 +29,17 @@ export default function Tooltip({ children, content }) {
   return (
     <div
       className={styles.tooltipContainer}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      /* onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave} */
     >
       {children}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            ref={tooltipRef}
-            className={styles.tooltipContent}
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            transition={{ duration: 0.2 }}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            {content}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {/* <AnimatePresence>
+        {isOpen && ( */}
+      <div className={styles.parent}>
+        <div className={styles.tooltipContent}>{content}</div>
+      </div>
+      {/*   )}
+      </AnimatePresence> */}
     </div>
   );
 }

From 05fe822563b95ae82a14bb5f8385dec953065cd2 Mon Sep 17 00:00:00 2001
From: Tizzz-555 <103275021+Tizzz-555@users.noreply.github.com>
Date: Sun, 11 Aug 2024 18:21:07 +0200
Subject: [PATCH 09/10] final details

---
 components/NavBar/NavBar.module.css          |  3 +++
 components/NavBar/Tooltip/Tooltip.module.css | 12 ++++++++----
 components/NavBar/Tooltip/Tooltip.tsx        | 10 +---------
 components/NavBar/UserLogged/UserLogged.tsx  |  8 ++------
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/components/NavBar/NavBar.module.css b/components/NavBar/NavBar.module.css
index 5f5f639..f706911 100644
--- a/components/NavBar/NavBar.module.css
+++ b/components/NavBar/NavBar.module.css
@@ -54,6 +54,9 @@
   cursor: pointer;
 }
 
+.iconContainer {
+  margin-top: 12px;
+}
 .logoLink,
 .actions .userPropic {
   height: 1.9rem;
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index 94b4f16..447e9a4 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -9,7 +9,7 @@
   z-index: 1000;
   top: calc(100% - 10px);
   right: -44px;
-  min-width: 120px;
+  min-width: 110px;
   white-space: nowrap;
   opacity: 0;
   padding-top: 8px;
@@ -17,11 +17,16 @@
 }
 
 .tooltipContent {
-  padding: 12px;
+  padding: 15px;
   background-color: hsla(var(--background-navbar-tooltip-hsl));
   color: hsla(var(--foreground-inactive-hsl));
   border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
+  font-size: 1.15rem;
+  display: flex;
+  font-weight: 400;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .tooltipContainer:hover > .parent {
@@ -32,7 +37,6 @@
 }
 
 .tooltipContent > div {
-  padding: 8px 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/components/NavBar/Tooltip/Tooltip.tsx b/components/NavBar/Tooltip/Tooltip.tsx
index 3c368fc..60974fc 100644
--- a/components/NavBar/Tooltip/Tooltip.tsx
+++ b/components/NavBar/Tooltip/Tooltip.tsx
@@ -27,19 +27,11 @@ export default function Tooltip({ children, content }) {
   }, []);
 
   return (
-    <div
-      className={styles.tooltipContainer}
-      /* onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave} */
-    >
+    <div className={styles.tooltipContainer}>
       {children}
-      {/* <AnimatePresence>
-        {isOpen && ( */}
       <div className={styles.parent}>
         <div className={styles.tooltipContent}>{content}</div>
       </div>
-      {/*   )}
-      </AnimatePresence> */}
     </div>
   );
 }
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index 153e7cb..f048149 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -7,12 +7,8 @@ import Tooltip from './../Tooltip/Tooltip';
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
 const tooltipContent = (
   <>
-    <div>
-      <span>Friends</span>
-    </div>
-    <div>
-      <span>Sign out</span>
-    </div>
+    <div>Friends</div>
+    <div>Sign out</div>
     <div className={styles.iconContainer}>
       <ThemeSwitcher />
     </div>

From da95c86af40bb92be80cdc0c8793cfc096f8a6f0 Mon Sep 17 00:00:00 2001
From: Giovanni Martire <akinari@outlook.it>
Date: Sun, 11 Aug 2024 19:54:16 +0200
Subject: [PATCH 10/10] last fixes px to rem

---
 app/globals.css                              |  2 +-
 components/NavBar/Tooltip/Tooltip.module.css | 30 +++++++++-----------
 components/NavBar/UserLogged/UserLogged.tsx  |  4 +--
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 397b112..025c24a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -222,7 +222,7 @@
 
   --foreground-nodata-hsl: 240, 3%, 22%;
 
-  --background-navbar-tooltip-hsl: 240, 6%, 10%;
+  --background-navbar-tooltip-hsl: 240, 3%, 12%;
 
   --mods-NM-bg: 226, 99%, 65%;
   --mods-NM-bg-row: 226, 99%, 65%, 0.15;
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
index 447e9a4..f79ea76 100644
--- a/components/NavBar/Tooltip/Tooltip.module.css
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -7,31 +7,32 @@
 .parent {
   position: absolute;
   z-index: 1000;
-  top: calc(100% - 10px);
-  right: -44px;
-  min-width: 110px;
+  top: calc(100% - 0.6rem);
+  left: calc(
+    -1 * (1.9rem + (1.4rem / 2))
+  ); /* calc(-1 * (profile image width + (horizontal padding of content below / 2))) */
   white-space: nowrap;
   opacity: 0;
-  padding-top: 8px;
+  padding-top: 0.7rem;
   visibility: hidden;
 }
 
 .tooltipContent {
-  padding: 15px;
+  padding: 1.2rem 1.4rem;
   background-color: hsla(var(--background-navbar-tooltip-hsl));
   color: hsla(var(--foreground-inactive-hsl));
-  border-radius: 8px;
+  border-radius: 0.85rem;
   box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   display: flex;
   font-weight: 400;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.8rem;
 }
 
 .tooltipContainer:hover > .parent {
   opacity: 1;
-  top: calc(100% - 2px);
+  top: calc(100% - 0.15rem);
   visibility: visible;
   transition: all 0.2s ease-out;
 }
@@ -42,16 +43,13 @@
   justify-content: center;
 }
 
-.tooltipContent > div > span {
+.tooltipContent > div {
   cursor: pointer;
-  transition: color 0.2s ease, background-color 0.2s ease;
+  transition: color 0.2s ease;
   border-radius: 4px;
+  color: hsla(var(--foreground-inactive-hsl));
 }
 
-:root .tooltipContent > div > span:hover {
-  color: #888;
-}
-
-[data-theme='dark'] .tooltipContent > div > span:hover {
+.tooltipContent > div:hover {
   color: hsla(var(--foreground-active-hsl));
 }
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index f048149..cbaf94e 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -3,11 +3,11 @@
 import { useUser } from '@/util/hooks';
 import Image from 'next/image';
 import styles from '../NavBar.module.css';
-import Tooltip from './../Tooltip/Tooltip';
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
+import Tooltip from './../Tooltip/Tooltip';
 const tooltipContent = (
   <>
-    <div>Friends</div>
+    {/* <div>Friends</div> */}
     <div>Sign out</div>
     <div className={styles.iconContainer}>
       <ThemeSwitcher />