matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: replace some icons

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-09 19:35:08 +02:00
parent d4d45bafe0
commit d6e56fafae
17 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/pl-fe/src/components/account-hover-card.tsx
View File

@ -170,7 +170,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
{account.pronouns.length > 0 && (
<HStack alignItems='center' space={0.5}>
<Icon
src={require('@tabler/icons/outline/tags.svg')}
src={require('@phosphor-icons/core/regular/tag.svg')}
className='size-4 text-gray-800 dark:text-gray-200'
/>

2
packages/pl-fe/src/components/account-local-time.tsx
View File

@ -78,7 +78,7 @@ const AccountLocalTime: React.FC<IAccountLocalTime> = ({ accountId, field }) =>
return (
<HStack className='mt-1' alignItems='center' space={0.5} title={intl.formatMessage(messages.timezone, { timezone: field.value })}>
<Icon
src={require('@tabler/icons/outline/clock.svg')}
src={require('@phosphor-icons/core/regular/clock.svg')}
className='size-4 text-gray-800 dark:text-gray-200'
/>
<Text size='sm'>

2
packages/pl-fe/src/components/alt-indicator.tsx
View File

@ -15,7 +15,7 @@ const AltIndicator: React.FC<IAltIndicator> = React.forwardRef<HTMLSpanElement,
{...props}
ref={ref}
>
{warning && <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />}
{warning && <Icon className='size-4' src={require('@phosphor-icons/core/regular/warning.svg')} />}
{message || <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />}
</span>
));

8
packages/pl-fe/src/components/autosuggest-location.tsx
View File

@ -7,10 +7,10 @@ import Text from 'pl-fe/components/ui/text';
import type { Location } from 'pl-api';
const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
const homeIcon = require('@tabler/icons/outline/home-2.svg');
const mapPinIcon = require('@tabler/icons/outline/map-pin.svg');
const roadIcon = require('@tabler/icons/outline/road.svg');
const buildingCommunityIcon = require('@phosphor-icons/core/regular/city.svg');
const homeIcon = require('@phosphor-icons/core/regular/house.svg');
const mapPinIcon = require('@phosphor-icons/core/regular/map-pin.svg');
const roadIcon = require('@phosphor-icons/core/regular/road-horizon.svg');
const ADDRESS_ICONS: Record<string, string> = {
house: homeIcon,

8
packages/pl-fe/src/components/birthday-input.tsx
View File

@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/outline/chevron-left.svg')}
src={require('@phosphor-icons/core/regular/caret-left.svg')}
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
aria-label={intl.formatMessage(messages.previousMonth)}
@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { month: 'long' })}
<IconButton
className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/outline/chevron-right.svg')}
src={require('@phosphor-icons/core/regular/caret-right.svg')}
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
aria-label={intl.formatMessage(messages.nextMonth)}
@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/outline/chevron-left.svg')}
src={require('@phosphor-icons/core/regular/caret-left.svg')}
onClick={decreaseYear}
disabled={prevYearButtonDisabled}
aria-label={intl.formatMessage(messages.previousYear)}
@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { year: 'numeric' })}
<IconButton
className='datepicker__button rtl:rotate-180'
src={require('@tabler/icons/outline/chevron-right.svg')}
src={require('@phosphor-icons/core/regular/caret-right.svg')}
onClick={increaseYear}
disabled={nextYearButtonDisabled}
aria-label={intl.formatMessage(messages.nextYear)}

2
packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
View File

@ -142,7 +142,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
)}
{!!item.items?.length && (
<Icon src={require('@tabler/icons/outline/chevron-right.svg')} containerClassName='ml-auto' className='size-5 flex-none' />
<Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} containerClassName='ml-auto' className='size-5 flex-none' />
)}
</a>
</li>

2
packages/pl-fe/src/components/list.tsx
View File

@ -76,7 +76,7 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
<HStack space={1} alignItems='center' className='⁂-list-item__body'>
{children}
<Icon src={require('@tabler/icons/outline/chevron-right.svg')} />
<Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} />
</HStack>
) : null}

2
packages/pl-fe/src/components/pending-items-row.tsx
View File

@ -44,7 +44,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
</HStack>
<Icon
src={require('@tabler/icons/outline/chevron-right.svg')}
src={require('@phosphor-icons/core/regular/caret-right.svg')}
className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
/>
</HStack>

