layout title with AdminButton

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>
 

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>