From 187174aa5e7796be783101a2fd751b790d5a12e9 Mon Sep 17 00:00:00 2001
From: Unifox <awsomejojop@gmail.com>
Date: Fri, 7 Feb 2025 22:40:15 -0700
Subject: [PATCH] Use Tippy for tooltip

---
 .../components/shared/file-size-text.tsx         | 16 +++++++++++-----
 .../slides/mods/mod-item.component.tsx           | 16 ++++++++--------
 src/renderer/index.css                           | 16 ++++++++++++++++
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/shared/file-size-text.tsx b/src/renderer/components/shared/file-size-text.tsx
index aab0c14e..29e89cb8 100644
--- a/src/renderer/components/shared/file-size-text.tsx
+++ b/src/renderer/components/shared/file-size-text.tsx
@@ -1,3 +1,4 @@
+import Tippy from "@tippyjs/react";
 import { CSSProperties } from "react";
 
 type Props = {
@@ -22,11 +23,16 @@ export function FileSizeText({ fileSize, wantInfoStyle }: Props) {
     };
 
     return (
-        <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90 ${(isLargeMod ? "text-red-400 group/tooltip" : (isMediumMod ? "text-yellow-400 group/tooltip" : "") || "")}`} style={wantInfoStyle}>
-                {getFormattedSize()}
-                <span className={`opacity-0 group-hover/tooltip:opacity-100 text-center py-[5px] px-0 rounded-[6px] top-[7%] right-[105%] transition-opacity duration-500 absolute bg-black after:absolute after:top-[50%] after:left-full after:-mt-[5px] after:border-5 after:border-solid after:border-t-transparent after:border-r-transparent after:border-b-transparent after:border-l-black ${(isLargeMod ? `w-[160px] text-red-400` : (isMediumMod ? `w-[140px] text-yellow-400` : "") || "")}`}>
-                    {(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
+
+        <Tippy
+            content={(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
+            placement="left"
+            theme={`${(isLargeMod ? `red` : (isMediumMod ? `yellow` : "") || "")}`}
+            className={`${isLargeMod || isMediumMod ? `` : `opacity-0`}`}
+            delay={[50, 0]} >
+                <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${(isLargeMod ? "text-red-400" : (isMediumMod ? "text-yellow-400" : "") || "")}`} style={wantInfoStyle}>
+                    {getFormattedSize()}
                 </span>
-            </span>
+        </Tippy>
     );
 }
diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
index f7fb108a..8202f0dc 100644
--- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
+++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
@@ -53,27 +53,27 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele
     };
 
     return (
-        <li ref={clickRef} className={`${className} group/mod`}>
-            <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0 z-[1] group-hover/mod:brightness-90" style={wantInfoStyle}>
+        <li ref={clickRef} className={`${className} group`}>
+            <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0 z-[1] group-hover:brightness-90" style={wantInfoStyle}>
                 <BsmCheckbox className="h-full aspect-square z-[1] relative bg-inherit" onChange={() => onChange(!isChecked)} disabled={mod.mod.category === BbmCategories.Core || isDependency || disabled} checked={isChecked} />
             </div>
-            <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none group-hover/mod:brightness-90" style={wantInfoStyle}>
+            <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none group-hover:brightness-90" style={wantInfoStyle}>
                 {mod.mod.name}
             </span>
-            <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90 ${installedVersion && isOutDated && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>
+            <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${installedVersion && isOutDated && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>
                 {installedVersion || "-"}
             </span>
-            <span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90" style={wantInfoStyle}>
+            <span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
                 {mod.version.modVersion}
             </span>
             <FileSizeText fileSize={mod.version.fileSize} wantInfoStyle={wantInfoStyle} />
-            <span title={striptags(mod.mod?.description ?? "", { tagReplacementText: " " })} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover/mod:brightness-90" style={wantInfoStyle}>
+            <span title={striptags(mod.mod?.description ?? "", { tagReplacementText: " " })} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
                 {striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })}
             </span>
-            <div className="h-full bg-inherit flex items-center justify-center mr-3 rounded-r-md pr-2 border-t-2 border-b-2 border-r-2 group-hover/mod:brightness-90" style={wantInfoStyle}>
+            <div className="h-full bg-inherit flex items-center justify-center mr-3 rounded-r-md pr-2 border-t-2 border-b-2 border-r-2 group-hover:brightness-90" style={wantInfoStyle}>
                 {installedVersion && (
                     <BsmButton
-                        className="z-[1] h-7 w-7 p-[5px] rounded-full group-hover/mod:brightness-90"
+                        className="z-[1] h-7 w-7 p-[5px] rounded-full group-hover:brightness-90"
                         icon="trash"
                         disabled={disabled}
                         withBar={false}
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 8b5740e2..9d6c04ce 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -114,6 +114,22 @@
     @apply border-r-neutral-900;
 }
 
+.tippy-box[data-theme~='red'] {
+    @apply bg-neutral-900;
+    @apply text-red-400;
+}
+.tippy-box[data-theme~='red'][data-placement^='left'] > .tippy-arrow::before {
+    @apply border-l-neutral-900;
+}
+
+.tippy-box[data-theme~='yellow'] {
+    @apply bg-neutral-900;
+    @apply text-yellow-400;
+}
+.tippy-box[data-theme~='yellow'][data-placement^='left'] > .tippy-arrow::before {
+    @apply border-l-neutral-900;
+}
+
 .bg-theme-1 { @apply bg-light-main-color-1 dark:bg-main-color-1; }
 .bg-theme-2 { @apply bg-light-main-color-2 dark:bg-main-color-2; }
 .bg-theme-3 { @apply bg-light-main-color-3 dark:bg-main-color-3; }