Add scss and styles

src/DashboardView/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <main id="dashboard">
+  <main id="dashboard" v-on:keyup.76="toggleLogs">
     <section id="dashboard-primary">
       <hdr></hdr>
       <village-state-list />
@@ -21,6 +21,7 @@ import QuickActions from './QuickActions';
 import VillageStateList from './VillageStateList';
 import LogList from './LogList';
 import { mapState } from 'vuex';
+import { Mutations } from './Store';
 export default {
   components: {
     'hdr': Header,
@@ -37,6 +38,11 @@ export default {
   computed: mapState({
     isLogsVisible: state => state.views.logs,
   }),
+  methods: {
+    toggleLogs() {
+      this.$store.commit(Mutations.toggleLogs);
+    },
+  },
 };
 </script>
 

src/DashboardView/Header.vue

@@ -3,14 +3,19 @@
     <h1 class="title">
       [{{ shared.name }}] {{ villageName }}
       <span class="version">- {{ shared.version }}</span>
-      <a href="#" v-on:click.prevent="pause()">
+    </h1>
+    <p>
+      <a href="#" v-on:click.prevent="pause">
         pause <span v-if="shared.pauseSeconds" v-text="shared.pauseSeconds"></span>
       </a>
-    </h1>
+      <a href="#" v-on:click.prevent="toggleLogs">logs</a>
+    </p>
   </section>
 </template>
 
 <script>
+import { Mutations } from './Store';
+
 export default {
   data() {
     return {
@@ -27,6 +32,9 @@ export default {
     pause() {
       this.shared.pause();
     },
+    toggleLogs() {
+      this.$store.commit(Mutations.toggleLogs);
+    },
   },
 };
 </script>

src/DashboardView/LogList.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="log-list">
-    <p><strong>Logs</strong>, <a href="#" v-on:click.prevent="close">close</a></p>
+    <p class="summary"><strong>Logs</strong>, <a href="#" v-on:click.prevent="close">close</a></p>
     <table class="log-table">
-      <tr v-for="record in logs" class="log-record">
+      <tr v-for="record in logs" :class="rowClasses(record)">
         <td v-text="record.level"></td>
         <td v-text="formatDate(record.ts)"></td>
         <td v-text="record.message"></td>
@@ -23,6 +23,12 @@ export default {
     }),
   },
   methods: {
+    rowClasses(record) {
+      return {
+        error: record.level === 'error' || undefined,
+        warning: record.level === 'warn' || undefined,
+      };
+    },
     formatDate(ts) {
       const d = new Date(ts * 1000);
       return dateFormat(d, 'HH:MM:ss');
@@ -34,18 +40,23 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
+.summary {
+  @include with-padding;
+}
 .log-list {
   background-color: white;
 }
 .log-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 6px auto 0;
-}
-.log-record > td {
-  border-top: 1px solid #ddd;
-  border-left: 1px solid #ddd;
-  padding: 2px 4px;
+  @extend %table;
+
+  .error {
+    color: $error-color;
+  }
+
+  .warning {
+    color: $waring-color;
+  }
 }
 </style>

src/DashboardView/ResourceBalance.vue

@@ -49,11 +49,12 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .good {
-  color: green;
+  color: $success-color;
 }
 .bad {
-  color: red;
+  color: $error-color;
 }
 </style>

src/DashboardView/Store.ts

@@ -5,6 +5,7 @@ import { LogStorage } from '../Storage/LogStorage';
 export enum Mutations {
     showLogs = 'showLogs',
     hideLogs = 'hideLogs',
+    toggleLogs = 'toggleLogs',
     updateLogs = 'updateLogs',
 }
 
@@ -23,6 +24,9 @@ export function createStore() {
             [Mutations.hideLogs](state) {
                 state.views.logs = false;
             },
+            [Mutations.toggleLogs](state) {
+                state.views.logs = !state.views.logs;
+            },
             [Mutations.updateLogs](state, { logs }) {
                 state.logs = logs;
             },

src/DashboardView/TaskList.vue

@@ -59,7 +59,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .task-list {
   margin-top: 8px;
   margin-bottom: 8px;
@@ -72,14 +73,7 @@ export default {
   overflow-x: hidden;
 }
 .task-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 6px auto 0;
-}
-.task-item > td {
-  border-top: 1px solid #ddd;
-  border-left: 1px solid #ddd;
-  padding: 2px 4px;
+  @extend %table;
 }
 .this-village {
   color: blue;

src/DashboardView/VillageResource.vue

@@ -41,11 +41,12 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .warning {
-  color: orange;
+  color: $waring-color;
 }
 .bad {
-  color: red;
+  color: $error-color;
 }
 </style>

src/DashboardView/style.scss

@@ -0,0 +1,22 @@
+$component-padding-x: 4px;
+$component-padding-y: 2px;
+
+$success-color: #1fb840;
+$error-color: #dc3545;
+$waring-color: #d49e00;
+
+@mixin with-padding {
+  padding: $component-padding-y $component-padding-x;
+}
+
+%table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 6px auto 0;
+
+  td {
+    border-top: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    @include with-padding
+  }
+}