Make the UI Dark

Author: shyim

public/global.css

@@ -2,10 +2,11 @@ html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
+	background: #292929;
 }
 
 body {
-	color: #333;
+	color: #fff;
 	margin: 0;
 	padding: 8px;
 	box-sizing: border-box;
@@ -32,7 +33,6 @@ label {
 input, button, select, textarea {
 	font-family: inherit;
 	font-size: inherit;
-	-webkit-padding: 0.4em 0;
 	padding: 0.4em;
 	margin: 0 0 0.5em 0;
 	box-sizing: border-box;

src/App.svelte

@@ -1,12 +1,12 @@
 <script>
     import { messageStore } from './messageStore.js';
-    import { github } from "svelte-highlight/styles";
+    import { dracula } from "svelte-highlight/styles";
 
     import Message from './Message.svelte';
 </script>
 
 <svelte:head>
-    {@html github}
+    {@html dracula}
 </svelte:head>
 
 <main>

src/Elements/PauseElement.svelte

@@ -1,14 +1,17 @@
 <script>
     import { assembleUrl } from '../util';
-    export let uuid;
+    export let message;
 
     function resumeExecution() {
+        message.resumed = true;
         fetch(assembleUrl('/unlock'), {
             headers: {
-              'pd-id': uuid
+              'pd-id': message.uuid
             }
         });
     }
 </script>
 
-<button on:click|once={resumeExecution}>Resume {uuid}</button>
+{#if message.resumed === undefined }
+    <button on:click={resumeExecution}>Resume</button>
+{/if}

src/Message.svelte

@@ -6,12 +6,16 @@
 
     export let message;
 
-    console.log(message);
+    function formatDate(time) {
+        const d = new Date();
+        d.setTime(time * 1000);
+        return d.toLocaleTimeString();
+    }
 </script>
 
 <div class="message">
     <div class="information">
-        <span class="time">{message['time']}</span>
+        <span class="time">{formatDate(message.time)}</span>
 
         <div class="tags">
             {#each message['tags'] as tag}
@@ -22,15 +26,17 @@
 
     <div class="content">
         {#each message['payloads'] as payload}
-            {#if payload['type'] === 'code'}
-                <CodeElement content={payload['content']} />
-            {:else if payload['type'] === 'html'}
-                <HtmlElement content={payload['content']} />
-            {:else if payload['type'] === 'table'}
-                <TableElement content={payload['content']} />
-            {:else if payload['type'] === 'pause'}
-                <PauseElement uuid={message['uuid']} />
-            {/if}
+            <div class="element">
+                {#if payload['type'] === 'code'}
+                    <CodeElement content={payload['content']} />
+                {:else if payload['type'] === 'html'}
+                    <HtmlElement content={payload['content']} />
+                {:else if payload['type'] === 'table'}
+                    <TableElement content={payload['content']} />
+                {:else if payload['type'] === 'pause'}
+                    <PauseElement message={message} />
+                {/if}
+            </div>
         {/each}
     </div>
 
@@ -43,9 +49,9 @@
     .message {
         display: flex;
         flex-flow: row wrap;
-        border: 1px solid #333;
         padding: 20px;
         margin: 20px;
+        background: #121212;
     }
 
     .information {
@@ -59,4 +65,8 @@
     .origin {
         width: 100%;
     }
+
+    .element {
+        margin-bottom: 10px;
+    }
 </style>

src/main.js

@@ -1,10 +1,7 @@
 import App from './App.svelte';
 
 const app = new App({
-    target: document.body,
-    props: {
-        name: 'world'
-    }
+    target: document.body
 });
 
 export default app;

src/messageStore.js

@@ -14,6 +14,8 @@ eventSource.onmessage = function (message) {
             m.push(data);
         }
 
+        m.sort((a, b) => a.time - b.time);
+
         return m;
     })
 }