Merge pull request #6 from pumpi/design

Design changes for frontend

Author: shyim

package.json

@@ -6,7 +6,8 @@
     "dev": "rollup -c -w",
     "start": "sirv public",
     "prettier": "prettier --write --plugin-search-dir=. \"./**/*.{svelte,html,js}\"",
-    "prettier-check": "prettier --check --plugin-search-dir=. \"./**/*.{svelte,html,js}\""
+    "prettier-check": "prettier --check --plugin-search-dir=. \"./**/*.{svelte,html,js}\"",
+    "send-sample-output": "curl -X POST \"localhost:9009/client\" -H \"accept: application/json\" -H \"Content-Type: application/json\" -H \"pd-id: d23db8dd-f46c-44bb-a88d-f29442a77879\" --data-binary @test-table.json && curl -X POST \"localhost:9009/client\" -H \"accept: application/json\" -H \"Content-Type: application/json\" -H \"pd-id: d23db8dd-f46c-44bb-a88d-f29442a77879\" --data-binary @test-html.json && curl -X POST \"localhost:9009/client\" -H \"accept: application/json\" -H \"Content-Type: application/json\" -H \"pd-id: d23db8dd-f46c-44bb-a88d-f29442a77879\" --data-binary @test-pause.json"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",

src/App.svelte

@@ -1,13 +1,67 @@
 <style type="text/css">
+    .header {
+        background: rgba(255,255,255,.1);
+        position: sticky;
+        top: 0;
+        padding: 20px;
+        display: flex;
+        align-items: flex-end;
+    }
+
+    .logo {
+        font-size: 40px;
+        font-family: monospace;
+        padding-right: 40px;
+    }
+
     .tags span {
         display: inline-block;
-        padding: 10px;
-        margin-right: 15px;
+        padding: 2px 10px;
+        margin: 10px 15px 0 0;
+        background: rgba(255,255,255,.1);
+        border-radius: 3px;
+        cursor: pointer;
+        line-height: 1.2;
     }
 
     .tags .active {
         background: #18171b;
     }
+
+    :global(.btn) {
+        display: inline-block;
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid #28a745;
+        padding: .2rem .9rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        border-radius: .25rem;
+        transition: background .15s;
+        background-color: #28a745;
+        color: #FFF;
+        cursor: pointer;
+    }
+
+    :global(.btn:hover) {
+        background: #116625;
+    }
+
+    .blink {
+        animation: blinker 1s step-start infinite;
+    }
+
+    @keyframes blinker {
+        50% {
+            opacity: 0;
+        }
+    }
 </style>
 
 <script>
@@ -61,16 +115,47 @@
     $: tags = [...$tagStore];
 </script>
 
+<svelte:head>
+    <style>
+        /* could also be handled via the theme, but we leave that static for now */
+        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
+        /* all css that we need is a global reset sheet */
+        html, body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 16px;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            color: inherit;
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:visited,
+        a:active {
+            text-decoration: none;
+        }
+    </style>
+</svelte:head>
+
 <main>
-    <div class="tags">
-        {#each tags as tag}
+    <div class="header">
+        <div class="logo">
+            [pd<span class="blink">_</span>]
+        </div>
+        <div class="tags">
+            {#each tags as tag}
             <span
-                class="{$activeTagStore.has(tag) ? 'active' : ''}"
-                on:click="{switchTagStatus(tag)}"
+                    class="{$activeTagStore.has(tag) ? 'active' : ''}"
+                    on:click="{switchTagStatus(tag)}"
             >
                 {tag}
             </span>
-        {/each}
+            {/each}
+        </div>
     </div>
 
     {#each displayMessages as message}

src/Elements/PauseElement.svelte

@@ -13,5 +13,5 @@
 </script>
 
 {#if message.resumed === undefined}
-    <button on:click="{resumeExecution}">Resume</button>
+    <button class="btn" on:click="{resumeExecution}">Resume ⏵</button>
 {/if}

src/Elements/TableElement.svelte

@@ -1,12 +1,34 @@
+<style type="text/css">
+    table {
+        width: 100%;
+        border: unset;
+        border-collapse: collapse;
+    }
+    thead {
+        background: #222;
+    }
+    th {
+        text-align: left;
+    }
+    th, td {
+        padding: 10px 15px;
+    }
+    tr:nth-child(odd) {
+        background: rgba(255,255,255,.03);
+    }
+</style>
+
 <script>
     export let content;
 </script>
 
 <table>
     {#if content['headers']}
-        {#each content['headers'] as header}
-            <th>{header}</th>
-        {/each}
+        <thead>
+            {#each content['headers'] as header}
+                <th>{header}</th>
+            {/each}
+        </thead>
     {/if}
 
     {#each content['rows'] as row}

src/FormattedTimestamp.svelte

@@ -1,3 +1,9 @@
+<style type="text/css">
+    .time {
+        font-family: monospace;
+    }
+</style>
+
 <script>
     export let unixTimestamp;
 

src/Message.svelte

@@ -2,9 +2,9 @@
     .message {
         display: flex;
         flex-flow: row wrap;
-        padding: 20px;
-        margin: 20px;
-        background: #121212;
+        padding: 30px 20px;
+        margin: 0 20px;
+        border-bottom: 1px solid #393939;
     }
 
     .information {
@@ -16,12 +16,23 @@
     }
 
     .origin {
-        width: 100%;
+        padding-left: 10%;
+        margin-top: 15px;
+        font-family: monospace;
     }
 
     .element {
         margin-bottom: 10px;
     }
+
+    .tags span {
+        display: inline-block;
+        padding: 2px 10px;
+        margin: 10px 15px 0 0;
+        background: rgba(255,255,255,.1);
+        border-radius: 3px;
+        line-height: 1.2
+    }
 </style>
 
 <script>