From 19d3c8b964320056560cdf715c24c42e2c6e7b08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Wed, 17 Jan 2024 16:31:54 +0100
Subject: [PATCH] Fix ace editor and color picker dark theme styles

---
 .../Apigw/Profiler/CProfilerHitInfo.vue       |   2 +
 .../Settings/UI/CUIBrandingEditor.vue         |  30 +--
 .../CTemplateEditorContent/EditorTextHtml.vue |   1 +
 .../EditorTextPlain.vue                       |   1 +
 .../Template/CTemplateEditorContent/Index.vue |   5 +-
 client/web/workflow/public/icons/grid.svg     |   4 +-
 client/web/workflow/src/app.js                |   1 +
 .../src/components/Configurator/Delay.vue     |   2 +-
 .../src/components/Configurator/Error.vue     |   2 +-
 .../src/components/Configurator/Function.vue  |   4 +-
 .../src/components/Configurator/Gateway.vue   |   2 +-
 .../src/components/Configurator/Trigger.vue   |   4 +-
 .../src/components/ExpressionEditor.vue       |   8 +-
 .../web/workflow/src/components/Tooltip.vue   |   4 +-
 .../src/components/WorkflowEditor.vue         |  14 +-
 .../src/themes/corteza-base/mxgraph.scss      |   2 +-
 lib/vue/src/components/input/CAceEditor.vue   | 234 ++++++++++--------
 .../components/input/CInputColorPicker.vue    |  80 ++++--
 .../src/components/navigation/CSidebar.vue    |   7 +-
 .../src/scss/main/18201141_custom_webapp.scss |  57 +++++
 .../variables/18182031_webapp_variable.scss   |   4 +
 21 files changed, 286 insertions(+), 182 deletions(-)

diff --git a/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue b/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
index d775fbb3c..faad7be8f 100644
--- a/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
+++ b/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
@@ -220,6 +220,7 @@
       footer-bg-variant="white"
       header-class="border-bottom"
       body-class="p-0"
+      footer-class="border-top"
       class="shadow-sm mt-3"
     >
       <template #header>
@@ -244,6 +245,7 @@
         :set-options="{
           useWorker: false,
         }"
+        class="border-0 rounded-0"
       />
     </b-card>
   </div>
diff --git a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
index 4718fac1e..0727266cd 100644
--- a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
@@ -43,26 +43,15 @@
               <c-input-color-picker
                 ref="picker"
                 v-model="theme.variables[key]"
+                :default-value="theme.defaultVariables[key]"
                 :data-test-id="`input-${key}-color`"
                 :translations="{
                   modalTitle: $t('colorPicker'),
+                  defaultBtnLabel: $t('label.default'),
                   cancelBtnLabel: $t('general:label.cancel'),
                   saveBtnLabel: $t('general:label.saveAndClose')
                 }"
-              >
-                <template
-                  v-if="['light', 'dark'].includes(theme.id)"
-                  #footer
-                >
-                  <b-button
-                    variant="outline-primary"
-                    class="mr-auto"
-                    @click="resetColor(key, theme)"
-                  >
-                    {{ $t('label.default') }}
-                  </b-button>
-                </template>
-              </c-input-color-picker>
+              />
             </b-form-group>
           </b-col>
         </b-row>
@@ -79,7 +68,6 @@
                 height="400px"
                 font-size="14px"
                 show-line-numbers
-                :border="false"
                 :show-popout="true"
                 @open="openCustomCSSModal(theme.id)"
               />
@@ -92,7 +80,7 @@
     <b-modal
       id="custom-css-editor"
       v-model="customCSSModal.show"
-      :title="$t('modal.editor')"
+      :title="$t('custom-css')"
       cancel-variant="link"
       size="lg"
       :ok-title="$t('general:label.saveAndClose')"
