From eb4dc6fa8d993dbb6f8b8de59ee264c6ba358aa0 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 4 Mar 2021 22:22:20 +0100
Subject: [PATCH] UI updates

---
 .../App/components/forms/form-header.vue      |  2 +-
 .../components/overlays/dropdown-button.vue   |  4 --
 zero.Web.UI/App/components/tables/table.scss  |  9 ++++-
 zero.Web.UI/App/editor/editor.scss            |  5 +++
 zero.Web.UI/App/navigation.vue                |  9 ++---
 zero.Web.UI/App/pages/settings/settings.vue   |  7 ++++
 zero.Web.UI/Sass/Canvas/_navigation.scss      |  2 +-
 zero.Web.UI/Sass/Settings/_dimensions.scss    |  2 +-
 zero.Web.UI/Sass/Settings/_theme-dark.scss    | 39 +++++++++++++++----
 9 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/zero.Web.UI/App/components/forms/form-header.vue b/zero.Web.UI/App/components/forms/form-header.vue
index 40ff5c98..d9a587d8 100644
--- a/zero.Web.UI/App/components/forms/form-header.vue
+++ b/zero.Web.UI/App/components/forms/form-header.vue
@@ -128,7 +128,7 @@
 
     .ui-toggle-switch.is-active
     {
-      background: var(--color-checked);
+      background: var(--color-toggled);
       box-shadow: none !important;
     }
 
diff --git a/zero.Web.UI/App/components/overlays/dropdown-button.vue b/zero.Web.UI/App/components/overlays/dropdown-button.vue
index b2b33446..b16c03dd 100644
--- a/zero.Web.UI/App/components/overlays/dropdown-button.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown-button.vue
@@ -42,10 +42,6 @@
         type: Boolean,
         default: false
       },
-      action: {
-        type: Function,
-        default: () => { }
-      },
       confirm: {
         type: Boolean,
         default: false
diff --git a/zero.Web.UI/App/components/tables/table.scss b/zero.Web.UI/App/components/tables/table.scss
index 11e03785..5aa3d537 100644
--- a/zero.Web.UI/App/components/tables/table.scss
+++ b/zero.Web.UI/App/components/tables/table.scss
@@ -67,7 +67,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
   position: sticky;
   top: 0;
   //border-bottom: 1px solid var(--color-line);
-  z-index: 2;
+  z-index: 3;
   background: var(--color-table-head);
   /*border-bottom: 2px solid var(--color-bg);*/
 
@@ -76,6 +76,11 @@ a.ui-table-row:hover, button.ui-table-row:hover
     display: inline-flex;
     justify-content: space-between;
   }
+
+  .ui-table.is-inline &
+  {
+    background: none;
+  }
 }
 
 .ui-table-cell
@@ -85,7 +90,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
   flex: 1 1 5%;
   position: relative;
   text-align: left;
-  padding: 18px 20px 17px 20px;
+  padding: 22px 20px 21px 20px;
   border-left: 1px solid var(--color-table-line-vertical);
   white-space: nowrap;
   overflow: hidden;
diff --git a/zero.Web.UI/App/editor/editor.scss b/zero.Web.UI/App/editor/editor.scss
index 055f6fb3..594325e6 100644
--- a/zero.Web.UI/App/editor/editor.scss
+++ b/zero.Web.UI/App/editor/editor.scss
@@ -73,6 +73,11 @@
   border-top: 1px solid var(--color-line-onbg);
 }
 
