Adds better colors

assets/components/ContainerTitle.vue

@@ -32,7 +32,7 @@ export default {
     opacity: 0.6;
     &:after,
     &:before {
-      background-color: var(--body-color);
+      background-color: var(--text-color);
     }
 
     &:hover {

assets/components/Search.vue

@@ -82,8 +82,18 @@ export default {
   z-index: 10;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
-  .delete {
+  button.delete {
     margin-left: 1em;
+    background-color: var(--scheme-main-ter);
+    opacity: 0.6;
+    &:after,
+    &:before {
+      background-color: var(--text-color);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .icon {

assets/pages/Container.vue

@@ -58,7 +58,11 @@ export default {
     }
   },
   beforeRouteUpdate(to, from, next) {
-    this.beforeRouteEnter(to, from, next);
+    if (store.getters.allContainersById[to.params.id]) {
+      next();
+    } else {
+      next({ name: "container-not-found" });
+    }
   },
 };
 </script>

assets/pages/ContainerNotFound.vue

@@ -2,7 +2,10 @@
   <div class="hero is-halfheight">
     <div class="hero-body">
       <div class="container has-text-centered">
-        <h1 class="title">This container no longer exists or has been removed</h1>
+        <h1 class="title">
+          Container not found.
+          <small class="subtitle">It may have been removed.</small>
+        </h1>
       </div>
     </div>
   </div>
@@ -10,7 +13,6 @@
 
 <script>
 export default {
-  props: [],
   name: "ContainerNotFound",
 };
 </script>

assets/pages/Index.vue

@@ -2,7 +2,10 @@
   <div class="hero is-halfheight">
     <div class="hero-body">
       <div class="container has-text-centered">
-        <h1 class="title">Please choose a container from the list to view the logs</h1>
+        <h1 class="title">
+          Hello,
+          <small class="subtitle">friend. I am here for you logging needs.</small>
+        </h1>
       </div>
     </div>
   </div>

assets/pages/PageNotFound.vue

@@ -2,7 +2,10 @@
   <div class="hero is-halfheight">
     <div class="hero-body">
       <div class="container has-text-centered">
-        <h1 class="title">This page does not exist</h1>
+        <h1 class="title">
+          Oops,
+          <small class="subtitle">this page doesn't exist</small>
+        </h1>
       </div>
     </div>
   </div>
@@ -10,7 +13,6 @@
 
 <script>
 export default {
-  props: [],
   name: "PageNotFound",
 };
 </script>

assets/styles.scss

@@ -3,7 +3,6 @@
 
 $body-family: "Roboto", sans-serif;
 $body-background-color: var(--body-background-color);
-$body-color: var(--body-color);
 
 $scheme-main: var(--scheme-main);
 $scheme-main-bis: var(--scheme-main-bis);
@@ -15,8 +14,12 @@ $border-hover: var(--border-hover-color);
 $menu-item-active-background-color: var(--menu-item-active-background-color);
 $menu-item-color: var(--menu-item-color);
 $menu-item-hover-background-color: var(--menu-item-hover-background-color);
+$menu-item-hover-color: var(--menu-item-hover-color);
+
+$text-strong: var(--text-strong-color);
+$text: var(--text-color);
+
 
-$title-color: var(--title-color);
 
 @import "~bulma";
 @import "../node_modules/splitpanes/dist/splitpanes.css";
@@ -37,13 +40,14 @@ html {
   --secondary-color: #{$yellow};
 
   --body-background-color: #{$black-bis};
-  --body-color: #{$grey-lighter};
 
   --menu-item-active-background-color: var(--primary-color);
   --menu-item-color: hsl(0, 6%, 87%);
   --menu-item-hover-background-color: #{$white-ter};
+  --menu-item-hover-color: #{$black-ter};
 
-  --title-color: #{$grey-lightest};
+  --text-strong-color: #{$grey-lightest};
+  --text-color: #{$grey-lighter};
 }
 
 [data-theme="light"] {
@@ -63,8 +67,10 @@ html {
 
   --menu-item-color: #{$grey-dark};
   --menu-item-hover-background-color: #eee8e7;
+  --menu-item-hover-color: #{black-ter};
 
-  --title-color: #{$grey-dark};
+  --text-strong-color: #{$grey-dark};
+  --text-color: #{$grey-darker};
 }
 
 html {