From 98bdbba23c2509023816d03834e4875a9736e70c Mon Sep 17 00:00:00 2001
From: shidorien <gaetangerard@hotmail.fr>
Date: Thu, 28 Dec 2023 15:32:37 +0100
Subject: [PATCH] Add tooltips to social media buttons in ChangelogModal

---
 .../changelog-modal.component.tsx             | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/modal/modal-types/chabgelog-modal/changelog-modal.component.tsx b/src/renderer/components/modal/modal-types/chabgelog-modal/changelog-modal.component.tsx
index 71062094..2c791930 100644
--- a/src/renderer/components/modal/modal-types/chabgelog-modal/changelog-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/chabgelog-modal/changelog-modal.component.tsx
@@ -4,6 +4,7 @@ import { LinkOpenerService } from "renderer/services/link-opener.service";
 import { ModalComponent } from "renderer/services/modale.service";
 import DOMPurify from 'dompurify';
 import './changelog-modal.component.css';
+import Tippy from "@tippyjs/react";
 
 export const ChangelogModal: ModalComponent<void, ChangelogVersion> = ({ resolver, data: changelog }) => {
 
@@ -22,13 +23,21 @@ export const ChangelogModal: ModalComponent<void, ChangelogVersion> = ({ resolve
             <div className="flex flex-row justify-between">
                 <div className="my-auto flex flex-col text-sm">
                     <span>{formattedTimestamp}</span>
-                    <span >v{changelog?.version}</span>
+                    <span>v{changelog?.version}</span>
                 </div>
                 <div className="flex flex-row gap-2 my-auto">
-                    <BsmButton onClick={openTwitter} className="rounded-md p-1 w-7 h-7 bg-black " icon="twitter" withBar={false} typeColor="none"/>
-                    <BsmButton onClick={openGithub} className="rounded-md p-1 w-7 h-7 bg-black " icon="github" withBar={false} typeColor="none"/>
-                    <BsmButton onClick={openDiscord} className="rounded-md p-1 w-7 h-7 bg-black " icon="discord" withBar={false} typeColor="none"/>
-                    <BsmButton onClick={openSupportPage} className="rounded-md p-1 w-7 h-7 bg-black " icon="patreon" withBar={false} typeColor="none"/>
+                    <Tippy content="Twitter" placement="top" className="font-bold !bg-neutral-900" duration={[200, 0]} arrow={false}>
+                        <div><BsmButton onClick={openTwitter} className="rounded-md p-1 w-7 h-7" icon="twitter" withBar={false} typeColor="none" iconColor="#fff" color="#000"/></div>
+                    </Tippy>
+                    <Tippy content="Github" placement="top" className="font-bold !bg-neutral-900" duration={[200, 0]} arrow={false}>
+                        <div><BsmButton onClick={openGithub} className="rounded-md p-1 w-7 h-7" icon="github" withBar={false} typeColor="none"  iconColor="#fff" color="#000"/></div>
+                    </Tippy>
+                    <Tippy content="Discord" placement="top" className="font-bold !bg-neutral-900" duration={[200, 0]} arrow={false}>
+                        <div><BsmButton onClick={openDiscord} className="rounded-md p-1 w-7 h-7" icon="discord" withBar={false} typeColor="none"  iconColor="#fff" color="#000"/></div>
+                    </Tippy>
+                    <Tippy content="Patreon" placement="top" className="font-bold !bg-neutral-900" duration={[200, 0]} arrow={false}>
+                        <div><BsmButton onClick={openSupportPage} className="rounded-md p-1 w-7 h-7 " icon="patreon" withBar={false} typeColor="none"  iconColor="#fff" color="#000"/></div>
+                    </Tippy>
                 </div>
             </div>
         </form>