From c77f4a94485c652a15076ea5087fd6a3cdb65cf6 Mon Sep 17 00:00:00 2001
From: Shidorien <Gaetangerard@hotmail.fr>
Date: Thu, 21 Dec 2023 21:03:53 +0100
Subject: [PATCH] Refactor changelog modal component layout and styling

---
 .../changelog-modal.component.tsx             | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 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 b526d1e9..8252921f 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
@@ -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>
     )