From 69423677770a731d3e273296d233462df4c11068 Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Thu, 2 Sep 2021 11:46:32 +0100
Subject: [PATCH] Update runtime app & usermenu styles

---
 packages/web-runtime/src/App.vue              | 33 ++++++++-----------
 .../web-runtime/src/components/UserMenu.vue   |  2 +-
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index ef791cb07f2..5b919b010b0 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -6,12 +6,12 @@
     </skip-to>
     <div
       v-if="user.isAuthenticated && !user.userReady"
-      class="loading-overlay"
+      class="loading-overlay uk-flex uk-flex-middle uk-flex-center"
       :style="{
         backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
       }"
     >
-      <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" class="uk-position-center" />
+      <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" />
     </div>
     <template v-else-if="!showHeader">
       <router-view name="fullscreen" />
@@ -402,7 +402,7 @@ export default {
   }
 }
 </script>
-<style>
+<style lang="scss">
 html,
 body,
 #web,
@@ -439,10 +439,6 @@ body,
   overflow-y: auto;
 }
 
-#oc-header {
-  grid-area: header;
-}
-
 .oc-app-navigation {
   position: sticky;
   top: 0;
@@ -452,21 +448,18 @@ body,
 .loading-overlay {
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 50%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
+  background-position: center;
   height: 100%;
-}
-
-.loading-overlay .oc-spinner {
-  color: #0a264e;
-}
+  width: 100%;
 
-.loading-overlay .oc-spinner:after {
-  border: 10px solid;
-  border-bottom: 10px solid transparent;
+  .oc-spinner {
+    color: #0a264e;
+    display: inline-block;
+    &::after {
+      border: 10px solid;
+      border-bottom: 10px solid transparent;
+    }
+  }
 }
 
 @media only screen and (max-width: 960px) {
diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
index a502f892716..7b595e4d202 100644
--- a/packages/web-runtime/src/components/UserMenu.vue
+++ b/packages/web-runtime/src/components/UserMenu.vue
@@ -10,7 +10,7 @@
     >
       <oc-grid flex>
         <avatar-image
-          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle"
+          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle oc-px-s"
           :width="24"
           :userid="userId"
           :user-name="userDisplayName"