feat(webapp): add new UI

webapp/src/scss/index.scss

@@ -1,14 +1,41 @@
 @import "normalize-scss/sass/normalize/import-now";
 
-// @import "normalize-scss/sass/_normalize";
-// @include normalize();
-
-/** COLORS **/
-$backgroundColor: #fcfcfc;
-
 body {
     font-family: "Roboto";
-    background-color: $backgroundColor;
+    padding-top: 20px;
+    background-color: #1e1e1e;
+    display: block;
+}
+
+.channel {
+    margin: auto;
+    width: 20%;
+    word-wrap: break-word;
+    font-size: 20px;
+    color: #cb1919;
+    font-weight: bold;
+    box-shadow: 3px 0 0 0 white, 0 3px 0 0 white, 3px 3px 0 0 white, 3px 0 0 0 white inset, 0 3px 0 0 white inset;
+    display: block;
+    overflow: hidden;
+    text-align: center;
+    border-collapse: collapse;
+}
+
+.subchannel {
+    text-align: left;
+    width: 100%;
+    box-shadow: 1px 0 0 0 white, 0 1px 0 0 white, 1px 1px 0 0 white, 1px 0 0 0 white inset, 0 1px 0 0 white inset;
+    color: #cb1919;
+    margin: 0;
+    padding: 0;
+    border-collapse: collapse;
+    box-sizing: content-box;
+}
+
+.client {
+    display: block;
+    padding-left: 15px;
+    color: #a01919;
 }
 
 // @import "animations";

webapp/src/views/index.hbs

@@ -1,12 +1,16 @@
 {{#each channels}}
-    {{this.name}}<br />
+    <div class="channel">
-    {{#each this.clients}}
+        {{this.name}}
-        &nbsp;&nbsp;&nbsp;{{this.name}}<br />
-    {{/each}}
-    {{#each this.children}}
-        &nbsp;&nbsp;&nbsp;{{this.name}}<br />
         {{#each this.clients}}
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.name}}<br />
+            <div class="client">{{this.name}}</div>
         {{/each}}
-    {{/each}}
+        {{#each this.children}}
+            <div class="subchannel">
+                {{this.name}}
+                {{#each this.clients}}
+                    <div class="client">{{this.name}}</div>
+                {{/each}}
+            </div>
+        {{/each}}
+    </div>
 {{/each}}