Skip to content

Commit 9a22cb7

Browse files
devmountdevmount
committed
🔨 Switch tabler for phosphor icons
1 parent fbd2566 commit 9a22cb7

22 files changed

+95
-109
lines changed

‎frontend/src/components/ConfirmationModal.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
33
import { PrimaryButton, DangerButton } from '@thunderbirdops/services-ui';
44
55
// icons
6-
import { IconX } from '@tabler/icons-vue';
6+
import { PhX } from '@phosphor-icons/vue';
77
88
const { t } = useI18n();
99
@@ -33,7 +33,7 @@ const emit = defineEmits(['close', 'confirm', 'error']);
3333
class="position-center fixed z-50 flex w-full max-w-lg flex-col items-center gap-6 rounded-xl bg-white p-12 dark:bg-gray-700"
3434
>
3535
<div class="btn-close absolute right-8 top-8 cursor-pointer" @click="emit('close')" :title="t('label.close')">
36-
<icon-x class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-400" />
36+
<ph-x class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-400" />
3737
</div>
3838
<div class="text-2xl font-semibold text-teal-500">
3939
{{ title }}

‎frontend/src/components/NavBar.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import DropDown from '@/elements/DropDown.vue';
77
import NavBarItem from '@/elements/NavBarItem.vue';
88
import TextButton from '@/elements/TextButton.vue';
99
import { TooltipPosition } from '@/definitions';
10-
import { IconExternalLink } from '@tabler/icons-vue';
11-
import { PhLinkSimple } from '@phosphor-icons/vue';
10+
import { PhArrowSquareOut, PhLinkSimple } from '@phosphor-icons/vue';
1211
import { UserAvatar, ToolTip } from '@thunderbirdops/services-ui';
1312
1413
// component constants
@@ -108,10 +107,10 @@ const copyLink = async () => {
108107
data-testid="user-nav-share-link-btn"
109108
/>
110109
<router-link :to="{ name: 'report-bug' }" class="router-link-with-icon" data-testid="user-nav-report-bug-menu">
111-
{{ t('navBar.reportBug') }} <icon-external-link class="size-4"/>
110+
{{ t('navBar.reportBug') }} <ph-arrow-square-out class="size-4"/>
112111
</router-link>
113112
<router-link :to="{ name: 'contact' }" class="router-link-with-icon" data-testid="user-nav-contact-menu">
114-
{{ t('label.contact') }} <icon-external-link class="size-4"/>
113+
{{ t('label.contact') }} <ph-arrow-square-out class="size-4"/>
115114
</router-link>
116115
<hr class="border-teal-500" />
117116
<router-link :to="{ name: 'logout' }" data-testid="user-nav-logout-menu">
@@ -260,4 +259,4 @@ const copyLink = async () => {
260259
transition: opacity 250ms ease-out;
261260
}
262261
}
263-
</style>
262+
</style>

