chore(tooltips): reworked tooltip design

src/components/navigation/left/ServerListSidebar.tsx

@@ -402,7 +402,7 @@ export default observer(() => {
                                     <div
                                         style={{
                                             padding: "1px 5px",
-                                            fontSize: "11px",
+                                            fontSize: "9px",
                                             background: "var(--status-busy)",
                                             borderRadius: "60px",
                                         }}>

src/context/Theme.tsx

@@ -27,6 +27,7 @@ export type Variables =
     | "secondary-header"
     | "tertiary-background"
     | "tertiary-foreground"
+    | "tooltip"
     | "status-online"
     | "status-away"
     | "status-busy"
@@ -241,6 +242,7 @@ export const PRESETS: Record<string, Theme> = {
         mention: "rgba(251, 255, 0, 0.40)",
         success: "#65E572",
         warning: "#FAA352",
+        tooltip: "#000000",
         error: "#ED4245",
         hover: "rgba(0, 0, 0, 0.2)",
         "scrollbar-thumb": "#CA525A",
@@ -267,6 +269,7 @@ export const PRESETS: Record<string, Theme> = {
         mention: "rgba(251, 255, 0, 0.06)",
         success: "#65E572",
         warning: "#FAA352",
+        tooltip: "#000000",
         error: "#ED4245",
         hover: "rgba(0, 0, 0, 0.1)",
         "scrollbar-thumb": "#CA525A",

src/styles/index.scss

@@ -8,14 +8,16 @@
 
 .tippy-box {
     color: var(--foreground);
-    background: var(--secondary-background);
+    background: var(--tooltip, var(--background));
 }
 
 .tippy-content {
-    padding: 8px;
-    font-size: 12px;
+    padding: 6px 10px;
+    font-size: 13px;
+    font-weight: 600;
+    max-width: 200px;
 }
 
 .tippy-arrow {
-    color: var(--secondary-background);
+    color: var(--tooltip);
 }