Adjust CInputColorPicker theme variable styles

client/web/admin/yarn.lock

@@ -799,6 +799,13 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz#eeeec1e4e8850bed0468f938292b06cda793bf34"
   integrity sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w==
 
+"@googlemaps/js-api-loader@^1.14.3":
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz#3fe748e21243f8e8322c677a5525c569ae9cdbe9"
+  integrity sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -4364,7 +4371,7 @@ fast-deep-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
   integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -10890,6 +10897,11 @@ vue2-dropzone@^3.6.0:
   dependencies:
     dropzone "^5.5.1"
 
+vue2-leaflet@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
+  integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
+
 vue@2.6.14:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"

lib/vue/src/components/input/CInputColorPicker.vue

@@ -52,6 +52,7 @@
         {{ value }}
       </span>
     </div>
+
     <b-modal
       :visible="showModal"
       :title="translations.modalTitle"
@@ -67,25 +68,23 @@
         @input="updateColor"
       />
 
-      <hr v-if="themes.length > 0" />
-      <div 
-        v-for="theme in themes"
-        :key="theme.id"
-        class="d-flex p-2"
+      <div
+        v-if="themes.length > 0"
+        class="d-flex flex-column border-top p-3 gap-1"
       >
-          <div 
+        <div
+          v-for="theme in themes"
+          :key="theme.id"
+          class="d-flex border"
+        >
+          <b-button
             v-for="variable in themeVariables"
             :key="variable.label"
-            class="mb-2"
-          >
-          <b-button 
-            squared 
-            class="swatch" 
-            v-b-tooltip.hover="{ title: colorToolTip(theme.id,variable.value), container: '#body' }"
+            v-b-tooltip.noninteractive.hover="{ title: colorToolTip(theme.id, variable.value), container: '#body' }"
+            class="swatch flex-grow-1 rounded-0"
             :style="{ backgroundColor: theme.values[variable.label], borderColor: theme.values[variable.label] }"
             @click="setColor(theme.values[variable.label])"
-          >
-          </b-button>
+          />
         </div>
       </div>
 
@@ -274,11 +273,13 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .swatch {
-  width: 32px;
-  height: 32px;
+  height: 58px;
 }
+</style>
+
+<style lang="scss">
 .vc-chrome {
   font-family: var(--font-medium) !important;
 

lib/vue/src/components/navigation/CTopbar.vue

@@ -195,7 +195,7 @@
             :disabled="currentTheme === theme.id"
             @click="saveThemeMode(theme.id)"
           >
-          {{ theme.id === 'light' ? labels.lightTheme : labels.darkTheme }}
+            {{ theme.label }}
           </b-dropdown-item>
         </b-dropdown>
 
@@ -308,9 +308,11 @@ export default {
       return [
         {
           id: 'light',
+          label: this.labels.lightTheme,
         },
         {
           id: 'dark',
+          label: this.labels.darkTheme,
         },
       ]
     },