From dbf6d72d1f26f843d5f9a32f83a12da35520aa72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 16 Sep 2023 00:52:36 +0000
Subject: [PATCH] layout title with AdminButton

---
 ui/src/App.vue                    | 25 ++++++++++++++++---------
 ui/src/components/AdminButton.vue |  4 ++--
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 4c4b2b7..aa800c4 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,18 +1,25 @@
 <template>
-  <div class="container">
-    <section class="section">
-      <h1 class="title has-text-centered is-uppercase">Adventskalender</h1>
-      <h2 class="subtitle has-text-centered">Der Gelöt</h2>
-    </section>
+  <section class="hero is-primary">
+    <div class="level is-mobile">
+      <div class="level-left">
+        <div class="hero-body">
+          <h1 class="title is-uppercase">Adventskalender</h1>
+          <h2 class="subtitle">Der Gelöt</h2>
+        </div>
+      </div>
+      <div class="level-right">
+        <div class="level-item pr-4">
+          <AdminButton v-model="is_admin" />
+        </div>
+      </div>
+    </div>
+  </section>
 
+  <div class="container">
     <section class="section">
       <AdminView v-if="is_admin" />
       <UserView v-else />
     </section>
-
-    <section class="section">
-      <AdminButton v-model="is_admin" />
-    </section>
   </div>
 </template>
 
diff --git a/ui/src/components/AdminButton.vue b/ui/src/components/AdminButton.vue
index 80f1846..b1e4885 100644
--- a/ui/src/components/AdminButton.vue
+++ b/ui/src/components/AdminButton.vue
@@ -2,11 +2,11 @@
   <LoginModal v-if="modal_visible" @submit="on_submit" @cancel="on_cancel" />
 
   <BulmaButton
-    class="button is-light"
+    class="button is-primary is-outlined is-inverted"
     @click.left="on_click"
     :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
     :busy="is_busy"
-    text="Admin"
+    :text="modelValue ? 'Admin' : 'User'"
   />
 </template>