From 2c9efb1df8fea93f77d63b214acc46e0b2a45033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Mon, 12 Sep 2022 11:48:45 +0000
Subject: [PATCH] Use Props, more classless scoped styling

---
 ui/src/components/THWLogo.vue  | 22 ++++++++++++++--------
 ui/src/components/TitleBar.vue | 16 +++++++++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/THWLogo.vue b/ui/src/components/THWLogo.vue
index 2d6a6cd..17f1e31 100644
--- a/ui/src/components/THWLogo.vue
+++ b/ui/src/components/THWLogo.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="d-flex flex-column text-wrap">
     <div class="d-flex justify-start justify-md-end">
-      <span class="d-none d-md-flex text-right thw-logo-font above mr-2">
-        <slot name="above">Technisches Hilfswerk</slot>
+      <span class="d-none d-md-flex text-right thw-logo-font mr-2">
+        {{ above }}
       </span>
       <v-img
         class="d-none d-sm-flex"
@@ -12,17 +12,23 @@
       />
     </div>
     <v-divider class="d-none d-md-block my-1" />
-    <span class="d-none d-md-flex thw-logo-font below">
-      <slot>OV Musterstadt</slot>
+    <span class="d-none d-md-flex thw-logo-font">
+      {{ below }}
     </span>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
-export default class THWLogo extends Vue {}
+export default class THWLogo extends Vue {
+  @Prop()
+  public above!: string;
+
+  @Prop()
+  public below!: string;
+}
 </script>
 
 <style scoped>
@@ -36,13 +42,13 @@ export default class THWLogo extends Vue {}
   border-color: white;
 }
 
-.above {
+div.flex-column > div > span:first-child {
   font-size: 28px;
   line-height: 28px;
   align-items: center;
 }
 
-.below {
+div.flex-column > span:last-child {
   font-size: 15px;
   line-height: 15px;
 }
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index 0654e7b..b1239d3 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -2,7 +2,7 @@
   <v-toolbar color="primary" prominent dark>
     <v-container class="d-flex pa-0" fluid fill-height>
       <div class="d-flex justify-start text-left text-no-wrap">
-        <THWLogo />
+        <THWLogo :above="logo_above" :below="logo_below" />
       </div>
 
       <div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5">
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import Clock from "./Clock.vue";
 import THWLogo from "./THWLogo.vue";
 
@@ -36,7 +36,17 @@ import THWLogo from "./THWLogo.vue";
     THWLogo,
   },
 })
-export default class TitleBar extends Vue {}
+export default class TitleBar extends Vue {
+  @Prop({
+    default: "Technisches Hilfswerk",
+  })
+  public logo_above!: string;
+
+  @Prop({
+    default: "OV Musterstadt",
+  })
+  public logo_below!: string;
+}
 </script>
 
 <style scoped>