Clock update instantly + slower interval

ui/src/components/Clock.vue

@@ -14,12 +14,15 @@ export default class Clock extends Vue {
   @Prop()
   public format!: string;
 
+  private update(): void {
+    this.formatted = DateTime.now()
+      .setLocale(navigator.language)
+      .toFormat(this.format);
+  }
+
   public created(): void {
-    this.interval = setInterval((): void => {
-      this.formatted = DateTime.now()
-        .setLocale(navigator.language)
-        .toFormat(this.format);
-    }, 1000);
+    this.update();
+    this.interval = setInterval(this.update, 10000);
   }
 
   public beforeDestroy(): void {

ui/src/components/TitleBar.vue

@@ -1,30 +1,19 @@
 <template>
   <v-toolbar color="primary" prominent dark>
-    <v-row class="d-flex">
-      <v-col
-        cols="3"
-        class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
-      >
-        LOGO
-      </v-col>
+    <v-container class="d-flex pa-0" fluid fill-height>
+      <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
 
-      <v-col
-        cols="6"
-        class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
-      >
+      <div class="d-flex justify-center text-center mx-auto thw-font">
         TITLE
-      </v-col>
+      </div>
 
-      <v-col
-        cols="3"
-        class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
-      >
+      <div class="d-flex justify-end slim text-right text-no-wrap">
         <div class="flex-column">
           <Clock class="d-flex justify-end" format="DDD" />
           <Clock class="d-flex justify-end" format="T" />
         </div>
-      </v-col>
-    </v-row>
+      </div>
+    </v-container>
   </v-toolbar>
 </template>
 
@@ -40,5 +29,12 @@ import Clock from "./Clock.vue";
 export default class TitleBar extends Vue {}
 </script>
 
-<style>
+<style lang="css" scoped>
+.slim {
+  max-width: 0;
+}
+
+.thw-font {
+  font-family: "Lubalin Graph", "Roboto", sans-serif !important;
+}
 </style>