@@ -247,15 +235,21 @@ export default {
           const defaultCustomCSS = customCSS.find(t => t.id === id) || {}
 
           let variables = JSON.parse(values || '{}')
+          let defaultVariables
 
-          if (!values && ['light', 'dark'].includes(id)) {
-            variables = id === 'light' ? this.lightModeVariables : this.darkModeVariables
+          if (['light', 'dark'].includes(id)) {
+            if (!values) {
+              variables = id === 'light' ? this.lightModeVariables : this.darkModeVariables
+            }
+
+            defaultVariables = id === 'light' ? this.lightModeVariables : this.darkModeVariables
           }
 
           return {
             id: id,
             title: title || this.$t(`tabs.${id}`),
             variables,
+            defaultVariables,
             customCSS: defaultCustomCSS.values || '',
           }
         })
diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue
index 61bec5fbc..ea4600903 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue
@@ -14,6 +14,7 @@
     :editor-props="{
       $blockScrolling: false,
     }"
+    class="border-0 rounded-0"
   />
 </template>
 
diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue
index c4aa37bdb..d234eb217 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue
@@ -14,6 +14,7 @@
     :editor-props="{
       $blockScrolling: false,
     }"
+    class="border-0 rounded-0"
   />
 </template>
 
diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
index db4dfc2db..389429d16 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
@@ -22,7 +22,7 @@
         header-bg-variant="white"
         footer-bg-variant="white"
         header-class="d-flex align-items-center border-bottom"
-        footer-class="d-flex flex-wrap flex-fill-child gap-1"
+        footer-class="border-top d-flex flex-wrap flex-fill-child gap-1"
         class="shadow-sm"
       >
         <component
@@ -63,7 +63,7 @@
         header-bg-variant="white"
         footer-bg-variant="white"
         header-class="border-bottom"
-        footer-class="d-flex justify-content-end flex-wrap flex-fill-child gap-1"
+        footer-class="border-top d-flex justify-content-end flex-wrap flex-fill-child gap-1"
         class="shadow-sm mt-3"
       >
         <!-- Partial templates can't be previewed -->
@@ -83,6 +83,7 @@
           :editor-props="{
             $blockScrolling: false,
           }"
+          class="border-0 rounded-0"
         />
 
         <template #header>
diff --git a/client/web/workflow/public/icons/grid.svg b/client/web/workflow/public/icons/grid.svg
index 721b69c3f..877b8058b 100644
--- a/client/web/workflow/public/icons/grid.svg
+++ b/client/web/workflow/public/icons/grid.svg
@@ -1,11 +1,11 @@
 <svg width="8192" height="8192" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
-      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="#c4c4c4" stroke-width="0.5"/>
+      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="#E4E9EF" stroke-width="0.5"/>
     </pattern>
     <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
       <rect width="80" height="80" fill="url(#smallGrid)"/>
-      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#c4c4c4" stroke-width="1"/>
+      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#E4E9EF" stroke-width="1"/>
     </pattern>
   </defs>
 
diff --git a/client/web/workflow/src/app.js b/client/web/workflow/src/app.js
index 114cb6e09..7cad56293 100644
--- a/client/web/workflow/src/app.js
+++ b/client/web/workflow/src/app.js
@@ -35,6 +35,7 @@ export default (options = {}) => {
         }
 
         // switch the webapp theme based on user preference
+        // disabled for now as it's not working properly
         if (user.meta.theme) {
           document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
         }
diff --git a/client/web/workflow/src/components/Configurator/Delay.vue b/client/web/workflow/src/components/Configurator/Delay.vue
index 94ae0b2b3..15eac0601 100644
--- a/client/web/workflow/src/components/Configurator/Delay.vue
+++ b/client/web/workflow/src/components/Configurator/Delay.vue
@@ -26,7 +26,7 @@
             lang="javascript"
             font-size="18px"
             show-line-numbers
-            :border="false"
+            :show-popout="false"
             @input="valueChanged"
           />
         </b-form-group>
diff --git a/client/web/workflow/src/components/Configurator/Error.vue b/client/web/workflow/src/components/Configurator/Error.vue
index f7d9f462b..d53cfa94f 100644
--- a/client/web/workflow/src/components/Configurator/Error.vue
+++ b/client/web/workflow/src/components/Configurator/Error.vue
@@ -25,7 +25,7 @@
           lang="javascript"
           font-size="18px"
           show-line-numbers
