From 80470076a9abbd36eba5f6426460d9376642cd09 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 20 Feb 2023 11:22:20 +0530 Subject: [PATCH] feat(gui): replace icons with light icon Signed-off-by: Pranav C --- packages/nc-gui/components/dashboard/TreeView.vue | 10 +++++----- .../nc-gui/components/general/AddBaseButton.vue | 2 +- .../nc-gui/components/general/HelpAndSupport.vue | 2 +- packages/nc-gui/components/general/JoinCloud.vue | 2 +- .../components/smartsheet/toolbar/FieldsMenu.vue | 2 +- packages/nc-gui/utils/iconUtils.ts | 6 ++++-- packages/nc-gui/utils/viewUtils.ts | 15 ++++++++++----- 7 files changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index bf4ffb4b61..b7f69a4bdc 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -30,8 +30,8 @@ import { useUIPermission, watchEffect, } from '#imports' -import MdiView from '~icons/mdi/eye-circle-outline' -import MdiTableLarge from '~icons/mdi/table-large' +import PhEyeThin from '~icons/ph/EyeThin' +import PhTableThin from '~icons/ph/TableThin' const { isMobileMode } = useGlobal() @@ -152,10 +152,10 @@ watchEffect(() => { const icon = (table: TableType) => { if (table.type === 'table') { - return MdiTableLarge + return PhTableThin } if (table.type === 'view') { - return MdiView + return PhEyeThin } } @@ -1028,7 +1028,7 @@ const setIcon = async (icon: string, table: TableType) => {
diff --git a/packages/nc-gui/components/general/AddBaseButton.vue b/packages/nc-gui/components/general/AddBaseButton.vue index 4f43a7be1b..58f916562f 100644 --- a/packages/nc-gui/components/general/AddBaseButton.vue +++ b/packages/nc-gui/components/general/AddBaseButton.vue @@ -14,7 +14,7 @@ const toggleDialog = inject(ToggleDialogInj, () => {}) >
- +
{{ t('title.teamAndSettings') }}
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue index 9a522c6907..6861b990d9 100644 --- a/packages/nc-gui/components/general/HelpAndSupport.vue +++ b/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" > - +
{{ $t('title.APIsAndSupport') }}
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue index 5b8b8e929b..596e035156 100644 --- a/packages/nc-gui/components/general/JoinCloud.vue +++ b/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" > - + Join NocoDB Cloud diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue index 2595788282..2f24546e10 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue @@ -156,7 +156,7 @@ useMenuCloseOnEsc(open)
- + {{ $t('objects.fields') }} diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts index 45dd6f219d..ee52a2e0cb 100644 --- a/packages/nc-gui/utils/iconUtils.ts +++ b/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-eye-circle-outline': MdiEyeCircleOutline, + 'mdi-table-large': PhTableThin, + 'mdi-eye-circle-outline': PhEyeThin, 'mdi-account-group': MdiAccountGroup, } as const diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts index d70ee0d4b8..5fda4fe6f3 100644 --- a/packages/nc-gui/utils/viewUtils.ts +++ b/packages/nc-gui/utils/viewUtils.ts @@ -9,15 +9,20 @@ import MdiKanbanIcon from '~icons/mdi/tablet-dashboard' import MdiMapIcon from '~icons/mdi/map-outline' 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 = { - [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' }, - [ViewTypes.FORM]: { icon: MdiFormIcon, color: themeV2Colors.pink['500'] }, + [ViewTypes.GRID]: { icon: PhTableThin, color: '#8f96f2' }, + [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.MAP]: { icon: MdiMapIcon, color: 'blue' }, - [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' }, - view: { icon: MdiEyeIcon, color: 'blue' }, + [ViewTypes.KANBAN]: { icon: PhSquareHalfBottomThin, color: 'green' }, + view: { icon: PhEyeThin, color: 'blue' }, } export const viewTypeAlias: Record = {