From 7af1df755f38cd5a241daf13ea732bd484603c44 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 26 Aug 2021 20:42:25 +0200
Subject: [PATCH] UI updates

---
 zero.Web.UI/App/app.vue                       |  2 +-
 zero.Web.UI/App/components/forms/property.vue |  4 ++--
 .../App/components/overlays/confirm.vue       |  4 ++--
 .../components/overlays/overlay-holder.vue    | 19 +++++++++++++------
 zero.Web.UI/App/navigation.vue                |  2 +-
 zero.Web.UI/Sass/Canvas/_navigation.scss      | 15 ++++++++-------
 zero.Web.UI/Sass/Settings/_theme-light.scss   |  2 +-
 7 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/zero.Web.UI/App/app.vue b/zero.Web.UI/App/app.vue
index 7507095a..bfe0ed30 100644
--- a/zero.Web.UI/App/app.vue
+++ b/zero.Web.UI/App/app.vue
@@ -16,7 +16,7 @@
 
 <script>
   import '../sass/sass.js'
-  import AppNavigation from 'zero/navigation.vue'
+  import AppNavigation from './navigation.vue'
   import AppBar from 'zero/bar.vue'
   import AppLogin from 'zero/pages/login/login.vue'
   import AppOverlays from 'zero/components/overlays/overlay-holder.vue'
diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index 63521111..64f89e54 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -105,9 +105,9 @@
     }
   }
 
-  .ui-property.is-text > .ui-property-content
+  .ui-property.is-text
   {
-    margin-top: 2px;
+    grid-gap: 2px;
   }
 
   .ui-property.full-width > .ui-property-content,
diff --git a/zero.Web.UI/App/components/overlays/confirm.vue b/zero.Web.UI/App/components/overlays/confirm.vue
index 932b1a7e..fb9ccd44 100644
--- a/zero.Web.UI/App/components/overlays/confirm.vue
+++ b/zero.Web.UI/App/components/overlays/confirm.vue
@@ -4,8 +4,8 @@
     <p v-localize:html="config.text"></p>
     <ui-error ref="error" style="margin-top: 25px;" />
     <div class="app-confirm-buttons">
-      <ui-button type="light" :label="config.closeLabel" :disabled="state == 'loading'" @click="config.close"></ui-button>
       <ui-button :type="config.confirmType" :state="state" :label="config.confirmLabel" @click="confirm"></ui-button>
+      <ui-button type="light" :label="config.closeLabel" :disabled="state == 'loading'" @click="config.close"></ui-button>
     </div>
   </div>
 </template>
@@ -70,7 +70,7 @@
 <style lang="scss">
   .app-confirm-buttons
   {
-    margin-top: 30px;
+    margin-top: 40px;
   }
 
   .app-confirm p
diff --git a/zero.Web.UI/App/components/overlays/overlay-holder.vue b/zero.Web.UI/App/components/overlays/overlay-holder.vue
index 60139101..35e6035f 100644
--- a/zero.Web.UI/App/components/overlays/overlay-holder.vue
+++ b/zero.Web.UI/App/components/overlays/overlay-holder.vue
@@ -3,9 +3,9 @@
     <transition-group name="overlay" :duration="600">
       <div class="app-overlay-outer" :display="instance.display" v-for="(instance, index) in instances" :key="instance.id" :style="{ transform: instance.display !== 'editor' ? null : 'translateX(' + (editorLength - index - 1) * -60 + 'px)' }">
         <div class="app-overlay-bg" @click="close(instance)"></div>
-        <dialog open class="app-overlay" :data-alias="instance.alias" :style="{ width: instance.width ? (instance.width + 'px') : null }" :class="'theme-' + instance.theme" :display="instance.display">
+        <div open class="app-overlay" :data-alias="instance.alias" :style="{ width: instance.width ? (instance.width + 'px') : null }" :class="'theme-' + instance.theme" :display="instance.display">
           <component :is="instance.component" :model.sync="instance.model" :config="instance" v-bind="instance"></component>
