zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor changelog modal component layout and styling

Browse Source
This commit is contained in:
Shidorien
2023-12-21 21:03:53 +01:00
parent 37a3951f7b
commit c77f4a9448
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal-types/chabgelog-modal/changelog-modal.component.tsx
+16 -16
View File
@@ -17,22 +17,22 @@ export const ChangelogModal: ModalComponent<void, ChangelogVersion> = ({ resolve
const formattedTimestamp = changelog?.timestampPublished ? new Date(changelog.timestampPublished * 1000).toLocaleDateString() : '';
return (
<form className="w-[350px] text-gray-800 dark:text-gray-200 h-[70vh] flex flex-col">
<h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{changelog?.title}</h1>
<BsmImage className="mx-auto h-20" image={BeatRunning} />
<div className="relative h-80 ">
<div className=" absolute overflow-y-scroll h-full content grow" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(changelog?.htmlBody) }}/>
</div>
<span className="block w-[95%] mx-auto my-[16px] h-[3px] rounded-full bg-main-color-1" />
<div className=" flex flex-row justify-between">
<span><i>{formattedTimestamp}</i></span>
<span><i>{changelog?.version}</i></span>
</div>
<div className="flex gap-2 mt-1 justify-end h-7">
<BsmButton onClick={openTwitter} className="rounded-md p-1" icon="twitter" withBar={false} color="#1DA1F2" iconColor="#FFFFFF"/>
<BsmButton onClick={openGithub} className="rounded-md p-1" icon="github" withBar={false} color="#000000" iconColor="#FFFFFF"/>
<BsmButton onClick={openDiscord} className="rounded-md p-1" icon="discord" withBar={false} color="#5865F2" iconColor="#FFFFFF"/>
<BsmButton onClick={openSupportPage} className="rounded-md p-1" icon="patreon" withBar={false} color="#FF424D" iconColor="#FFFFFF"/>
<form className="w-[350px] text-gray-800 dark:text-gray-200 h-[70vh] flex flex-col justify-between">
<h1 className=" p-4 pt-1 text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200 font-bold">{changelog?.title}</h1>
<span className="block w-[100%] mx-auto m-0 h-1 rounded-full bg-main-color-1" />
<div className=" overflow-y-scroll h-full content grow" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(changelog?.htmlBody) }}/>
<span className="block w-[100%] mx-auto mt-0 mb-4 h-1 rounded-full bg-main-color-1" />
<div className="flex flex-row justify-between">
<div className="my-auto flex flex-col text-sm">
<span>{formattedTimestamp}</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" icon="twitter" withBar={false} color="#1DA1F2" iconColor="#FFFFFF"/>
<BsmButton onClick={openGithub} className="rounded-md p-1 w-7 h-7" icon="github" withBar={false} color="#000000" iconColor="#FFFFFF"/>
<BsmButton onClick={openDiscord} className="rounded-md p-1 w-7 h-7" icon="discord" withBar={false} color="#5865F2" iconColor="#FFFFFF"/>
<BsmButton onClick={openSupportPage} className="rounded-md p-1 w-7 h-7" icon="patreon" withBar={false} color="#FF424D" iconColor="#FFFFFF"/>
</div>
</div>
</form>
)