From 758f2e425ef913be64abdcd6bd077afbabcbbdac Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sat, 11 Sep 2021 12:01:13 +0200
Subject: [PATCH] update editor renderers

---
 zero.Web.UI/App/components/buttons/button.vue |  6 ++++-
 zero.Web.UI/App/components/forms/property.vue |  1 +
 zero.Web.UI/App/navigation.vue                |  6 ++---
 zero.Web.UI/Assets/zero-dark.svg              | 23 +++++++++++++++++++
 zero.Web.UI/Assets/zero-icon.svg              | 12 ++++++++++
 zero.Web.UI/Assets/zero.svg                   | 23 +++++++++++++++++++
 zero.Web.UI/Sass/Canvas/_navigation.scss      |  8 +++++--
 zero.Web.UI/Sass/Settings/_accent.scss        |  2 ++
 8 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 zero.Web.UI/Assets/zero-dark.svg
 create mode 100644 zero.Web.UI/Assets/zero-icon.svg
 create mode 100644 zero.Web.UI/Assets/zero.svg

diff --git a/zero.Web.UI/App/components/buttons/button.vue b/zero.Web.UI/App/components/buttons/button.vue
index ecb41104..cc354f45 100644
--- a/zero.Web.UI/App/components/buttons/button.vue
+++ b/zero.Web.UI/App/components/buttons/button.vue
@@ -2,7 +2,7 @@
   <button :type="buttonType" class="ui-button has-state" :class="buttonClass" :disabled="disabled || state == 'loading'" @click="tryClick">
     <span v-if="label" class="ui-button-text" v-localize:html="label"></span>
     <ui-icon v-if="caret" :symbol="caretSymbol" class="ui-button-caret" />
-    <ui-icon v-if="icon" :symbol="icon" class="ui-button-icon" />
+    <ui-icon v-if="icon" :symbol="icon" class="ui-button-icon" :stroke="stroke" />
     <span v-if="!isDefaultState" class="ui-button-state">
       <i v-if="stateDisplay == 'loading'" class="ui-button-progress"></i>
       <ui-icon v-if="stateDisplay == 'success'" symbol="fth-check" />
@@ -41,6 +41,10 @@
       icon: {
         type: String
       },
+      stroke: {
+        type: Number,
+        default: 2
+      },
       caret: String,
       caretPosition: {
         type: String,
diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index d19c6365..bad217e9 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -232,6 +232,7 @@
       padding-right: 0;
     }
 