-        </dialog>
+        </div>
       </div>
     </transition-group>
   </div>
@@ -57,7 +57,7 @@
     bottom: 0;
     z-index: 5;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     transition: transform 0.4s ease-out;
 
     & + .app-overlay-outer .app-overlay
@@ -83,11 +83,13 @@
     width: auto;
     height: auto;
     background: var(--color-overlay);
-    border-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
     border: none !important;
     box-shadow: var(--shadow-overlay-dialog);
     padding: var(--padding);
-    text-align: center;
+    padding-top: 40px;
+    text-align: left;
     position: relative;
     -webkit-backface-visibility: hidden;
     z-index: 3;
@@ -104,6 +106,11 @@
     margin-bottom: 20px;
   }
 
+  .app-overlay .ui-headline
+  {
+    margin-bottom: 0.4em;
+  }
+
   .app-overlay[display="dialog"] .ui-form-loading
   {
     height: 200px;
@@ -153,7 +160,7 @@
     .app-overlay
     {
       opacity: 0;
-      transform: scale(0.95);
+      transform: translateY(-20px);
     }
 
     .app-overlay[display="editor"]
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index 762ba83d..8f6d068e 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -64,7 +64,7 @@
             <img class="-image" v-if="userAvatar" :src="userAvatar" :alt="user.name" />
             <span class="-image" v-if="!userAvatar"><i class="fth-user"></i></span>
             <p class="-text"><strong>{{user.name}}</strong></p>
-            <ui-icon symbol="fth-chevron-down" class="-arrow" />
+            <ui-icon symbol="fth-more-horizontal" class="-arrow" /> 
           </button>
         </template>
         <ui-dropdown-button label="Edit" icon="fth-edit-2" @click="editUser" />
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 8f3756a8..715c64e0 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -7,7 +7,7 @@
   top: 0;
   bottom: 0;
   width: 360px;
-  background: var(--color-bg-shade-2);
+  background: var(--color-bg-shade-3);
   z-index: -1;
   margin-left: 0;
   display: flex;
@@ -33,7 +33,7 @@
 
   &.is-active
   {
-    background: var(--color-bg-shade-3);
+    background: var(--color-bg-shade-4);
     font-weight: 700;
   }
 }
@@ -95,7 +95,7 @@
   display: flex;
   align-items: center;
   padding: 0 var(--padding-m);
-  margin: -3px 0 0;
+  margin: 0;
 
   .theme-rounded &
   {
@@ -104,7 +104,7 @@
 
   img
   {
-    height: 28px;
+    height: 24px;
   }
 }
 
@@ -112,7 +112,7 @@
 {
   margin-bottom: var(--padding-s);
   border-bottom: 1px solid var(--color-line-onbg);
-  background: var(--color-bg-shade-2);
+  background: var(--color-bg-shade-3);
 
   .ui-button.type-light
   {
@@ -262,8 +262,9 @@ a.app-nav-child
 
 .app-nav-account
 {
-  padding: var(--padding);
-  padding-top: var(--padding-xs);
+  padding: var(--padding-m);
+  border-top: 1px solid var(--color-line-onbg);
+  //padding-top: var(--padding-xs);
 }
 
 .app-nav-account-button
diff --git a/zero.Web.UI/Sass/Settings/_theme-light.scss b/zero.Web.UI/Sass/Settings/_theme-light.scss
index 3a18ceb9..e9b9f526 100644
--- a/zero.Web.UI/Sass/Settings/_theme-light.scss
+++ b/zero.Web.UI/Sass/Settings/_theme-light.scss
@@ -28,7 +28,7 @@
   $color-bg-shade-7: #878787;
 
   // misc colors
-  $color-overlay-shade: rgba(0, 0, 0, 0.15);
+  $color-overlay-shade: rgba(0, 0, 0, 0.2);
 
 
   // ----------------------------------------------------------------------------------