refactor: use material symbol icon

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/assets/style/fonts.css

@@ -1,3 +1,5 @@
+@import 'material-symbols/outlined.css';
+
 /* inter-100 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@@ -149,3 +151,13 @@
   font-style: normal;
   font-display: swap;
 }
+
+.material-symbols-outlined {
+  font-size: 1.3rem;
+
+    font-variation-settings:
+           'FILL' 0,
+           'wght' 200,
+           'GRAD' 0,
+           'opsz' 20
+}

packages/nc-gui/components/smartsheet/header/CellIcon.ts

@@ -80,7 +80,7 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
   } else if (isPercent(column)) {
     return iconMap.percent
   } else if (isInt(column, abstractType) || isFloat(column, abstractType)) {
-    return iconMap.numeric
+    return iconMap.number
   } else if (isString(column, abstractType)) {
     return iconMap.text
   } else {
@@ -111,7 +111,7 @@ export default defineComponent({
     return () => {
       if (!column.value) return null
 
-      return h(renderIcon(column.value, abstractType.value), { class: 'text-gray-500 mx-1', style: { fontSize: '16px' } })
+      return h(renderIcon(column.value, abstractType.value), { class: 'text-gray-500 mx-1' })
     }
   },
 })

packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts

@@ -95,7 +95,7 @@ export default defineComponent({
 
       const { icon: Icon, color } = renderIcon(column.value, relationColumn)
 
-      return h(Icon, { class: `${color} mx-1`, style: { fontSize: '16px' } })
+      return h(Icon, { class: `${color} mx-1` })
     }
   },
 })

packages/nc-gui/components/smartsheet/toolbar/AddRow.vue

@@ -17,7 +17,7 @@ const onClick = () => {
     <div
       v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center"
+      class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center justify-center !px-0 select-none"
     >
       <component
         :is="iconMap.plus"

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -78,7 +78,7 @@ useMenuCloseOnEsc(open)
           <component :is="iconMap.filter" />
           <!-- Filter -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
-          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
 
           <span v-if="filtersLength" class="nc-count-badge">{{ filtersLength }}</span>
         </div>

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -162,7 +162,7 @@ useMenuCloseOnEsc(open)
           <!-- Fields -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>
 
-          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
 
           <span v-if="numberOfHiddenFields" class="nc-count-badge">{{ numberOfHiddenFields }}</span>
         </div>

packages/nc-gui/components/smartsheet/toolbar/Reload.vue

@@ -25,10 +25,10 @@ const onClick = () => {
   <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
+    <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center justify-center select-none">
       <component
         :is="iconMap.reload"
-        class="w-full h-full cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
+        class="cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
         :class="isReloading ? 'animate-spin' : ''"
         @click="onClick"
       />

packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue

@@ -45,7 +45,7 @@ useMenuCloseOnEsc(open)
         <div class="flex items-center gap-1">
           <component :is="iconMap.rowHeight" />
           <!-- Row Height -->
-          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
         </div>
       </a-button>
     </div>
@@ -54,19 +54,19 @@ useMenuCloseOnEsc(open)
         <div class="text-gray-500 !text-xs px-4 py-2">Select a row height</div>
         <div class="flex flex-col w-full text-sm" @click.stop>
           <div class="nc-row-height-option" @click="updateRowHeight(0)">
-            <NcIconsRowHeightShort class="nc-row-height-icon" />
+            <GeneralIcon icon="heightShort" class="nc-row-height-icon" />
             Short
           </div>
           <div class="nc-row-height-option" @click="updateRowHeight(1)">
-            <NcIconsRowHeightMedium class="nc-row-height-icon" />
+            <GeneralIcon icon="heightMedium" class="nc-row-height-icon" />
             Medium
           </div>
           <div class="nc-row-height-option" @click="updateRowHeight(2)">
-            <NcIconsRowHeightTall class="nc-row-height-icon" />
+            <GeneralIcon icon="heightTall" class="nc-row-height-icon" />
             Tall
           </div>
           <div class="nc-row-height-option" @click="updateRowHeight(3)">
-            <NcIconsRowHeightExtraTall class="nc-row-height-icon" />
+            <GeneralIcon icon="heightExtra" class="nc-row-height-icon" />
             Extra
           </div>
         </div>

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -58,7 +58,7 @@ function onPressEnter() {
     >
       <component :is="iconMap.search" class="text-grey" />
 
-      <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
+      <component :is="iconMap.arrowDown" class="text-grey" />
 
       <a-select
         v-model:value="search.field"

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -80,7 +80,7 @@ useMenuCloseOnEsc(open)
 
           <!-- Sort -->
           <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
-          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
 
           <span v-if="sorts?.length" class="nc-count-badge">{{ sorts.length }}</span>
         </div>

packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@@ -118,7 +118,7 @@ useMenuCloseOnEsc(open)
 
           <component :is="Icon" class="text-gray-500" :class="`nc-icon-${selectedView?.lock_type}`" />
 
-          <component :is="iconMap.arrowDown" class="text-grey !text-0.5rem" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
         </div>
       </a-button>
 

packages/nc-gui/package-lock.json

@@ -30,6 +30,7 @@
         "leaflet": "^1.9.2",
         "leaflet.markercluster": "^1.5.3",
         "locale-codes": "^1.3.1",
+        "material-symbols": "^0.5.1",
         "monaco-editor": "^0.33.0",
         "nocodb-sdk": "file:../nocodb-sdk",
         "papaparse": "^5.3.2",
@@ -11382,6 +11383,11 @@
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
       "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
     },
+    "node_modules/material-symbols": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.5.1.tgz",
+      "integrity": "sha512-o2R47ZQnzyudeos86/aaDt2NVQyOTmIJdXrud8uCJOKYTGGTi13WE8T4CMLM8Dt+Te2rJpK9sj290lQfdusJHQ=="
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
@@ -26720,6 +26726,11 @@
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
       "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
     },
+    "material-symbols": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.5.1.tgz",
+      "integrity": "sha512-o2R47ZQnzyudeos86/aaDt2NVQyOTmIJdXrud8uCJOKYTGGTi13WE8T4CMLM8Dt+Te2rJpK9sj290lQfdusJHQ=="
+    },
     "mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",

packages/nc-gui/package.json

@@ -54,6 +54,7 @@
     "leaflet": "^1.9.2",
     "leaflet.markercluster": "^1.5.3",
     "locale-codes": "^1.3.1",
+    "material-symbols": "^0.5.1",
     "monaco-editor": "^0.33.0",
     "nocodb-sdk": "file:../nocodb-sdk",
     "papaparse": "^5.3.2",

packages/nc-gui/utils/columnUtils.ts

@@ -65,7 +65,7 @@ const uiTypes = [
   },
   {
     name: UITypes.Number,
-    icon: iconMap.numeric,
+    icon: iconMap.number,
   },
   {
     name: UITypes.Decimal,

packages/nc-gui/utils/iconUtils.ts

@@ -144,8 +144,12 @@ import MdiLoading from '~icons/mdi/loading'
 import MdiArrowCollapse from '~icons/mdi/arrow-collapse'
 import MdiInformationOutline from '~icons/mdi/information-outline'
 import MdiMapMarkerAlert from '~icons/mdi/map-marker-alert'
+import NcIconsRowHeightMedium from '~icons/nc-icons/row-height-medium'
+import NcIconsRowHeightShort from '~icons/nc-icons/row-height-short'
+import NcIconsRowHeightTall from '~icons/nc-icons/row-height-tall'
+import NcIconsRowHeightExtraTall from '~icons/nc-icons/row-height-extra-tall'
 
-export const iconMap = {
+export const iconMapOld = {
   info: MdiInformationOutline,
   loading: MdiLoading,
   arrowCollapse: MdiArrowCollapse,
@@ -284,8 +288,158 @@ export const iconMap = {
   fileUpload: MdiFileUploadOutline,
   drag: MdiDrag,
   comment: MdiCommentTextOutline,
+  heightShort: NcIconsRowHeightShort,
+  heightMedium: NcIconsRowHeightMedium,
+  heightTall: NcIconsRowHeightTall,
+  heightExtra: NcIconsRowHeightExtraTall,
 } as const
 
+export const iconMap = {
+  info: h('span', { class: 'material-symbols-outlined' }, 'info_outline'),
+  loading: h('span', { class: 'material-symbols-outlined' }, 'autorenew'),
+  arrowCollapse: h('span', { class: 'material-symbols-outlined' }, 'keyboard_arrow_up'),
+  markerAlert: h('span', { class: 'material-symbols-outlined' }, 'warning'),
+  appStore: h('span', { class: 'material-symbols-outlined' }, 'apps'),
+  chevronLeft: h('span', { class: 'material-symbols-outlined' }, 'chevron_left'),
+  chevronRight: h('span', { class: 'material-symbols-outlined' }, 'chevron_right'),
+  imagePlaceholder: h('span', { class: 'material-symbols-outlined' }, 'insert_photo'),
+  linkRemove: h('span', { class: 'material-symbols-outlined' }, 'link_off'),
+  closeThick: h('span', { class: 'material-symbols-outlined' }, 'cancel'),
+  role: h('span', { class: 'material-symbols-outlined' }, 'badge'),
+  tableKey: h('span', { class: 'material-symbols-outlined' }, 'table_rows'),
+  export: h('span', { class: 'material-symbols-outlined' }, 'get_app'),
+  colInsertAfter: h('span', { class: 'material-symbols-outlined' }, 'add_box'),
+  colInsertBefore: h('span', { class: 'material-symbols-outlined' }, 'indeterminate_check_box'),
+  star: h('span', { class: 'material-symbols-outlined' }, 'star'),
+  sortDesc: h('span', { class: 'material-symbols-outlined' }, 'sort'),
+  sortAsc: h('span', { class: 'material-symbols-outlined', style: { transform: 'scaleY(-1)' } }, 'sort'),
+  contentSaveExit: h('span', { class: 'material-symbols-outlined' }, 'save'),
+  contentSaveStay: h('span', { class: 'material-symbols-outlined' }, 'save_as'),
+  exit: h('span', { class: 'material-symbols-outlined' }, 'exit_to_app'),
+  snippet: h('span', { class: 'material-symbols-outlined' }, 'code'),
+  embed: h('span', { class: 'material-symbols-outlined' }, 'code'),
+  list: h('span', { class: 'material-symbols-outlined' }, 'view_list'),
+  cloud: h('span', { class: 'material-symbols-outlined' }, 'cloud'),
+  apiAndSupport: h('span', { class: 'material-symbols-outlined' }, 'api'),
+  sort: h('span', { class: 'material-symbols-outlined', style: { transform: 'scaleY(-1)' } }, 'sort'),
+  translate: h('span', { class: 'material-symbols-outlined' }, 'translate'),
+  preview: h('span', { class: 'material-symbols-outlined' }, 'visibility'),
+  link: h('span', { class: 'material-symbols-outlined' }, 'link'),
+  returnKey: h('span', { class: 'material-symbols-outlined' }, 'keyboard_return'),
+  keyboard: h('span', { class: 'material-symbols-outlined' }, 'keyboard'),
+  accountPlus: h('span', { class: 'material-symbols-outlined' }, 'person_add'),
+  database: h('span', { class: 'material-symbols-outlined' }, 'storage'),
+  discord: h('span', { class: 'material-symbols-outlined' }, 'discord'),
+  reddit: h('span', { class: 'material-symbols-outlined' }, 'reddit'),
+  github: h('span', { class: 'material-symbols-outlined' }, 'github'),
+  twitter: h('span', { class: 'material-symbols-outlined' }, 'twitter'),
+  at: h('span', { class: 'material-symbols-outlined' }, 'alternate_email'),
+  plusCircle: h('span', { class: 'material-symbols-outlined' }, 'add_circle'),
+  minusCircle: h('span', { class: 'material-symbols-outlined' }, 'remove_circle'),
+  save: h('span', { class: 'material-symbols-outlined' }, 'save'),
+  signin: h('span', { class: 'material-symbols-outlined' }, 'login'),
+  signout: h('span', { class: 'material-symbols-outlined' }, 'logout'),
+  lock: h('span', { class: 'material-symbols-outlined' }, 'lock'),
+  account: h('span', { class: 'material-symbols-outlined' }, 'person'),
+  accountCircle: h('span', { class: 'material-symbols-outlined' }, 'account_circle'),
+  users: h('span', { class: 'material-symbols-outlined' }, 'people'),
+  download: h('span', { class: 'material-symbols-outlined' }, 'cloud_download'),
+  upload: h('span', { class: 'material-symbols-outlined' }, 'cloud_upload'),
+  hook: h('span', { class: 'material-symbols-outlined' }, 'compare_arrows'),
+  erd: h('span', { class: 'material-symbols-outlined' }, 'account_tree'),
+  plus: h('span', { class: 'material-symbols-outlined' }, 'add'),
+  search: h('span', { class: 'material-symbols-outlined' }, 'search'),
+  copy: h('span', { class: 'material-symbols-outlined' }, 'content_copy'),
+  duplicate: h('span', { class: 'material-symbols-outlined' }, 'file_copy'),
+  clipboard: h('span', { class: 'material-symbols-outlined' }, 'content_paste'),
+  settings: h('span', { class: 'material-symbols-outlined' }, 'settings'),
+  image: h('span', { class: 'material-symbols-outlined' }, 'image'),
+  datasource: h('span', { class: 'material-symbols-outlined' }, 'data_usage'),
+  book: h('span', { class: 'material-symbols-outlined' }, 'menu_book'),
+  arrowDown: h('span', { class: 'material-symbols-outlined', style: { fontSize: '.8rem' } }, 'keyboard_arrow_down'),
+  arrowRight: h('span', { class: 'material-symbols-outlined' }, 'keyboard_arrow_right'),
+  arrowDoubleLeft: h('span', { class: 'material-symbols-outlined' }, 'first_page'),
+  threeDotVertical: h('span', { class: 'material-symbols-outlined' }, 'more_vert'),
+  threeDotHorizontal: h('span', { class: 'material-symbols-outlined' }, 'more_horiz'),
+  table: h('span', { class: 'material-symbols-outlined' }, 'table_chart'),
+  excel: PhExcelThin, // h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
+  csv: PhCsvThin, // h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
+  code: h('span', { class: 'material-symbols-outlined' }, 'code'),
+  delete: h('span', { class: 'material-symbols-outlined' }, 'delete'),
+  edit: h('span', { class: 'material-symbols-outlined' }, 'edit'),
+  lookup: h('span', { class: 'material-symbols-outlined' }, 'search'),
+  text: h('span', { class: 'material-symbols-outlined' }, 'text_fields'),
+  longText: h('span', { class: 'material-symbols-outlined' }, 'text_format'),
+  clock: h('span', { class: 'material-symbols-outlined' }, 'access_time'),
+  web: h('span', { class: 'material-symbols-outlined' }, 'web'),
+  boolean: h('span', { class: 'material-symbols-outlined' }, 'check_box'),
+  calendar: h('span', { class: 'material-symbols-outlined' }, 'event_note'),
+  singleSelect: h('span', { class: 'material-symbols-outlined' }, 'radio_button_checked'),
+  multiSelect: h('span', { class: 'material-symbols-outlined' }, 'check_box_outline_blank'),
+  datetime: h('span', { class: 'material-symbols-outlined' }, 'date_range'),
+  geoData: h('span', { class: 'material-symbols-outlined' }, 'place'),
+  rating: h('span', { class: 'material-symbols-outlined' }, 'star_half'),
+  generic: h('span', { class: 'material-symbols-outlined' }, 'toc'),
+  number: h('span', { class: 'material-symbols-outlined' }, 'looks_one'),
+  email: h('span', { class: 'material-symbols-outlined' }, 'email'),
+  sendEmail: h('span', { class: 'material-symbols-outlined' }, 'email'),
+  currency: h('span', { class: 'material-symbols-outlined' }, 'attach_money'),
+  percent: h('span', { class: 'material-symbols-outlined' }, 'percent'),
+  decimal: h('span', { class: 'material-symbols-outlined' }, 'functions'),
+  specificDbType: h('span', { class: 'material-symbols-outlined' }, 'storage'),
+  duration: h('span', { class: 'material-symbols-outlined' }, 'accesstime'),
+  phone: h('span', { class: 'material-symbols-outlined' }, 'phone'),
+  formula: h('span', { class: 'material-symbols-outlined' }, 'function'),
+  function: h('span', { class: 'material-symbols-outlined' }, 'functions'),
+  key: h('span', { class: 'material-symbols-outlined' }, 'key'),
+  json: h('span', { class: 'material-symbols-outlined' }, 'code'),
+  qrCode: h('span', { class: 'material-symbols-outlined' }, 'qrcode'),
+  qrCodeScan: h('span', { class: 'material-symbols-outlined' }, 'qrcodescanner'),
+  barCode: h('span', { class: 'material-symbols-outlined' }, 'barcode'),
+  calculator: h('span', { class: 'material-symbols-outlined' }, 'calculator'),
+  rollup: h('span', { class: 'material-symbols-outlined' }, 'aggregate'),
+  eye: h('span', { class: 'material-symbols-outlined' }, 'visibility'),
+  eyeSlash: h('span', { class: 'material-symbols-outlined' }, 'visibility_off'),
+  expand: h('span', { class: 'material-symbols-outlined' }, 'open_in_full'),
+  check: h('span', { class: 'material-symbols-outlined' }, 'check'),
+  acl: h('span', { class: 'material-symbols-outlined' }, 'shield'),
+  sync: h('span', { class: 'material-symbols-outlined' }, 'sync'),
+  warning: h('span', { class: 'material-symbols-outlined' }, 'warning'),
+  share: h('span', { class: 'material-symbols-outlined' }, 'share'),
+  reload: h('span', { class: 'material-symbols-outlined ' }, 'refresh'),
+  xml: h('span', { class: 'material-symbols-outlined' }, 'code'),
+  airtable: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
+  grid: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
+  gallery: h('span', { class: 'material-symbols-outlined' }, 'view_module'),
+  form: h('span', { class: 'material-symbols-outlined' }, 'receipt'),
+  map: h('span', { class: 'material-symbols-outlined' }, 'map'),
+  kanban: h('span', { class: 'material-symbols-outlined' }, 'view_column'),
+  view: h('span', { class: 'material-symbols-outlined' }, 'view_list'),
+  rowHeight: h('span', { class: 'material-symbols-outlined' }, 'height'),
+  filter: h('span', { class: 'material-symbols-outlined' }, 'filter_list'),
+  closeCircle: h('span', { class: 'material-symbols-outlined' }, 'cancel'),
+  closeBox: h('span', { class: 'material-symbols-outlined' }, 'close'),
+  close: h('span', { class: 'material-symbols-outlined' }, 'close'),
+  openInNew: h('span', { class: 'material-symbols-outlined' }, 'open_in_new'),
+  mm: h('span', { class: 'material-symbols-outlined' }, 'table_rows'),
+  hm: h('span', { class: 'material-symbols-outlined' }, 'table_rows'),
+  bt: h('span', { class: 'material-symbols-outlined' }, 'subdirectory_arrow_right'),
+  passwordChange: h('span', { class: 'material-symbols-outlined' }, 'vpn_key'),
+  mapMarker: h('span', { class: 'material-symbols-outlined' }, 'room'),
+  currentLocation: h('span', { class: 'material-symbols-outlined' }, 'my_location'),
+  plusThick: h('span', { class: 'material-symbols-outlined' }, 'add_box'),
+  dragVertical: h('span', { class: 'material-symbols-outlined' }, 'drag_indicator'),
+  databaseSync: h('span', { class: 'material-symbols-outlined' }, 'sync_alt'),
+  fileUpload: h('span', { class: 'material-symbols-outlined' }, 'cloud_upload'),
+  drag: h('span', { class: 'material-symbols-outlined' }, 'drag_handle'),
+  comment: h('span', { class: 'material-symbols-outlined' }, 'comment'),
+
+  heightShort: NcIconsRowHeightShort,
+  heightMedium: NcIconsRowHeightMedium,
+  heightTall: NcIconsRowHeightTall,
+  heightExtra: NcIconsRowHeightExtraTall,
+}
+
 export const getMdiIcon = (type: string): any => {
   switch (type) {
     case 'mdi-check-bold':

packages/nc-gui/utils/viewUtils.ts

@@ -5,19 +5,19 @@ import { iconMap } from '~/utils/iconUtils'
 import type { Language } from '~/lib'
 
 export const viewIcons: Record<number | string, { icon: any; color: string }> = {
-  [ViewTypes.GRID]: { icon: iconMap.grid, color: '#8f96f2' },
-  [ViewTypes.FORM]: { icon: iconMap.form, color: themeV2Colors.pink['500'] },
+  [ViewTypes.GRID]: { icon: iconMap.grid, color: '#2b39f3' },
+  [ViewTypes.FORM]: { icon: iconMap.form, color: '#c00145' },
   calendar: { icon: iconMap.calendar, color: 'purple' },
-  [ViewTypes.GALLERY]: { icon: iconMap.gallery, color: 'orange' },
+  [ViewTypes.GALLERY]: { icon: iconMap.gallery, color: '#bd4200' },
   [ViewTypes.MAP]: { icon: iconMap.map, color: 'blue' },
-  [ViewTypes.KANBAN]: { icon: iconMap.kanban, color: 'green' },
+  [ViewTypes.KANBAN]: { icon: iconMap.kanban, color: '#007300' },
   view: { icon: iconMap.view, color: 'blue' },
 }
 
 export const viewTypeAlias: Record<number, string> = {
   [ViewTypes.GRID]: 'grid',
   [ViewTypes.FORM]: 'form',
-  [ViewTypes.GALLERY]: 'gallery',
+  [ViewTypes.GALLERY]: 'gaallery',
   [ViewTypes.KANBAN]: 'kanban',
   [ViewTypes.MAP]: 'map',
 }