About dialog

frontend/src/app.svelte

@@ -4,7 +4,7 @@
   import contextMenu from '$lib/stores/contextmenu';
   import environment from '$lib/stores/environment';
   import applicationInited from '$lib/stores/inited';
-  import About from '$organisms/about/index.svelte';
+  import About from '$organisms/about.svelte';
   import Connection from '$organisms/connection/index.svelte';
   import Settings from '$organisms/settings/index.svelte';
   import { EventsOn } from '$wails/runtime';
@@ -38,6 +38,7 @@
     {#key $contextMenu}
       <ContextMenu {...$contextMenu} on:close={contextMenu.hide} />
     {/key}
+
     <Settings bind:show={settingsModalOpen} />
     <About bind:show={aboutModalOpen} />
   {/if}

frontend/src/lib/actions/alink.js

@@ -0,0 +1,8 @@
+import { BrowserOpenURL } from '$wails/runtime/runtime';
+
+export default function alink(node) {
+  node.addEventListener('click', e => {
+    e.preventDefault();
+    BrowserOpenURL(node.href);
+  });
+}

frontend/src/organisms/about.svelte

@@ -0,0 +1,64 @@
+<script>
+  import Icon from '$components/icon.svelte';
+import Modal from '$components/modal.svelte';
+  import alink from '$lib/actions/alink';
+
+  export let show = true;
+</script>
+
+<Modal bind:show width="400px" title=" ">
+  <div class="brand">
+    <img src="/logo.png" alt="Rolens logo" />
+    <div>
+      <div class="title">Rolens</div>
+      <div class="description">Intuitive MongoDB <br/> administration tool</div>
+    </div>
+  </div>
+
+  <hr />
+
+  <div class="info">
+    <p class="copy">© Romein van Buren, 2023.</p>
+    <p>
+      <a href="" use:alink>Documentation</a> |
+      <a href="https://github.com/garraflavatra/rolens" use:alink>GitHub</a> |
+      <a href="https://github.com/garraflavatra/rolens/issues/new" use:alink>Report a bug</a> |
+      <a href="https://github.com/garraflavatra/rolens/blob/main/LICENSE" use:alink>License</a>
+    </p>
+  </div>
+</Modal>
+
+<style>
+  .brand {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .brand > img {
+    width: 125px;
+    flex: 0 1 125px;
+  }
+  .brand .title {
+    font-size: 2.25rem;
+    font-weight: 600;
+    line-height: 2.5rem;
+  }
+  .brand .description {
+    font-size: 1.5rem;
+    line-height: 1.6rem;
+  }
+
+  hr {
+    margin: 2rem 1rem;
+  }
+
+  .info {
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+    margin: 0 1rem 1rem;
+    text-align: center;
+  }
+  .info .copy {
+    font-weight: 500;
+  }
+</style>

frontend/src/organisms/about/index.svelte

@@ -1,59 +0,0 @@
-<script>
-  import Modal from '$components/modal.svelte';
-
-  export let show = false;
-</script>
-
-<Modal bind:show overflow={false}>
-  <div class="about">
-    <div class="brand">
-      <img src="/logo.png" alt="" class="logo" />
-      <div class="text">
-        <div class="name">Rolens</div>
-        <div class="subtitle">A modest MongoDB client</div>
-      </div>
-    </div>
-    <div class="cols">
-      <div>
-        d
-      </div>
-      <div>
-        d
-      </div>
-    </div>
-  </div>
-</Modal>
-
-<style>
-  .about {
-    padding: 2rem;
-  }
-
-  .brand {
-    margin-top: -90px;
-    display: flex;
-  }
-  .brand .logo {
-    height: 200px;
-  }
-  .brand .text {
-    align-self: flex-end;
-    margin: 0 0 4rem 1rem;
-  }
-  .brand .text .name {
-    font-size: 4rem;
-    margin-bottom: 2rem;
-    font-weight: 600;
-  }
-  .brand .text .subtitle {
-    font-size: 2rem;
-    font-weight: 500;
-  }
-
-  .cols {
-    display: grid;
-    margin-top: 2rem;
-    grid-template: 1fr / 1fr 1fr;
-    gap: 1rem;
-  }
-</style>

frontend/src/styles/style.css

@@ -41,6 +41,19 @@ p strong {
   font-weight: 700;
 }
 
+a {
+  color: rgb(0, 0, 204);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: #ccc;
+}
+
 .loading {
   cursor: wait;
 }