+    &:empty:first-child + .ui-property, 
     > .ui-property[data-cols] + .ui-property[data-cols]
     {
       margin-top: 0;
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index e63e1fdf..6cd9efb7 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -13,11 +13,11 @@
     <div class="app-nav-boxed">
 
       <h1 class="app-nav-headline">
-        <img src="/Assets/zero-2-light.png" class="show-light" v-localize:alt="'@zero.name'" />
-        <img src="/Assets/zero-2.png" class="show-dark" v-localize:alt="'@zero.name'" />
+        <img src="/Assets/zero.svg" class="show-light" v-localize:alt="'@zero.name'" />
+        <img src="/Assets/zero-dark.svg" class="show-dark" v-localize:alt="'@zero.name'" /> 
       </h1>
       
-      <ui-button icon="fth-search" type="blank" class="app-nav-search" @click="openSearch" /> 
+      <ui-button icon="fth-search" :stroke="2.5" type="blank" class="app-nav-search" @click="openSearch" /> 
 
     </div>
 
diff --git a/zero.Web.UI/Assets/zero-dark.svg b/zero.Web.UI/Assets/zero-dark.svg
new file mode 100644
index 00000000..bd2dca2b
--- /dev/null
+++ b/zero.Web.UI/Assets/zero-dark.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 152 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-81.3617,-189.993)">
+        <g transform="matrix(0.663642,0,0,0.663642,75.5437,187.825)">
+            <path d="M36.667,3.267C52.065,3.267 64.567,15.768 64.567,31.167C64.567,46.565 52.065,59.067 36.667,59.067C21.268,59.067 8.767,46.565 8.767,31.167C8.767,15.768 21.268,3.267 36.667,3.267ZM36.667,13.815C46.244,13.815 54.019,21.59 54.019,31.167C54.019,40.744 46.244,48.519 36.667,48.519C27.09,48.519 19.315,40.744 19.315,31.167C19.315,21.59 27.09,13.815 36.667,13.815Z" style="fill:rgb(255,93,1);"/>
+        </g>
+        <g transform="matrix(1,0,0,1,-10.6064,12.0782)">
+            <g transform="matrix(30,0,0,30,149.452,206.765)">
+                <path d="M0.542,-0.689L0.053,-0.689L0.053,-0.566L0.361,-0.566L0.04,-0.107L0.04,-0L0.542,-0L0.542,-0.123L0.217,-0.123L0.542,-0.582L0.542,-0.689Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(30,0,0,30,173.092,206.765)">
+                <path d="M0.223,-0.123L0.223,-0.277L0.48,-0.277L0.48,-0.402L0.223,-0.402L0.223,-0.566L0.516,-0.566L0.516,-0.689L0.084,-0.689L0.084,-0L0.525,-0L0.525,-0.123L0.223,-0.123Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(30,0,0,30,196.312,206.765)">
+                <path d="M0.434,-0L0.597,-0L0.418,-0.254C0.453,-0.261 0.481,-0.273 0.503,-0.29C0.525,-0.307 0.542,-0.325 0.554,-0.345C0.566,-0.365 0.574,-0.385 0.579,-0.406C0.583,-0.427 0.585,-0.446 0.585,-0.464C0.585,-0.509 0.576,-0.548 0.557,-0.582C0.538,-0.616 0.511,-0.642 0.478,-0.661C0.446,-0.68 0.406,-0.689 0.359,-0.689L0.084,-0.689L0.084,-0L0.223,-0L0.223,-0.247L0.27,-0.247L0.434,-0ZM0.223,-0.566L0.345,-0.566C0.376,-0.566 0.4,-0.556 0.418,-0.536C0.436,-0.515 0.445,-0.49 0.445,-0.461C0.445,-0.44 0.44,-0.421 0.43,-0.405C0.42,-0.388 0.406,-0.377 0.389,-0.37C0.372,-0.363 0.353,-0.359 0.334,-0.359L0.223,-0.359L0.223,-0.566Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(30,0,0,30,221.302,206.765)">
+                <path d="M0.392,0.009C0.439,0.009 0.485,-0 0.528,-0.019C0.571,-0.037 0.608,-0.062 0.641,-0.095C0.673,-0.127 0.698,-0.165 0.716,-0.208C0.734,-0.251 0.743,-0.297 0.743,-0.344C0.743,-0.391 0.734,-0.437 0.716,-0.48C0.698,-0.523 0.673,-0.561 0.641,-0.594C0.608,-0.627 0.571,-0.652 0.528,-0.671C0.485,-0.689 0.439,-0.698 0.392,-0.698C0.345,-0.698 0.3,-0.689 0.257,-0.671C0.214,-0.652 0.176,-0.627 0.144,-0.594C0.112,-0.561 0.087,-0.523 0.069,-0.48C0.051,-0.437 0.042,-0.391 0.042,-0.344C0.042,-0.297 0.051,-0.251 0.069,-0.208C0.087,-0.165 0.112,-0.127 0.144,-0.095C0.176,-0.062 0.214,-0.037 0.257,-0.019C0.3,-0 0.345,0.009 0.392,0.009ZM0.392,-0.121C0.362,-0.121 0.332,-0.128 0.303,-0.141C0.274,-0.154 0.25,-0.172 0.231,-0.198C0.212,-0.223 0.199,-0.248 0.192,-0.273C0.185,-0.298 0.181,-0.321 0.181,-0.344C0.181,-0.382 0.188,-0.416 0.203,-0.445C0.217,-0.474 0.234,-0.498 0.255,-0.517C0.276,-0.535 0.298,-0.548 0.323,-0.556C0.347,-0.563 0.37,-0.567 0.392,-0.567C0.422,-0.567 0.45,-0.561 0.476,-0.55C0.502,-0.539 0.525,-0.523 0.544,-0.502C0.563,-0.481 0.577,-0.457 0.588,-0.43C0.598,-0.403 0.603,-0.374 0.603,-0.344C0.603,-0.314 0.598,-0.285 0.588,-0.258C0.577,-0.231 0.563,-0.207 0.544,-0.186C0.525,-0.165 0.502,-0.149 0.476,-0.138C0.45,-0.127 0.422,-0.121 0.392,-0.121Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/zero.Web.UI/Assets/zero-icon.svg b/zero.Web.UI/Assets/zero-icon.svg
new file mode 100644
index 00000000..37e8f11a
--- /dev/null
+++ b/zero.Web.UI/Assets/zero-icon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 49 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-10.75,-3.66667)">
+        <g transform="matrix(0.869176,0,0,0.869176,3.13023,0.827359)">
+            <path d="M36.667,3.267C52.065,3.267 64.567,15.768 64.567,31.167C64.567,46.565 52.065,59.067 36.667,59.067C21.268,59.067 8.767,46.565 8.767,31.167C8.767,15.768 21.268,3.267 36.667,3.267ZM36.667,12.554C46.939,12.554 55.28,20.894 55.28,31.167C55.28,41.439 46.939,49.78 36.667,49.78C26.394,49.78 18.054,41.439 18.054,31.167C18.054,20.894 26.394,12.554 36.667,12.554Z"/>
+        </g>
+        <g id="flame" transform="matrix(0.248487,0,0,0.198466,3.12637,18.2938)">
+            <path d="M168.19,180.151C161.051,186.256 144.685,190.56 128.271,190.56C108.124,190.56 95.041,184.57 88.704,177.403C87.102,182.238 86.912,186.079 86.912,189.614C86.912,189.614 85.856,206.969 97.927,219.04C97.927,212.772 103.008,207.691 109.276,207.691C120.019,207.691 120.007,217.064 119.997,224.668L119.997,225.347C119.997,236.889 127.051,246.783 137.083,250.953C135.539,247.775 134.739,244.286 134.744,240.753C134.744,229.745 141.207,225.646 148.718,220.883C154.694,217.093 161.334,212.882 165.91,204.434C168.374,199.884 169.661,194.789 169.653,189.614C169.653,186.315 169.14,183.135 168.19,180.151Z" style="fill:rgb(255,93,1);"/>
+        </g>
+    </g>
+</svg>
diff --git a/zero.Web.UI/Assets/zero.svg b/zero.Web.UI/Assets/zero.svg
new file mode 100644
index 00000000..0af3e040
--- /dev/null
+++ b/zero.Web.UI/Assets/zero.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 152 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-81.3617,-189.993)">
+        <g transform="matrix(0.663642,0,0,0.663642,75.5437,187.825)">
+            <path d="M36.667,3.267C52.065,3.267 64.567,15.768 64.567,31.167C64.567,46.565 52.065,59.067 36.667,59.067C21.268,59.067 8.767,46.565 8.767,31.167C8.767,15.768 21.268,3.267 36.667,3.267ZM36.667,13.815C46.244,13.815 54.019,21.59 54.019,31.167C54.019,40.744 46.244,48.519 36.667,48.519C27.09,48.519 19.315,40.744 19.315,31.167C19.315,21.59 27.09,13.815 36.667,13.815Z" style="fill:rgb(255,93,1);"/>
+        </g>
+        <g transform="matrix(1,0,0,1,-10.6064,12.0782)">
+            <g transform="matrix(30,0,0,30,149.452,206.765)">
+                <path d="M0.542,-0.689L0.053,-0.689L0.053,-0.566L0.361,-0.566L0.04,-0.107L0.04,-0L0.542,-0L0.542,-0.123L0.217,-0.123L0.542,-0.582L0.542,-0.689Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(30,0,0,30,173.092,206.765)">
+                <path d="M0.223,-0.123L0.223,-0.277L0.48,-0.277L0.48,-0.402L0.223,-0.402L0.223,-0.566L0.516,-0.566L0.516,-0.689L0.084,-0.689L0.084,-0L0.525,-0L0.525,-0.123L0.223,-0.123Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(30,0,0,30,196.312,206.765)">
+                <path d="M0.434,-0L0.597,-0L0.418,-0.254C0.453,-0.261 0.481,-0.273 0.503,-0.29C0.525,-0.307 0.542,-0.325 0.554,-0.345C0.566,-0.365 0.574,-0.385 0.579,-0.406C0.583,-0.427 0.585,-0.446 0.585,-0.464C0.585,-0.509 0.576,-0.548 0.557,-0.582C0.538,-0.616 0.511,-0.642 0.478,-0.661C0.446,-0.68 0.406,-0.689 0.359,-0.689L0.084,-0.689L0.084,-0L0.223,-0L0.223,-0.247L0.27,-0.247L0.434,-0ZM0.223,-0.566L0.345,-0.566C0.376,-0.566 0.4,-0.556 0.418,-0.536C0.436,-0.515 0.445,-0.49 0.445,-0.461C0.445,-0.44 0.44,-0.421 0.43,-0.405C0.42,-0.388 0.406,-0.377 0.389,-0.37C0.372,-0.363 0.353,-0.359 0.334,-0.359L0.223,-0.359L0.223,-0.566Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(30,0,0,30,221.302,206.765)">
+                <path d="M0.392,0.009C0.439,0.009 0.485,-0 0.528,-0.019C0.571,-0.037 0.608,-0.062 0.641,-0.095C0.673,-0.127 0.698,-0.165 0.716,-0.208C0.734,-0.251 0.743,-0.297 0.743,-0.344C0.743,-0.391 0.734,-0.437 0.716,-0.48C0.698,-0.523 0.673,-0.561 0.641,-0.594C0.608,-0.627 0.571,-0.652 0.528,-0.671C0.485,-0.689 0.439,-0.698 0.392,-0.698C0.345,-0.698 0.3,-0.689 0.257,-0.671C0.214,-0.652 0.176,-0.627 0.144,-0.594C0.112,-0.561 0.087,-0.523 0.069,-0.48C0.051,-0.437 0.042,-0.391 0.042,-0.344C0.042,-0.297 0.051,-0.251 0.069,-0.208C0.087,-0.165 0.112,-0.127 0.144,-0.095C0.176,-0.062 0.214,-0.037 0.257,-0.019C0.3,-0 0.345,0.009 0.392,0.009ZM0.392,-0.121C0.362,-0.121 0.332,-0.128 0.303,-0.141C0.274,-0.154 0.25,-0.172 0.231,-0.198C0.212,-0.223 0.199,-0.248 0.192,-0.273C0.185,-0.298 0.181,-0.321 0.181,-0.344C0.181,-0.382 0.188,-0.416 0.203,-0.445C0.217,-0.474 0.234,-0.498 0.255,-0.517C0.276,-0.535 0.298,-0.548 0.323,-0.556C0.347,-0.563 0.37,-0.567 0.392,-0.567C0.422,-0.567 0.45,-0.561 0.476,-0.55C0.502,-0.539 0.525,-0.523 0.544,-0.502C0.563,-0.481 0.577,-0.457 0.588,-0.43C0.598,-0.403 0.603,-0.374 0.603,-0.344C0.603,-0.314 0.598,-0.285 0.588,-0.258C0.577,-0.231 0.563,-0.207 0.544,-0.186C0.525,-0.165 0.502,-0.149 0.476,-0.138C0.45,-0.127 0.422,-0.121 0.392,-0.121Z" style="fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 6ba978b1..fada4214 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -106,7 +106,9 @@
 
   img
   {
-    height: 24px;
+    //height: 24px;
+    height: 26px;
+    //margin-top: 9px;
   }
 }
 
@@ -118,8 +120,9 @@
 .app-nav-switch
 {
   margin-bottom: var(--padding-s);
-  border-bottom: 1px solid var(--color-line-onbg);
+  //border-bottom: 1px solid var(--color-line-onbg);
   background: var(--color-bg-shade-3);
+  //background: var(--color-accent);
 
   .ui-button.type-light
   {
@@ -127,6 +130,7 @@
     height: 70px;
     background: transparent;
     border-radius: 0;
+    font-size: var(--font-size-m);
   }
 
   .ui-dropdown-button-icon
diff --git a/zero.Web.UI/Sass/Settings/_accent.scss b/zero.Web.UI/Sass/Settings/_accent.scss
index 012551d6..c98eaa31 100644
--- a/zero.Web.UI/Sass/Settings/_accent.scss
+++ b/zero.Web.UI/Sass/Settings/_accent.scss
@@ -3,6 +3,8 @@
 // theme-agnostic colors
 :root
 {
+  --color-accent: #FF5D01;
+
   --color-negative: rgb(216, 40, 83);
   --color-image-bg: rgb(255, 255, 255);