From e5098bd7d420634a31b6602c9b3184568faaeef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 20 Sep 2024 23:15:40 +0200
Subject: [PATCH] pl-fe: Use tabler icon for verification badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/assets/icons/verified.svg              | 4 ----
 packages/pl-fe/src/components/verification-badge.tsx      | 6 +++---
 packages/pl-fe/src/features/account/components/header.tsx | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)
 delete mode 100644 packages/pl-fe/src/assets/icons/verified.svg

diff --git a/packages/pl-fe/src/assets/icons/verified.svg b/packages/pl-fe/src/assets/icons/verified.svg
deleted file mode 100644
index cfd5b9d90..000000000
--- a/packages/pl-fe/src/assets/icons/verified.svg
+++ /dev/null
@@ -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>
diff --git a/packages/pl-fe/src/components/verification-badge.tsx b/packages/pl-fe/src/components/verification-badge.tsx
index b6f57cc21..8189dd481 100644
--- a/packages/pl-fe/src/components/verification-badge.tsx
+++ b/packages/pl-fe/src/components/verification-badge.tsx
@@ -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>
   );
 };
diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx
index a99bd3ed5..0fd34f02f 100644
--- a/packages/pl-fe/src/features/account/components/header.tsx
+++ b/packages/pl-fe/src/features/account/components/header.tsx
@@ -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>