feat(gui): replace icons with light icon

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

packages/nc-gui/components.d.ts

@@ -249,8 +249,12 @@ declare module '@vue/runtime-core' {
     NcIconsRowHeightMedium: typeof import('~icons/nc-icons/row-height-medium')['default']
     NcIconsRowHeightShort: typeof import('~icons/nc-icons/row-height-short')['default']
     NcIconsRowHeightTall: typeof import('~icons/nc-icons/row-height-tall')['default']
+    PhChatTextThin: typeof import('~icons/ph/chat-text-thin')['default']
     PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default']
+    PhCloudLightningThin: typeof import('~icons/ph/cloud-lightning-thin')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
+    PhUserPlusThin: typeof import('~icons/ph/user-plus-thin')['default']
+    PhUsersThreeThin: typeof import('~icons/ph/users-three-thin')['default']
     RiLineHeight: typeof import('~icons/ri/line-height')['default']
     RiTeamFill: typeof import('~icons/ri/team-fill')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

packages/nc-gui/components/dashboard/TreeView.vue

@@ -28,8 +28,8 @@ import {
   useUIPermission,
   watchEffect,
 } from '#imports'
-import MdiView from '~icons/mdi/eye-circle-outline'
+import PhEyeThin from '~icons/ph/EyeThin'
-import MdiTableLarge from '~icons/mdi/table-large'
+import PhTableThin from '~icons/ph/TableThin'
 
 const { addTab, updateTab } = useTabs()
 
@@ -145,10 +145,10 @@ watchEffect(() => {
 
 const icon = (table: TableType) => {
   if (table.type === 'table') {
-    return MdiTableLarge
+    return PhTableThin
   }
   if (table.type === 'view') {
-    return MdiView
+    return PhEyeThin
   }
 }
 
@@ -1009,7 +1009,7 @@ const setIcon = async (icon: string, table: TableType) => {
 
     <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
       <LazyGeneralAddBaseButton
-        class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
+        class="color-transition py-1.5 px-2 font-bold cursor-pointer select-none hover:text-primary"
       />
 
       <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />

packages/nc-gui/components/general/AddBaseButton.vue

@@ -14,7 +14,7 @@ const toggleDialog = inject(ToggleDialogInj, () => {})
   >
     <div>
       <div class="flex items-center space-x-1">
-        <RiTeamFill class="mr-1 nc-new-base" />
+        <PhUsersThreeThin class="mr-1 nc-new-base" />
         <div>{{ t('title.teamAndSettings') }}</div>
       </div>
     </div>

packages/nc-gui/components/general/HelpAndSupport.vue

@@ -19,7 +19,7 @@ const openSwaggerLink = () => {
     class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
     @click="showDrawer = true"
   >
-    <MdiCommentTextOutline class="mr-1" />
+    <PhChatTextThin class="mr-1" />
 
     <!-- APIs & Support -->
     <div>{{ $t('title.APIsAndSupport') }}</div>

packages/nc-gui/components/general/JoinCloud.vue

@@ -5,7 +5,7 @@
     href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
     target="_blank"
   >
-    <PhCloudLightningDuotone class="mr-1" />
+    <PhCloudLightningThin class="mr-1" />
     Join NocoDB Cloud
   </a>
 </template>

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

@@ -154,7 +154,7 @@ useMenuCloseOnEsc(open)
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
-          <MdiEyeOffOutline />
+          <PhUserPlusThin />
 
           <!-- Fields -->
           <span class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>

packages/nc-gui/utils/iconUtils.ts

@@ -15,6 +15,8 @@ import MdiFlagOutline from '~icons/mdi/flag-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiEyeCircleOutline from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
+import PhEyeThin from '~icons/ph/EyeThin'
+import PhTableThin from '~icons/ph/TableThin'
 
 export const iconMap = {
   'mdi-check-bold': MdiCheckBold,
@@ -31,8 +33,8 @@ export const iconMap = {
   'mdi-thumb-up-outline': MdiThumbUpOutline,
   'mdi-flag': MdiFlag,
   'mdi-flag-outline': MdiFlagOutline,
-  'mdi-table-large': MdiTableLarge,
+  'mdi-table-large': PhTableThin,
-  'mdi-eye-circle-outline': MdiEyeCircleOutline,
+  'mdi-eye-circle-outline': PhEyeThin,
   'mdi-account-group': MdiAccountGroup,
 } as const
 

packages/nc-gui/utils/viewUtils.ts

@@ -8,14 +8,19 @@ import MdiGalleryIcon from '~icons/mdi/camera-image'
 import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
 import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
 import type { Language } from '~/lib'
+import PhTableThin from '~icons/ph/TableThin'
+import PhImageThin from '~icons/ph/ImageThin'
+import PhComputerTowerThin from '~icons/ph/ComputerTowerThin'
+import PhSquareHalfBottomThin from '~icons/ph/SquareHalfBottomThin'
+import PhEyeThin from '~icons/ph/EyeThin'
 
 export const viewIcons: Record<number | string, { icon: any; color: string }> = {
-  [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' },
+  [ViewTypes.GRID]: { icon: PhTableThin, color: '#8f96f2' },
-  [ViewTypes.FORM]: { icon: MdiFormIcon, color: themeV2Colors.pink['500'] },
+  [ViewTypes.FORM]: { icon: PhComputerTowerThin, color: themeV2Colors.pink['500'] },
   calendar: { icon: MdiCalendarIcon, color: 'purple' },
-  [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
+  [ViewTypes.GALLERY]: { icon: PhImageThin, color: 'orange' },
-  [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },
+  [ViewTypes.KANBAN]: { icon: PhSquareHalfBottomThin, color: 'green' },
-  view: { icon: MdiEyeIcon, color: 'blue' },
+  view: { icon: PhEyeThin, color: 'blue' },
 }
 
 export const viewTypeAlias: Record<number, string> = {