Merge pull request #19 from Flow-Works/thin-dev-branch

Thin-dev-branch

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>
+        <div>
-        <p>v2.0</p>
+          <h1 style="margin:0;">FlowOS</h1>
-
+          <p style="margin:0;">v${packageJSON.version}</p>
-        <p> Created by ThinLiquid, 1nspird_, Proudparot2, Systemless_  </p>
+          <br/>
-
+          <p>Created by ThinLiquid, 1nspird_, proudparot2, systemless_</p>
-        <a class="discord" href="https://discord.gg/flowos"> Discord </a>
+          <a class="discord" href="https://discord.gg/flowos">Discord</a>
-
+         - 
-        <a class="github" href="https://github.com/Flow-Works/FlowOS-2.0"> Github </a>
+        <a class="github" href="https://github.com/Flow-Works/FlowOS-2.0">Github</a>
-
+        </div>
-        <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>
     `
 
     return win

src/files.d.ts

@@ -1 +1,2 @@
 declare module '*.png'
+declare module '*.json'

src/style.less

@@ -11,10 +11,6 @@
   --crust: #11111b;
 }
 
-.bx-category {
-  color: #181926;
-}
-
 body,
 html {
   background-color: var(--crust);
@@ -55,10 +51,9 @@ toolbar {
   justify-content: center;
 
   div[data-toolbar-id="appview"] {
-    background: rgb(150, 181, 246);
+    background: linear-gradient(45deg, var(--crust), var(--surface-0));
-    background: linear-gradient(45deg, rgba(150, 181, 246, 1) 0%, rgba(150, 181, 246, 1) 12%, rgba(77, 129, 236, 1) 100%);
-    color: black;
   }
+
   & > div {
     background: var(--base);
     padding: 5px;

src/types.ts

@@ -9,6 +9,10 @@ export interface StatusItem {
   run: Function
 }
 
+export interface PackageJSON {
+  version: string
+}
+
 export interface App {
   name: string
   pkg: string