From 4eaa8d32a52f03d61e35c2ae367cad2d054f1c2f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:16:38 +0000
Subject: [PATCH] fix(nc-gui): updated color picker

---
 .../nc-gui/components/general/ColorPicker.vue | 24 +++++++++++++----
 .../nc-gui/components/smartsheet/Form.vue     | 26 +++++++++++++++++--
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index 3ff39967a4..04013f0323 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -7,6 +7,8 @@ interface Props {
   rowSize?: number
   advanced?: boolean
   pickButton?: boolean
+  borders?: string[]
+  isNewDesign?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   rowSize: 10,
   advanced: true,
   pickButton: false,
+  isNewDesign: false,
 })
 
 const emit = defineEmits(['input', 'closeModal'])
@@ -52,11 +55,14 @@ watch(picked, (n, _o) => {
         v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
         class="color-selector"
-        :class="compare(picked, color) ? 'selected' : ''"
-        :style="{ 'background-color': `${color}` }"
+        :class="{ 'selected': compare(picked, color), 'new-design': isNewDesign }"
+        :style="{
+          'background-color': `${color}`,
+          'border': borders?.length && borders[i] ? `1px solid ${borders[i]}` : undefined,
+        }"
         @click="selectColor(color, true)"
       >
-        {{ compare(picked, color) ? '&#10003;' : '' }}
+        {{ compare(picked, color) && !isNewDesign ? '&#10003;' : '' }}
       </button>
       <button class="h-6 w-6 mt-2.7 ml-1 border-1 border-[grey] rounded-md" @click="isPickerOn = !isPickerOn">
         <GeneralTooltip>
@@ -98,14 +104,22 @@ watch(picked, (n, _o) => {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
 }
-.color-selector:hover {
+.color-selector:not(.new-design):hover {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
 }
-.color-selector.selected {
+
+.color-selector.new-design:hover {
+  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
+}
+
+.color-selector.selected:not(.new-design) {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
 }
+.color-selector.selected.new-design {
+  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
+}
 :deep(.vc-chrome-toggle-icon) {
   @apply ml-3!important;
 }
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index e5c99e838a..0fd653a20c 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -942,11 +942,33 @@ const onFormItemClick = (element: any) => {
                 <div class="text-base font-bold text-gray-900">Appearance Settings</div>
 
                 <div>
-                  <div class="text-gray-800 mb-2">Form Theme</div>
+                  <div class="text-gray-800">Form Theme</div>
                   <div class="flex justify-start">
                     <LazyGeneralColorPicker
                       v-model="(formViewData.meta as Record<string,any>).theme_color"
-                      :colors="['#FFFFF', '#FFDBD9', '#FEE6D6', '#FFF0D1', '#D4F7E0', '#D7F2FF', '#FFCFE6', '#E5D4F5']"
+                      :colors="[
+                        '#FFFFFF',
+                        '#FFDBD9',
+                        '#FEE6D6',
+                        '#FFF0D1',
+                        '#D4F7E0',
+                        '#D7F2FF',
+                        '#FED8F4',
+                        '#E5D4F5',
+                        '#FFCFE6',
+                      ]"
+                      :borders="[
+                        '#6A7184',
+                        '#FF4A3F',
+                        '#FA8231',
+                        '#FCBE3A',
+                        '#27D665',
+                        '#36BFFF',
+                        '#FC3AC6',
+                        '#7D26CD',
+                        '#B33771',
+                      ]"
+                      :is-new-design="true"
                       class="nc-form-theme-color-picker !p-0 !-ml-1"
                       @input="(el:string)=>{
                         (formViewData?.meta as Record<string,any>).theme_color = el