Add tooltips to social media buttons in ChangelogModal

This commit is contained in:
shidorien
2023-12-28 15:32:37 +01:00
parent ddde1f8b8a
commit 98bdbba23c
@@ -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>