color updates

zero.Web.UI/App/components/pickers/iconPicker/overlay.vue

@@ -151,8 +151,8 @@
 
     &.is-active
     {
-      background: var(--color-box);
-      color: var(--color-text);
+      background: var(--color-primary);
+      color: var(--color-primary-fg);
       box-shadow: var(--shadow-short);
     }
 

zero.Web.UI/App/editor/editor.scss

@@ -4,7 +4,7 @@
   width: 100%;
   max-width: 1320px;
   margin: 0 auto;
-  padding: 0 var(--padding);
+  padding: 0 var(--padding) var(--padding);
 
   &:not(.display-tabs), &.hide-tabs
   {

zero.Web.UI/App/editor/editor.vue

@@ -3,7 +3,7 @@
     <ui-tabs class="editor-tabs">
       <ui-tab v-if="!tab.disabled(value)" v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(value)" :key="index">
         <h3 v-if="display == 'boxes'" class="ui-headline" v-localize="tab.name"></h3>
-        <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value" />
+        <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value" :class="field.options.class" />
         <component v-if="tab.component" :is="tab.component" v-model="value" />
       </ui-tab>
     </ui-tabs>

zero.Web.UI/Sass/Settings/_theme-dark.scss

@@ -16,10 +16,10 @@
   $color-fg-shade-2: #8c9094; // dim-two
   
   // background colors  
-  $color-bg: #191e25;
+  $color-bg: #181c22;
   $color-bg-shade-0: #1d2229;
   $color-bg-shade-1: #22272e; // bright
-  $color-bg-shade-2: #1d2229; // dim
+  $color-bg-shade-2: #1c2026; // dim
   $color-bg-shade-3: #282d36; // bright-two
   $color-bg-shade-4: #363c45; // bright-three
   $color-bg-shade-5: #43484f;
@@ -112,5 +112,5 @@
   --color-table-hover: #{$color-bg-shade-2};
 
   // misc
-  --color-required-marker: #{$color-primary};
+  --color-required-marker: #{$color-fg-shade-1};
 }