-          :border="false"
+          :show-popout="false"
           @open="openInEditor"
           @input="valueChanged"
         />
diff --git a/client/web/workflow/src/components/Configurator/Function.vue b/client/web/workflow/src/components/Configurator/Function.vue
index 222f3997f..87b4f4457 100644
--- a/client/web/workflow/src/components/Configurator/Function.vue
+++ b/client/web/workflow/src/components/Configurator/Function.vue
@@ -54,7 +54,7 @@
     >
       <b-card-header
         header-tag="header"
-        class="d-flex align-items-center bg-white p-4"
+        class="d-flex align-items-center bg-white"
       >
         <h5
           class="mb-0"
@@ -213,7 +213,7 @@
     >
       <b-card-header
         header-tag="header"
-        class="d-flex align-items-center bg-white p-4"
+        class="d-flex align-items-center bg-white"
       >
         <h5
           class="mb-0"
diff --git a/client/web/workflow/src/components/Configurator/Gateway.vue b/client/web/workflow/src/components/Configurator/Gateway.vue
index b097a9778..ce53688ae 100644
--- a/client/web/workflow/src/components/Configurator/Gateway.vue
+++ b/client/web/workflow/src/components/Configurator/Gateway.vue
@@ -36,7 +36,7 @@
             <expression-editor
               :value.sync="edge.expr"
               lang="javascript"
-              height="60"
+              height="100"
               show-line-numbers
               :show-popout="false"
               @input="updateEdge(edge.id, $event)"
diff --git a/client/web/workflow/src/components/Configurator/Trigger.vue b/client/web/workflow/src/components/Configurator/Trigger.vue
index a3d6e7905..2fe617efc 100644
--- a/client/web/workflow/src/components/Configurator/Trigger.vue
+++ b/client/web/workflow/src/components/Configurator/Trigger.vue
@@ -71,7 +71,7 @@
     >
       <b-card-header
         header-tag="header"
-        class="d-flex align-items-center bg-white p-4"
+        class="d-flex align-items-center bg-white"
       >
         <h5
           class="mb-0"
@@ -246,7 +246,7 @@
     >
       <b-card-header
         header-tag="header"
-        class="bg-white p-4"
+        class="bg-white"
       >
         <h5
           class="mb-0"
diff --git a/client/web/workflow/src/components/ExpressionEditor.vue b/client/web/workflow/src/components/ExpressionEditor.vue
index 59fa6f5d0..a3ab61f97 100644
--- a/client/web/workflow/src/components/ExpressionEditor.vue
+++ b/client/web/workflow/src/components/ExpressionEditor.vue
@@ -9,7 +9,7 @@
       theme="chrome"
       width="100%"
       :height="height"
-      :class="{ 'border': border }"
+      :class="{ 'border-0 rounded-0': !border }"
       v-on="$listeners"
       @init="editorInit"
     />
