last fixes px to rem

osu-tournament-rating · Aug 11, 2024 · da95c86 · da95c86
1 parent 05fe822
commit da95c86
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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 />