4
packages/pl-fe/src/components/status-content.tsx
View File

@ -55,7 +55,7 @@ const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick, quote, poll, previ
{!preview && (
<button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
<FormattedMessage id='status.read_more' defaultMessage='Read more' />
<Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
<Icon className='inline-block size-5' src={require('@phosphor-icons/core/regular/caret-right.svg')} />
</button>
)}
</div>
@ -201,7 +201,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
theme='muted'
size='xs'
onClick={toggleExpanded}
icon={require('@tabler/icons/outline/chevron-down.svg')}
icon={require('@phosphor-icons/core/regular/caret-down.svg')}
iconClassName={clsx(
'transition-transform', {
'rotate-180': expanded,

2
packages/pl-fe/src/components/ui/accordion.tsx
View File

@ -70,7 +70,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
</button>
)}
<Icon
src={require('@tabler/icons/outline/chevron-down.svg')}
src={require('@phosphor-icons/core/regular/caret-down.svg')}
className='⁂-accordion__header__chevron'
/>
</div>

2
packages/pl-fe/src/features/compose-event/components/upload-button.tsx
View File

@ -33,7 +33,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
return (
<HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
<Icon
src={require('@tabler/icons/outline/photo-plus.svg')}
src={require('@phosphor-icons/core/regular/upload.svg')}
className='size-7'
onClick={handleClick}
/>

2
packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
View File

@ -190,7 +190,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
type='button'
>
<Icon src={icon} />
<Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='-bottom-2 size-4' />
<Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='-bottom-2 size-4' />
{showDropDown && (
<div
className='absolute left-0 top-9 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 shadow-lg transition-opacity dark:bg-gray-900'

2
packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
View File

@ -82,7 +82,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
justifyContent='center'
>
<Icon
src={require('@tabler/icons/outline/photo-plus.svg')}
src={require('@phosphor-icons/core/regular/upload.svg')}
className='size-4.5'
/>

10
packages/pl-fe/src/features/ui/components/theme-selector.tsx
View File

@ -23,13 +23,13 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
const themeIconSrc = useMemo(() => {
switch (value) {
case 'system':
return require('@tabler/icons/outline/device-desktop.svg');
return require('@phosphor-icons/core/regular/desktop.svg');
case 'light':
return require('@tabler/icons/outline/sun.svg');
return require('@phosphor-icons/core/regular/sun-dim.svg');
case 'dark':
return require('@tabler/icons/outline/moon.svg');
return require('@phosphor-icons/core/regular/moon.svg');
case 'black':
return require('@tabler/icons/outline/shadow.svg');
return require('@phosphor-icons/core/regular/moon-starsa.svg');
default:
return null;
}
@ -58,7 +58,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
</Select>
<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
<Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
<Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
</div>
</div>
</label>

4
packages/pl-fe/src/pages/dashboard/report.tsx
View File

@ -53,7 +53,7 @@ const ReportStatuses: React.FC<IReportStatuses> = ({ statusIds }) => {
onClick={() => handleChangeIndex(index - 1)}
className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
>
<Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
<Icon src={require('@phosphor-icons/core/regular/caret-left.svg')} className='size-6 text-black dark:text-white' />
</button>
</div>
)}
@ -66,7 +66,7 @@ const ReportStatuses: React.FC<IReportStatuses> = ({ statusIds }) => {
onClick={() => handleChangeIndex(index + 1)}
className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
>
<Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
<Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} className='size-6 text-black dark:text-white' />
</button>
</div>
)}

4
packages/pl-fe/src/pages/status-lists/events.tsx
View File

@ -66,7 +66,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
onClick={() => handleChangeIndex(index - 1)}
className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
>
<Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
<Icon src={require('@phosphor-icons/core/regular/caret-left.svg')} className='size-6 text-black dark:text-white' />
</button>
</div>
)}
@ -79,7 +79,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
onClick={() => handleChangeIndex(index + 1)}
className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
>
<Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
<Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} className='size-6 text-black dark:text-white' />
</button>
</div>
)}

2
packages/pl-fe/src/pages/statuses/status.tsx
View File

@ -103,7 +103,7 @@ const StatusPage: React.FC<IStatusDetails> = (props) => {
{
text: intl.formatMessage(messages.expandAll),
action: expandAllStatuses,
icon: require('@tabler/icons/outline/chevron-down.svg'),
icon: require('@phosphor-icons/core/regular/caret-down.svg'),
},
);
}