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

pl-fe: Use tabler icon for verification badge

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-09-20 23:15:40 +02:00
parent 41f17e17c5
commit e5098bd7d4
3 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/pl-fe/src/assets/icons/verified.svg
View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" width="20" height="20" fill="none">
<circle cx="10" cy="10" r="10" fill="currentColor"/>
<path d="M5.586 10l3.193 3.193 6.385-6.385" stroke="#fff" stroke-width="3.193" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 302 B

6
packages/pl-fe/src/components/verification-badge.tsx
View File

@ -18,14 +18,14 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
const plFeConfig = usePlFeConfig();
// Prefer a custom icon if found
const icon = plFeConfig.verifiedIcon || require('pl-fe/assets/icons/verified.svg');
const icon = plFeConfig.verifiedIcon || require('@tabler/icons/outline/check.svg');
// Render component based on file extension
const Element = icon.endsWith('.svg') ? Icon : 'img';
return (
<span className='verified-icon' data-testid='verified-badge'>
<Element className={clsx('w-4 text-accent-500', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
<span className='rounded-full bg-accent-500' data-testid='verified-badge'>
<Element className={clsx('size-[16px] rounded-full bg-accent-500 stroke-[4] p-[1px] text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
</span>
);
};

4
packages/pl-fe/src/features/account/components/header.tsx
View File

@ -655,12 +655,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
src={account.avatar}
alt={account.avatar_description}
size={96}
className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
className='relative size-24 rounded-full bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
/>
</a>
{account.verified && (
<div className='absolute bottom-0 right-0'>
<VerificationBadge className='h-6 w-6 rounded-full bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' />
<VerificationBadge className='!size-[24px] rounded-full !p-[2px] ring-2 ring-white black:ring-black dark:ring-primary-900' />
</div>
)}
</div>