@@ -106,12 +106,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.border {
-  background-color: var(--white);
-  border: 2px solid var(--light);
-  border-radius: 0.25rem;
-}
-
 .popout {
   z-index: 7;
   bottom: 0;
diff --git a/client/web/workflow/src/components/Tooltip.vue b/client/web/workflow/src/components/Tooltip.vue
index 99b9eaad2..66e5029f0 100644
--- a/client/web/workflow/src/components/Tooltip.vue
+++ b/client/web/workflow/src/components/Tooltip.vue
@@ -19,7 +19,7 @@
         img-height="100px"
         img-top
         :title="title"
-        class="text-left"
+        class="text-left text-dark"
       >
         <b-card-text>
           {{ text }}
@@ -68,7 +68,7 @@ export default {
 }
 
 .tooltip.b-tooltip-light.bs-tooltip-right .arrow::before {
-  border-right-color: #2D2D2D !important;
+  border-right-color: var(--dark) !important;
 }
 
 .tooltip.b-tooltip {
diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue
index 4f569d70e..038569b7e 100644
--- a/client/web/workflow/src/components/WorkflowEditor.vue
+++ b/client/web/workflow/src/components/WorkflowEditor.vue
@@ -900,7 +900,7 @@ export default {
 
         if (cell.edge) {
           if (cell.value) {
-            label = `<div id="openSidebar" class="text-nowrap py-1 px-3 mb-0 rounded bg-white pointer" style="border: 2px solid #A7D0E3; border-radius: 5px; color: #2D2D2D;">${encodeHTML(cell.value)}</div>`
+            label = `<div id="openSidebar" class="text-nowrap py-1 px-3 mb-0 rounded bg-white pointer" style="border: 2px solid #A7D0E3; border-radius: 5px; color: var(--dark);">${encodeHTML(cell.value)}</div>`
           }
         } else if (this.vertices[cell.id]) {
           const vertex = this.vertices[cell.id]
@@ -911,7 +911,7 @@ export default {
             const type = this.$t(`steps:${style}.short`)
             const isSelected = this.selection.includes(cell.mxObjectId)
             const border = isSelected ? 'selected-border' : 'border-light'
-            const shadow = isSelected ? 'shadow-lg' : 'shadow'
+            const shadow = isSelected ? 'shadow' : 'shadow-sm'
             const cog = 'icons/cog.svg'
             const issue = 'icons/issue.svg'
             const playIcon = 'icons/play.svg'
@@ -1767,7 +1767,7 @@ export default {
       style[mxConstants.STYLE_ARCSIZE] = 5
       style[mxConstants.STYLE_RESIZABLE] = false
       style[mxConstants.STYLE_FILLCOLOR] = 'none'
-      style[mxConstants.STYLE_FONTCOLOR] = '#2D2D2D'
+      style[mxConstants.STYLE_FONTCOLOR] = 'var(--dark)'
       style[mxConstants.STYLE_FONTSIZE] = 13
       this.graph.getStylesheet().putDefaultVertexStyle(style)
 
@@ -1778,7 +1778,7 @@ export default {
       style[mxConstants.STYLE_ROUNDED] = true
       style[mxConstants.STYLE_ORTHOGONAL] = true
       style[mxConstants.STYLE_MOVABLE] = false
-      style[mxConstants.STYLE_FONTCOLOR] = '#2D2D2D'
+      style[mxConstants.STYLE_FONTCOLOR] = 'var(--dark)'
       style[mxConstants.STYLE_STROKEWIDTH] = 2
       style[mxConstants.STYLE_ENDSIZE] = 15
       style[mxConstants.STYLE_STARTSIZE] = 15
@@ -1797,7 +1797,7 @@ export default {
       style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_MIDDLE
       style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE
       style[mxConstants.STYLE_FILLCOLOR] = 'white'
-      style[mxConstants.STYLE_STROKECOLOR] = '#2D2D2D'
+      style[mxConstants.STYLE_STROKECOLOR] = 'var(--dark)'
       style[mxConstants.STYLE_STROKEWIDTH] = 0
       style[mxConstants.STYLE_STROKEWIDTH] = 2
       this.graph.getStylesheet().putCellStyle('swimlane', style)
@@ -2542,6 +2542,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#workflow-editor {
+  color: var(--dark);
+}
+
 #graph {
   outline: none;
 }
diff --git a/client/web/workflow/src/themes/corteza-base/mxgraph.scss b/client/web/workflow/src/themes/corteza-base/mxgraph.scss
index ec9f47df2..8b72ff43d 100644
--- a/client/web/workflow/src/themes/corteza-base/mxgraph.scss
+++ b/client/web/workflow/src/themes/corteza-base/mxgraph.scss
@@ -32,5 +32,5 @@ div.mxTooltip {
   position: absolute;
   cursor: default;
   padding: 10px;
-  color: #2D2D2D;
+  color: var(--dark);
 }
diff --git a/lib/vue/src/components/input/CAceEditor.vue b/lib/vue/src/components/input/CAceEditor.vue
index 9921724b4..8576eac1d 100644
--- a/lib/vue/src/components/input/CAceEditor.vue
+++ b/lib/vue/src/components/input/CAceEditor.vue
@@ -1,127 +1,141 @@
 <template>
-    <div
-      class="position-relative"
+  <div
+    class="position-relative"
+  >
+    <ace-editor
+      v-model="editorValue"
+      :lang="lang"
+      :mode="lang"
+      theme="chrome"
+      width="100%"
+      :height="height"
+      :class="{ 'border-0 rounded-0': !border }"
+      v-on="$listeners"
+      @init="editorInit"
+    />
+
+    <b-button
+      v-if="showPopout"
+      variant="link"
+      class="popout position-absolute px-2 py-1 mr-3"
+      @click="$emit('open')"
     >
-      <ace-editor
-        v-model="editorValue"
-        :lang="lang"
-        :mode="lang"
-        theme="chrome"
-        width="100%"
-        :height="height"
-        :class="{ 'border': border }"
-        v-on="$listeners"
-        @init="editorInit"
+      <font-awesome-icon
+        :icon="['fas', 'expand-alt']"
       />
+    </b-button>
+  </div>
+</template>
 
-      <b-button
-        v-if="showPopout"
-        variant="link"
-        class="popout position-absolute px-2 py-1 mr-3"
-        @click="$emit('open')"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'expand-alt']"
-        />
-      </b-button>
-    </div>
-  </template>
+<script>
+import AceEditor from 'vue2-ace-editor'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faExpandAlt} from '@fortawesome/free-solid-svg-icons'
 
-  <script>
-  import AceEditor from 'vue2-ace-editor'
-  import { library } from '@fortawesome/fontawesome-svg-core'
-  import { faExpandAlt} from '@fortawesome/free-solid-svg-icons'
+library.add(faExpandAlt)
 
-  library.add(faExpandAlt)
+export default {
+  components: {
+    AceEditor,
+  },
 
-  export default {
-    components: {
-      AceEditor,
+  props: {
+    value: {
+      type: String,
+      default: '',
     },
 
-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
-
-      lang: {
-        type: String,
-        default: 'text',
-      },
-
-      height: {
-        type: String,
-        default: '80',
-      },
-
-      showLineNumbers: {
-        type: Boolean,
-        default: false,
-      },
-
-      fontSize: {
-        type: String,
-        default: '14px',
-      },
-
-      border: {
-        type: Boolean,
-        default: true,
-      },
-
-      showPopout: {
-        type: Boolean,
-        default: false,
-      },
+    lang: {
+      type: String,
+      default: 'text',
     },
 
-    computed: {
-      editorValue: {
-        get () {
-          return this.value
-        },
-
-        set (value = '') {
-          this.$emit('update:value', value)
-        },
-      },
+    height: {
+      type: String,
+      default: '80',
     },
 
-    methods: {
-      editorInit (editor) {
-        require('brace/mode/text')
-        require('brace/mode/html')
-        require('brace/mode/css')
-        require('brace/mode/scss')
-        require('brace/mode/javascript')
-        require('brace/theme/chrome')
+    showLineNumbers: {
+      type: Boolean,
+      default: false,
+    },
 
-        editor.setOptions({
-          tabSize: 2,
-          fontSize: this.fontSize,
-          wrap: true,
-          indentedSoftWrap: false,
-          showLineNumbers: this.showLineNumbers,
-          showGutter: this.showLineNumbers,
-          displayIndentGuides: this.lang !== 'text',
-          useWorker: false,
-        })
+    fontSize: {
+      type: String,
+      default: '14px',
+    },
+
+    border: {
+      type: Boolean,
+      default: true,
+    },
+
+    showPopout: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    editorValue: {
+      get () {
+        return this.value
+      },
+
+      set (value = '') {
+        this.$emit('update:value', value)
       },
     },
+  },
+
+  methods: {
+    editorInit (editor) {
+      require('brace/mode/text')
+      require('brace/mode/html')
+      require('brace/mode/css')
+      require('brace/mode/scss')
+      require('brace/mode/javascript')
+      require('brace/theme/chrome')
+
+      editor.setOptions({
+        tabSize: 2,
+        fontSize: this.fontSize,
+        wrap: true,
+        indentedSoftWrap: false,
+        showPrintMargin: false,
+        showLineNumbers: this.showLineNumbers,
+        showGutter: this.showLineNumbers,
+        displayIndentGuides: this.lang !== 'text',
+        useWorker: false,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.popout {
+  z-index: 7;
+  bottom: 0;
+  right: 0;
+}
+</style>
+
+<style lang="scss">
+// Remove from server/assets/src/scss/main/18201141_custom_webapp.scss when all ace-editors use c-ace-editor
+.ace_editor {
+  color: var(--black) !important;
+  background-color: var(--white) !important;
+  border-radius: 0.25rem;
+  border: 2px solid var(--extra-light);
+
+  .ace_gutter {
+    background-color: var(--light) !important;
+    color: var(--black) !important;
+
+    .ace_gutter-active-line {
+      background-color: var(--extra-light) !important;
+    }
   }
-  </script>
-
-  <style lang="scss" scoped>
-  .border {
-    background-color: var(--light);
-    border: 2px solid var(--extra-light);
-    border-radius: 0.25rem;
-  }
-
-  .popout {
-    z-index: 7;
-    bottom: 0;
-    right: 0;
-  }
-  </style>
+}
+</style>
diff --git a/lib/vue/src/components/input/CInputColorPicker.vue b/lib/vue/src/components/input/CInputColorPicker.vue
index c68105c1d..d64b52dfa 100644
--- a/lib/vue/src/components/input/CInputColorPicker.vue
+++ b/lib/vue/src/components/input/CInputColorPicker.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="d-flex align-items-center">
       <b-button
-        :style="`color: ${pickedColor}; fill: ${pickedColor};`"
+        :style="`color: ${currentColor}; fill: ${currentColor};`"
         class="p-0 rounded-circle bg-white border-white shadow-none"
         @click="toggleMenu"
       >
@@ -62,17 +62,24 @@
       @hide="closeMenu"
     >
       <chrome
-        :value="value"
+        :value="currentColor"
         class="w-100 shadow-none"
         @input="updateColor"
       />
 
       <template #modal-footer>
+        <b-button
+          v-if="defaultValue"
+          variant="light"
+          @click="resetColor()"
+        >
+          {{ translations.defaultBtnLabel }}
+        </b-button>
         <slot name="footer" />
 
         <b-button
-          variant="link"
-          class="ml-auto"
+          variant="outline-light"
+          class="ml-auto text-primary border-0"
           @click="closeMenu"
         >
           {{ translations.cancelBtnLabel }}
@@ -106,6 +113,11 @@ export default {
       default: 'rgba(0,0,0,0)',
     },
 
+    defaultValue: {
+      type: String,
+      default: '',
+    },
+
     translations: {
       type: Object,
     },
@@ -133,21 +145,12 @@ export default {
     }
   },
 
-  computed: {
-    pickedColor: {
-      get () {
-        return this.value
-      },
-
-      set (pickedColor) {
-        this.pickedColor = pickedColor
-      },
-    },
-  },
-
   watch: {
-    value (value) {
-      this.currentColor = value
+    value: {
+      immediate: true,
+      handler (value) {
+        this.currentColor = value
+      },
     },
   },
 
@@ -156,6 +159,15 @@ export default {
       this.currentColor = hex8
     }, 300),
 
+    resetColor () {
+      this.currentColor = this.defaultValue
+    },
+
+    saveColor () {
+      this.$emit('input', this.currentColor)
+      this.closeMenu()
+    },
+
     toggleMenu () {
       if (this.showModal) {
         this.closeMenu()
@@ -164,11 +176,6 @@ export default {
       }
     },
 
-    saveColor () {
-      this.$emit('input', this.currentColor)
-      this.closeMenu()
-    },
-
     openMenu () {
       this.showModal = true
     },
@@ -180,12 +187,31 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .vc-chrome {
   font-family: var(--font-medium) !important;
-}
 
-.vc-chrome {
-  background-color: var(--white) !important;
+  .vc-chrome-body {
+    background: var(--white) !important;
+
+    .vc-input__input {
+      color: var(--black) !important;
+      background-color: var(--white) !important;
+    }
+
+    .vc-input__label {
+      color: var(--black) !important;
+    }
+
+    .vc-chrome-toggle-btn {
+      path {
+        fill: var(--black) !important;
+      }
+
+      .vc-chrome-toggle-icon-highlight {
+        background: var(--light) !important;
+      }
+    }
+  }
 }
 </style>
diff --git a/lib/vue/src/components/navigation/CSidebar.vue b/lib/vue/src/components/navigation/CSidebar.vue
index e40d8efc5..280303eb1 100644
--- a/lib/vue/src/components/navigation/CSidebar.vue
+++ b/lib/vue/src/components/navigation/CSidebar.vue
@@ -12,6 +12,7 @@
         :footer-class="`rounded-right ${isExpanded ? 'px-2' : ''}`"
         :no-header="!isExpanded"
         :backdrop="isMobile"
+        backdrop-variant="white"
         :shadow="isExpanded && 'sm'"
         no-slide
         :right="right"
@@ -338,7 +339,11 @@ $header-height: 64px;
 $nav-width: 320px;
 
 .b-sidebar {
-  background-color: var(--sidebar-bg) !important;
+  background-color: var(--white) !important;
+}
+
+.b-sidebar-backdrop {
+  opacity: 0.75 !important;
 }
 
 .sidebar {
diff --git a/server/assets/src/scss/main/18201141_custom_webapp.scss b/server/assets/src/scss/main/18201141_custom_webapp.scss
index b5abaeecc..5a7f0bb97 100644
--- a/server/assets/src/scss/main/18201141_custom_webapp.scss
+++ b/server/assets/src/scss/main/18201141_custom_webapp.scss
@@ -116,4 +116,61 @@ a.btn:not(.btn-link) {
     -o-transition: min-width 0.2s ease-in-out;
     transition: min-width 0.2s ease-in-out;
   }
+}
+
+// Remove from here when all ace-editors use c-ace-editor
+.ace_editor {
+  color: var(--black) !important;
+  background-color: var(--white) !important;
+  border-radius: 0.25rem;
+  border: 2px solid var(--extra-light);
+
+  .ace_cursor {
+    border-left: 2px solid var(--black);
+  }
+
+  .ace_gutter {
+    background-color: var(--light) !important;
+    color: var(--black) !important;
+
+    .ace_gutter-active-line {
+      background-color: var(--extra-light) !important;
+    }
+  }
+
+  .ace_text {
+    color: var(--black) !important;
+  }
+
+  .ace_keyword {
+    color: var(--primary) !important;
+  }
+
+  .ace_string {
+    color: var(--secondary) !important;
+  }
+
+  .ace_variable {
+    color: var(--warning) !important;
+  }
+
+  .ace_type {
+    color: var(--secondary) !important;
+  }
+
+  .ace_constant {
+    color: var(--primary) !important;
+  }
+
+  .ace_tag {
+    color: var(--primary) !important;
+  }
+
+  .ace_attribute {
+    color: var(--warning) !important;
+  }
+
+  .ace_comment {
+    color: var(--extra-light) !important;
+  }
 }
\ No newline at end of file
diff --git a/server/assets/src/scss/variables/18182031_webapp_variable.scss b/server/assets/src/scss/variables/18182031_webapp_variable.scss
index 44d8218fe..38dec4a1d 100644
--- a/server/assets/src/scss/variables/18182031_webapp_variable.scss
+++ b/server/assets/src/scss/variables/18182031_webapp_variable.scss
@@ -69,6 +69,10 @@ $body-color: $black !default;
 $border-color: $extra-light !default;
 $hr-border-color: $border-color !default;
 
+// Modal
+$modal-backdrop-bg: $white !default;
+$modal-backdrop-opacity: .75 !default;
+
 // Options
 $enable-rounded:   true !default;
 $enable-gradients: false !default;