fix/Fixed duration option and rating option styles

packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue

@@ -1,6 +1,8 @@
 <template>
   <v-row class="duration-wrapper">
-    <div class="caption">A duration of time in minutes or seconds (e.g. 1:23).</div>
+    <div class="caption">
+      A duration of time in minutes or seconds (e.g. 1:23).
+    </div>
     <!-- TODO: i18n -->
     <v-autocomplete
       v-model="colMeta.duration"
@@ -15,7 +17,7 @@
     >
       <template #selection="{ item }">
         <div>
-          <span class="caption grey--text text--darken-4">
+          <span class="caption" color="text">
             {{ item.title }}
           </span>
         </div>
@@ -30,7 +32,7 @@
 </template>
 
 <script>
-import { durationOptions } from '~/helpers/durationHelper';
+import { durationOptions } from '~/helpers/durationHelper'
 
 export default {
   name: 'DurationOptions',
@@ -39,24 +41,24 @@ export default {
     durationOptionList: durationOptions.map(o => ({
       ...o,
       // h:mm:ss (e.g. 3:45, 1:23:40)
-      title: `${o.title} ${o.example}`,
+      title: `${o.title} ${o.example}`
     })),
     colMeta: {
-      duration: 0,
-    },
+      duration: 0
+    }
   }),
   watch: {
     value() {
-      this.colMeta = this.value || {};
+      this.colMeta = this.value || {}
     },
     colMeta(v) {
-      this.$emit('input', v);
-    },
+      this.$emit('input', v)
+    }
   },
   created() {
-    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta };
-  },
-};
+    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta }
+  }
+}
 </script>
 
 <style scoped>

packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue

@@ -42,6 +42,7 @@
     <color-picker
       v-model="colMeta.color"
       row-size="8"
+      class="backgroundColorDefault"
       :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
     />
   </div>