+.theme-dark .editor-infos
+{
+  border-top: none;
+}
+
 .editor-infos .ui-box
 {
   margin: 0;
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index e4a8321e..47a9279b 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-nav" :class="{'is-compact': compact }">
+  <div class="app-nav theme-dark" :class="{'is-compact': compact }">
 
     <h1 class="app-nav-headline">
       <img src="/Assets/zero-2-light.png" class="show-light" v-localize:alt="'@zero.name'" />
@@ -10,7 +10,7 @@
       <template v-slot:button>
         <ui-button type="light block" :label="currentApplication.name" caret="down" />
       </template>
-      <ui-dropdown-button v-for="app in applications" :value="app" :key="app.id" :label="app.name" :selected="app.id === appId" @click="applicationChanged" />
+      <ui-dropdown-button v-for="app in applications" :value="app" :key="app.id" :label="app.name" :selected="app.id === appId" @click="applicationChanged" :prevent="true" />
       <ui-dropdown-separator />
       <ui-dropdown-button label="Add new application" icon="fth-plus" @click="addApplication" />
       <ui-dropdown-button label="Manage apps" icon="fth-edit-2" @click="manageApplications" />
@@ -86,7 +86,6 @@
 
     created()
     {
-      console.info('created');
       this.currentApplication = _find(this.applications, x => x.id === zero.appId);
       this.compact = localStorage.getItem(compactCacheKey) === 'true';
       this.buildUser(AuthApi.user);
@@ -158,14 +157,12 @@
 
       applicationChanged(item, opts)
       {
-
         opts.loading(true);
 
         AuthApi.switchApp(item.id).then(success =>
         {
           opts.loading(false);
-          opts.hide();
-          console.info('in', item);
+          //opts.hide();
         });
       },
 
diff --git a/zero.Web.UI/App/pages/settings/settings.vue b/zero.Web.UI/App/pages/settings/settings.vue
index fd9ca305..469138da 100644
--- a/zero.Web.UI/App/pages/settings/settings.vue
+++ b/zero.Web.UI/App/pages/settings/settings.vue
@@ -99,6 +99,13 @@
     background: var(--color-box);
     border-radius: var(--radius);
     box-shadow: var(--shadow-short);
+    color: var(--color-text-dim);
+    transition: color 0.2s ease;
+  }
+
+  a.settings-group-item:hover .settings-group-item-icon
+  {
+    color: var(--color-text);
   }
 
   .settings-group-item-text
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 18466835..51555257 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -91,7 +91,7 @@ a.app-nav-item, button.app-nav-item
 
     .app-nav-item-icon
     {
-      color: var(--color-text);
+      color: var(--color-primary);
     }
 
     .app-nav-item-arrow
diff --git a/zero.Web.UI/Sass/Settings/_dimensions.scss b/zero.Web.UI/Sass/Settings/_dimensions.scss
index 333d2436..7e2754ec 100644
--- a/zero.Web.UI/Sass/Settings/_dimensions.scss
+++ b/zero.Web.UI/Sass/Settings/_dimensions.scss
@@ -7,5 +7,5 @@
   --padding-l: 64px;
 
   --height-top: 74px;
-  --radius: 3px;
+  --radius: 5px;
 }
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Settings/_theme-dark.scss b/zero.Web.UI/Sass/Settings/_theme-dark.scss
index fbff7fb4..91048afc 100644
--- a/zero.Web.UI/Sass/Settings/_theme-dark.scss
+++ b/zero.Web.UI/Sass/Settings/_theme-dark.scss
@@ -2,8 +2,8 @@
 .theme-dark
 {
   // accent colors
-  $color-primary: #0d83f0; //#0d83f0; #22272e
-  $color-primary-fg: #fff;
+  $color-primary: #fff; //#f9c202; //#0d83f0; #22272e
+  $color-primary-fg: #181c22;
   $color-primary-low: #{rgba(#2c3036, 0.2)};
   $color-secondary: #94c4bb;
   $color-secondary-fg: #fff;
@@ -11,8 +11,8 @@
   $color-tertiary-fg: #2c3036;
 
   // foreground colors
-  $color-fg: #fff;
-  $color-fg-shade-1: #7d858a; // dim
+  $color-fg: #fafafa;
+  $color-fg-shade-1: #81878a; // dim
   $color-fg-shade-2: #8c9094; // dim-two
   
   // background colors  
@@ -20,11 +20,34 @@
   $color-bg-shade-0: #1d2229;
   $color-bg-shade-1: #22272e; // bright
   $color-bg-shade-2: #1c2026; // dim
-  $color-bg-shade-3: #282d36; // bright-two
+  $color-bg-shade-3: #2d323b; // bright-two
   $color-bg-shade-4: #363c45; // bright-three
   $color-bg-shade-5: #43484f;
   $color-bg-shade-6: #43484f;
 
+  /*$color-primary: #eee; //#0d83f0; #22272e
+  $color-primary-fg: #222;
+  $color-primary-low: #{rgba(#2c3036, 0.2)};
+  $color-secondary: #94c4bb;
+  $color-secondary-fg: #fff;
+  $color-tertiary: #c4e4de;
+  $color-tertiary-fg: #2c3036;
+
+  // foreground colors
+  $color-fg: #eee;
+  $color-fg-shade-1: #838383; // dim
+  $color-fg-shade-2: #8c9094; // dim-two
+  
+  // background colors  
+  $color-bg: #1d1d1d;
+  $color-bg-shade-0: #232323;
+  $color-bg-shade-1: #282828; // bright
+  $color-bg-shade-2: #333333; // dim
+  $color-bg-shade-3: #3b3b3b; // bright-two
+  $color-bg-shade-4: #4a4a4a; // bright-three
+  $color-bg-shade-5: #43484f;
+  $color-bg-shade-6: #43484f;*/
+
   // misc colors
   $color-overlay-shade: rgba(0, 0, 0, 0.3);
 
@@ -76,8 +99,8 @@
   --color-checked-fg: #{$color-primary-fg};
   --color-toggle: #{$color-bg-shade-3};
   --color-toggle-fg: #{$color-fg};
-  --color-toggled: #{$color-primary};
-  --color-toggled-fg: #{$color-primary-fg};
+  --color-toggled: #{$color-fg};
+  --color-toggled-fg: #{$color-bg-shade-3};
   --color-input-focus-bg: #{$color-bg-shade-1};
   --color-input-focus-border: 1px solid #{$color-bg-shade-5}; 
   --color-input-focus-shadow: 0 0 0 4px #{$color-bg-shade-2};
@@ -108,7 +131,7 @@
   --color-table: #{$color-bg-shade-1};
   --color-table-line-horizontal: #{$color-bg}; //#{$color-bg-shade-3};
   --color-table-line-vertical: transparent;
-  --color-table-head: #{$color-bg-shade-3};
+  --color-table-head: #{$color-bg-shade-1};
   --color-table-hover: #{$color-bg-shade-2};
 
   // misc