‎frontend/src/components/NavBarMobile.vue‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,28 @@ import { ref } from 'vue';
33
import { useI18n } from 'vue-i18n';
44
import { useUserStore } from '@/stores/user-store';
55
import {
6-
IconMenu2,
7-
IconX,
8-
IconHome,
9-
IconCalendarClock,
10-
IconCalendarCheck,
11-
IconExternalLink,
12-
IconSettings,
13-
IconLogout,
14-
IconChevronDown,
15-
IconUserSquare,
16-
} from '@tabler/icons-vue';
6+
PhList,
7+
PhX,
8+
PhHouse,
9+
PhCalendarDot,
10+
PhCalendarCheck,
11+
PhArrowSquareOut,
12+
PhGear,
13+
PhSignOut,
14+
PhCaretDown,
15+
PhUserSquare,
16+
} from '@phosphor-icons/vue';
1717
import { PrimaryButton, UserAvatar } from '@thunderbirdops/services-ui';
1818
1919
// component constants
2020
const userStore = useUserStore();
2121
const { t } = useI18n();
2222
2323
const navItems = [
24-
{ route: 'dashboard', i18nKey: 'dashboard', icon: IconHome },
25-
{ route: 'bookings', i18nKey: 'bookings', icon: IconCalendarCheck },
26-
{ route: 'availability', i18nKey: 'availability', icon: IconCalendarClock },
27-
{ route: 'settings', i18nKey: 'settings', icon: IconSettings },
24+
{ route: 'dashboard', i18nKey: 'dashboard', icon: PhHouse },
25+
{ route: 'bookings', i18nKey: 'bookings', icon: PhCalendarCheck },
26+
{ route: 'availability', i18nKey: 'availability', icon: PhCalendarDot },
27+
{ route: 'settings', i18nKey: 'settings', icon: PhGear },
2828
];
2929
3030
const menuOpen = ref(false);
@@ -56,7 +56,7 @@ async function copyLink() {
5656
<!-- Mobile NavBar (closed) -->
5757
<header class="header-mobile">
5858
<button @click="onMenuOpen" :aria-label="t('label.openMenu')" :aria-expanded="menuOpen" aria-controls="primaryNav">
59-
<icon-menu2 size="24" />
59+
<ph-list size="24" />
6060
</button>
6161

6262
<router-link :to="{ name: userStore.authenticated ? 'dashboard' : 'home' }">
@@ -72,7 +72,7 @@ async function copyLink() {
7272
<div class="menu-content-container">
7373
<header>
7474
<button @click="onMenuClose">
75-
<icon-x size="24" />
75+
<ph-x size="24" />
7676
</button>
7777

7878
<img src="@/assets/svg/appointment_logo.svg" alt="Appointment Logo" />
@@ -98,32 +98,32 @@ async function copyLink() {
9898
<user-avatar :username="userStore.data.username" :avatar-url="userStore.data.avatarUrl" />
9999
<span class="user-email">{{ userStore.data.email }}</span>
100100
</div>
101-
<icon-chevron-down size="20" class="chevron-icon" />
101+
<ph-caret-down size="20" class="chevron-icon" />
102102
</summary>
103103

104104
<ul @click="onMenuClose">
105105
<router-link to="profile">
106106
<li>
107-
<icon-user-square size="24" />
107+
<ph-user-square size="24" />
108108
{{ t('label.userProfile') }}
109109
</li>
110110
</router-link>
111111
<router-link to="report-bug">
112112
<li>
113-
<icon-external-link size="24" />
113+
<ph-arrow-square-out size="24" />
114114
{{ t('navBar.reportBug') }}
115115
</li>
116116
</router-link>
117117
<router-link to="contact">
118118
<li>
119-
<icon-external-link size="24" />
119+
<ph-arrow-square-out size="24" />
120120
{{ t('label.contact') }}
121121
</li>
122122
</router-link>
123123
</ul>
124124
</details>
125125
<router-link to="logout">
126-
<icon-logout size="24" />
126+
<ph-sign-out size="24" />
127127
{{ t('label.logOut') }}
128128
</router-link>
129129
</div>
@@ -312,4 +312,4 @@ nav {
312312
transition: opacity 250ms ease-out;
313313
}
314314
}
315-
</style>
315+
</style>

‎frontend/src/elements/AlertBox.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { Alert } from '@/models';
33
import { AlertSchemes } from '@/definitions';
4-
import { IconX } from '@tabler/icons-vue';
4+
import { PhX } from '@phosphor-icons/vue';
55
import { computed, ref } from 'vue';
66
import { useI18n } from 'vue-i18n';
77
import { NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
@@ -56,7 +56,7 @@ const toggleDetails = () => {
5656
<span v-if="!open">Show more</span>
5757
</span>
5858
<span v-if="canClose" class="btn-close" @click="emit('close')" :title="t('label.close')">
59-
<icon-x />
59+
<ph-x />
6060
</span>
6161
</span>
6262
</template>

‎frontend/src/elements/AppointmentGridItem.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { Appointment } from '@/models';
77
88
// icons
99
import {
10-
IconBulb,
11-
IconCalendar,
12-
IconClock,
13-
} from '@tabler/icons-vue';
10+
PhLightbulb,
11+
PhCalendarBlank,
12+
PhClock,
13+
} from '@phosphor-icons/vue';
1414
import { dayjsKey, paintBackgroundKey } from '@/keys';
1515
1616
// component constants
@@ -49,15 +49,15 @@ const isPending = computed(() => props.appointment.slots[0].booking_status === B
4949
>
5050
<div>{{ appointment.title }}</div>
5151
<div class="flex items-center gap-1 text-sm">
52-
<icon-bulb class="size-4 shrink-0 fill-transparent stroke-gray-500 stroke-2"/>
52+
<ph-lightbulb class="size-4 shrink-0 fill-transparent stroke-gray-500 stroke-2"/>
5353
{{ t('label.' + keyByValue(BookingStatus, appointment?.slots[0].booking_status ?? 'Unknown', true)) }}
5454
</div>
5555
<div class="flex items-center gap-1 text-sm">
56-
<icon-calendar class="size-4 shrink-0 fill-transparent stroke-gray-500 stroke-2"/>
56+
<ph-calendar-blank class="size-4 shrink-0 fill-transparent stroke-gray-500 stroke-2"/>
5757
{{ appointment.calendar_title }}
5858
</div>
5959
<div class="flex items-center gap-1 text-sm">
60-
<icon-clock class="size-4 shrink-0 fill-transparent stroke-gray-500 stroke-2"/>
60+
<ph-clock class="size-4 shrink-0 fill-transparent stroke-gray-500 stroke-2"/>
6161
<div>{{ dj(appointment?.slots[0].start).format('LL') }}</div>
6262
<div>{{ dj(appointment?.slots[0].start).format(timeFormat()) }}</div>
6363
<div>{{ t('label.to') }}</div>

‎frontend/src/elements/CautionButton.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
// icons
3-
import { IconCheck, IconCopy } from '@tabler/icons-vue';
3+
import { PhCheck, PhCopy } from '@phosphor-icons/vue';
44
55
// component properties
66
interface Props {
@@ -26,8 +26,8 @@ defineProps<Props>();
2626
v-if="waiting"
2727
class="absolute size-5 animate-spin rounded-full border-2 border-white border-t-transparent"
2828
></div>
29-
<icon-copy v-if="icon === 'copy'" class="size-6 fill-transparent stroke-current stroke-2" />
30-
<icon-check v-if="icon === 'check'" class="size-6 fill-transparent stroke-current stroke-2" />
29+
<ph-copy v-if="icon === 'copy'" class="size-6 fill-transparent stroke-current stroke-2" />
30+
<ph-check v-if="icon === 'check'" class="size-6 fill-transparent stroke-current stroke-2" />
3131
<template v-if="label">
3232
{{ label }}
3333
</template>

‎frontend/src/elements/EventPopup.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { CalendarEvent } from '@/models';
66
77
// icons
88
import {
9-
IconCalendar,
10-
IconClock,
11-
IconUsers,
12-
} from '@tabler/icons-vue';
9+
PhCalendarBlank,
10+
PhClock,
11+
PhUsers,
12+
} from '@phosphor-icons/vue';
1313
import { dayjsKey } from '@/keys';
1414
1515
// component constants
@@ -64,15 +64,15 @@ const eventDateTime = computed(
6464
<div class="flex flex-col gap-2 text-gray-700 dark:text-gray-200">
6565
<div class="max-w-sm truncate text-lg font-semibold text-teal-500">{{ event?.title }}</div>
6666
<div class="flex items-center gap-1.5 text-xs">
67-
<icon-clock class="size-4 fill-transparent stroke-teal-500 stroke-2" />
67+
<ph-clock class="size-4 fill-transparent stroke-teal-500 stroke-2" />
6868
{{ eventDateTime }}
6969
</div>
7070
<div class="flex items-center gap-1.5 text-xs">
71-
<icon-calendar class="size-4 fill-transparent stroke-teal-500 stroke-2" />
71+
<ph-calendar-blank class="size-4 fill-transparent stroke-teal-500 stroke-2" />
7272
{{ event?.customData?.calendar_title }}
7373
</div>
7474
<div v-if="event?.customData?.attendee" class="flex items-center gap-1.5 text-xs">
75-
<icon-users class="size-4 fill-transparent stroke-teal-500 stroke-2" />
75+
<ph-users class="size-4 fill-transparent stroke-teal-500 stroke-2" />
7676
{{ t('label.guest', { 'count': 1 }) }}
7777
</div>
7878
</div>

‎frontend/src/elements/ListPagination.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { ref, computed } from 'vue';
33
44
// icons
5-
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-vue';
5+
import { PhCaretLeft, PhCaretRight } from '@phosphor-icons/vue';
66
77
// component properties and emits
88
interface Props {
@@ -52,7 +52,7 @@ const showLastEllipsis = (p: number) => pageCount.value >= 6 && currentPage.valu
5252
<template>
5353
<nav class="flex flex-nowrap items-center gap-2">
5454
<button @click="prev" :disabled="isFirstPage" class="btn-back" :class="{ 'text-gray-500': isFirstPage }">
55-
<icon-chevron-left class="stroke-1.5 size-5" />
55+
<ph-caret-left class="stroke-1.5 size-5" />
5656
</button>
5757
<div
5858
v-for="(p, i) in pageCount" :key="i"
@@ -70,7 +70,7 @@ const showLastEllipsis = (p: number) => pageCount.value >= 6 && currentPage.valu
7070
<div v-show="showLastEllipsis(p)">&hellip;</div>
7171
</div>
7272
<button @click="next" :disabled="isLastPage" class="btn-forward" :class="{ 'text-gray-500': isLastPage }">
73-
<icon-chevron-right class="stroke-1.5 size-5" />
73+
<ph-caret-right class="stroke-1.5 size-5" />
7474
</button>
7575
</nav>
7676
</template>

‎frontend/src/elements/PrimaryButton.vue‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
44
import ToolTip from '@/elements/ToolTip.vue';
55
66
// icons
7-
import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
7+
import { PhCheck, PhCopy } from '@phosphor-icons/vue';
88
99
// component constants
1010
const { t } = useI18n();
@@ -43,14 +43,8 @@ const copyToClipboard = async () => {
4343
v-if="waiting"
4444
class="absolute size-5 animate-spin rounded-full border-2 border-white border-t-transparent"
4545
></div>
46-
<icon-copy
47-
v-if="copy && !copied"
48-
class="size-6 fill-transparent stroke-current stroke-2"
49-
/>
50-
<icon-clipboard-check
51-
v-if="copy && copied"
52-
class="size-6 fill-transparent stroke-current stroke-2"
53-
/>
46+
<ph-copy v-if="copy && !copied" class="size-6 fill-transparent stroke-current stroke-2" />
47+
<ph-check v-if="copy && copied" class="size-6 fill-transparent stroke-current stroke-2" />
5448
<template v-if="label">
5549
{{ label }}
5650
</template>

‎frontend/src/elements/SiteNotification.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { IconChevronRight } from '@tabler/icons-vue';
2+
import { PhCaretRight } from '@phosphor-icons/vue';
33
44
// component properties
55
interface Props {
@@ -21,7 +21,7 @@ defineProps<Props>();
2121
<span class="mr-2 flex-auto text-left font-semibold">
2222
<slot></slot>
2323
</span>
24-
<icon-chevron-right class="stroke-white-500 size-6 fill-transparent stroke-1"/>
24+
<ph-caret-right class="stroke-white-500 size-6 fill-transparent stroke-1"/>
2525
</div>
2626
</a>
2727
</template>

0 commit comments

Comments
 (0)