From e1842eb0d746531f896d2ddb48921339cf47fc3d Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Tue, 16 Mar 2021 13:57:52 +0100
Subject: [PATCH] UI fixes

---
 zero.Web.UI/App/components/header-bar.vue           |  4 ++--
 .../pickers/dateRangePicker/daterangepicker.vue     |  4 ++--
 zero.Web.UI/App/components/tree/tree-item.vue       | 13 +++++++++++--
 zero.Web.UI/Sass/Settings/_accent.scss              |  4 ++--
 zero.Web.UI/app/components/icon.vue                 | 11 ++++++++++-
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/zero.Web.UI/App/components/header-bar.vue b/zero.Web.UI/App/components/header-bar.vue
index 0a010ff4..9e2df5f0 100644
--- a/zero.Web.UI/App/components/header-bar.vue
+++ b/zero.Web.UI/App/components/header-bar.vue
@@ -144,7 +144,7 @@
     color: var(--color-text);
     margin: 0;
     font-size: var(--font-size-l);
-    font-weight: 900;
+    font-weight: 700;
     //display: flex;
     //align-items: center;
 
@@ -160,7 +160,7 @@
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
-      background: var(--color-bg-shade-3);
+      background: var(--color-bg-shade-5); 
       //box-shadow: var(--shadow-short);
       color: var(--color-text);
       height: 22px;
diff --git a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
index f6279591..9660db6a 100644
--- a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
+++ b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
@@ -104,8 +104,8 @@
             (this.value.from && !this.value.to ? '@ui.date.x' :
               (!this.value.from && this.value.to ? '@ui.date.y' : '@ui.date.xtoy')),
           tokens: {
-            x: Strings.date(this.value.from, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT)),
-            y: Strings.date(this.value.to, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT))
+            x: this.value ? Strings.date(this.value.from, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT)) : null,
+            y: this.value ? Strings.date(this.value.to, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT)) : null
           }
         };
       }
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
index 30e87ffe..9cf998c8 100644
--- a/zero.Web.UI/App/components/tree/tree-item.vue
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -5,7 +5,7 @@
     </button>
     <component :disabled="value.disabled" :is="tag" type="button" :to="value.url" class="ui-tree-item-link" @click="onClick(value, $event)">
       <ui-icon class="ui-tree-item-icon" :symbol="value.icon" :size="18" />
-      <ui-icon v-if="value.modifier" :title="value.modifier.name" class="ui-tree-item-modifier" :symbol="modifier" :class="modifierClass" :size="14" />
+      <ui-icon v-if="value.modifier" :title="value.modifier.name" class="ui-tree-item-modifier" :symbol="modifier" :class="modifierClass" :size="12" />
       <span class="ui-tree-item-text">{{value.name | localize}}<span class="ui-tree-item-description" v-if="value.description"><br />{{value.description | localize}}</span></span>
       
     </component>
@@ -271,12 +271,21 @@
     position: absolute;
     left: 10px;
     bottom: 12px;
+    color: var(--color-text-dim);
     background: var(--color-tree);
     border-radius: 50%;
+    padding: 3px; 
+    width: 18px;
+    height: 18px; 
+
+    .ui-tree-item.is-active &, .ui-tree-item:hover &
+    {
+      color: var(--color-text);
+    }
 
     .ui-tree-item.is-active &
     {
-      background: var(--color-tree-selected);
+      background: var(--color-tree-selected); 
     }
   }
 
diff --git a/zero.Web.UI/Sass/Settings/_accent.scss b/zero.Web.UI/Sass/Settings/_accent.scss
index 63cb85f0..2e2b0717 100644
--- a/zero.Web.UI/Sass/Settings/_accent.scss
+++ b/zero.Web.UI/Sass/Settings/_accent.scss
@@ -30,7 +30,7 @@ $accent-colors: (
   "lime": "#a0db61",
   "yellow": "#fdd330",
   "orange": "#ff662b",
-  "red": "#d82853"
+  "red": "rgb(216, 40, 83)"
 );
 
 :root
@@ -47,7 +47,7 @@ $accent-colors: (
 
   .color-#{$name}
   {
-    color: var(#{$var});
+    color: var(#{$var}) !important; 
   }
 
   .bg-color-#{$name}
diff --git a/zero.Web.UI/app/components/icon.vue b/zero.Web.UI/app/components/icon.vue
index 2ca5beef..b96be0a5 100644
--- a/zero.Web.UI/app/components/icon.vue
+++ b/zero.Web.UI/app/components/icon.vue
@@ -1,6 +1,6 @@
 <template>
   <svg class="ui-icon" :width="size" :height="size" :stroke-width="stroke" :data-symbol="symbol">
-    <use v-if="!isFlag" :xlink:href="'#' + symbol.trim()" />
+    <use v-show="!isFlag" v-bind="{ 'xlink:href': href }" />
   </svg>
 </template>
 
@@ -15,6 +15,10 @@
         default: null,
         required: true
       },
+      file: {
+        type: String,
+        default: null
+      },
       size: {
         type: Number,
         default: 17
@@ -25,10 +29,15 @@
       }
     },
 
+
     computed: {
       isFlag()
       {
         return this.symbol && this.symbol.indexOf('flag') === 0;
+      },
+      href()
+      {
+        return (this.file || '') + '#' + this.symbol;
       }
     }
   }