From cc91d9e9aff01f737bff5ec769ee27bc8cf0d961 Mon Sep 17 00:00:00 2001
From: ThinLiquid <thnlqd@gmail.com>
Date: Wed, 18 Oct 2023 02:19:19 +0100
Subject: [PATCH] =?UTF-8?q?[=E2=9A=A1]=20Improve=20info=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/info.ts | 50 ++++++++++++++++--------------------------------
 src/files.d.ts   |  1 +
 src/types.ts     |  4 ++++
 3 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/apps/info.ts b/src/apps/info.ts
index 7ed97ad..2e69b75 100644
--- a/src/apps/info.ts
+++ b/src/apps/info.ts
@@ -1,5 +1,5 @@
 import icon from '../assets/icons/info.png'
-import { App } from '../types.ts'
+import { App, PackageJSON } from '../types.ts'
 import { FlowWindow } from '../wm.ts'
 
 export default class SettingsApp implements App {
@@ -10,6 +10,7 @@ export default class SettingsApp implements App {
   canResize = true
 
   async open (): Promise<FlowWindow> {
+    const packageJSON: PackageJSON = await import('../../package.json')
     const win = window.wm.createWindow({
       title: this.name,
       icon,
@@ -19,40 +20,21 @@ export default class SettingsApp implements App {
     })
 
     win.content.style.padding = '10px'
+    win.content.style.textAlign = 'center'
+    win.content.style.display = 'flex'
+    win.content.style.flexDirection = 'column'
+    win.content.style.justifyContent = 'center'
+    win.content.style.alignItems = 'center'
     win.content.innerHTML = `
-        <h1>FlowOS</h1>
-        <p>v2.0</p>
-
-        <p> Created by ThinLiquid, 1nspird_, Proudparot2, Systemless_  </p>
-
-        <a class="discord" href="https://discord.gg/flowos"> Discord </a>
-
-        <a class="github" href="https://github.com/Flow-Works/FlowOS-2.0"> Github </a>
-
-        <style>
-
-          #contributers {
-            font-size:12px;
-          }
-
-          h1 {
-            text-align: center;
-            font-size: 48px;
-          }
-          p {
-            text-align: center;
-          }
-          .github {
-            float:right;
-            position: relative;
-            top: 125px;
-          }
-          .discord {
-            float:left;
-            position: relative;
-            top: 125px;
-          }
-        </style>
+        <div>
+          <h1 style="margin:0;">FlowOS</h1>
+          <p style="margin:0;">v${packageJSON.version}</p>
+          <br/>
+          <p>Created by ThinLiquid, 1nspird_, proudparot2, systemless_</p>
+          <a class="discord" href="https://discord.gg/flowos">Discord</a>
+         - 
+        <a class="github" href="https://github.com/Flow-Works/FlowOS-2.0">Github</a>
+        </div>
     `
 
     return win
diff --git a/src/files.d.ts b/src/files.d.ts
index 31dca6b..5d25086 100644
--- a/src/files.d.ts
+++ b/src/files.d.ts
@@ -1 +1,2 @@
 declare module '*.png'
+declare module '*.json'
diff --git a/src/types.ts b/src/types.ts
index 71f5f9c..f978b3b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,6 +9,10 @@ export interface StatusItem {
   run: Function
 }
 
+export interface PackageJSON {
+  version: string
+}
+
 export interface App {
   name: string
   pkg: string