Merge pull request #2582 from nocodb/fix/1516-fixed-dark-mode-bug-in-edit-column-and-styling-issue-with-toggle-comment-button

Fixed dark mode styling bug with edit column and styling issues with toggle comments button

packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue

@@ -71,7 +71,7 @@
                     item-value="name"
                     item-text="name"
                     class="caption ui-type nc-ui-dt-dropdown"
-                    :class="{ 'primary lighten-5': newColumn.uidt }"
+                    :class="{ 'primary lighten-5': newColumn.uidt && !isDark }"
                     :label="$t('labels.columnType')"
                     dense
                     outlined
@@ -80,10 +80,12 @@
                   >
                     <template #selection="{ item }">
                       <div>
-                        <v-icon color="grey darken-4" small class="mr-1">
+                        <v-icon color="isDark? 'white'? 'grey darken-4'" small class="mr-1">
                           {{ item.icon }}
                         </v-icon>
-                        <span class="caption grey--text text--darken-4"> {{ item.name }}</span>
+                        <span class="caption" :class="{ 'grey--text text--darken-4': !isDark }">
+                          {{ item.name }}
+                        </span>
                       </div>
                     </template>
 

packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card width="1000" max-width="100%">
     <v-toolbar height="55" class="elevation-1">
-      <div class="d-100 d-flex">
+      <div class="header d-100 d-flex">
         <h5 class="title text-center">
           <v-icon :color="iconColor"> mdi-table-arrow-right </v-icon>
 
@@ -17,10 +17,9 @@
         <v-btn small text @click="reload">
           <v-icon small> mdi-reload </v-icon>
         </v-btn>
-
         <x-icon
           v-if="!isNew && _isUIAllowed('rowComments')"
-          icon-class="mr-2"
+          icon-class="ml-1 mr-2 px-1 py-1"
           tooltip="Toggle comments"
           small
           text
@@ -671,6 +670,10 @@ h5 {
   background: var(--v-backgroundColorDefault-base);
 }
 
+.header {
+  display: flex;
+  align-items: center;
+}
 .nc-chip {
   padding: 8px;
   border-radius: 8px;

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

@@ -15,7 +15,7 @@
     >
       <template #selection="{ item }">
         <div>
-          <span class="caption grey--text text--darken-4">
+          <span class="caption" color="text">
             {{ item.title }}
           </span>
         </div>

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>