From 5828e239b1d9f9011815c49462741251134f7360 Mon Sep 17 00:00:00 2001
From: Tassoman <tassoman@gmail.com>
Date: Tue, 14 Feb 2023 20:28:16 +0000
Subject: [PATCH] verified badge on profile's header

---
 CHANGELOG.md                                              | 1 +
 app/soapbox/features/account/components/header.tsx        | 8 +++++++-
 app/soapbox/features/ui/components/profile-info-panel.tsx | 4 ----
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6cd9d414..e744bf225 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: let "mute conversation" be clicked from any feed, not just noficiations.
 - Posts: display all emoji reactions.
 - Reactions: improved UI of reactions on statuses.
+- Profile: make verified badge more prominent, overlapping with avatar.
 
 ### Fixed
 - Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load.
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 497e78687..d80bcfeb8 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -19,6 +19,7 @@ import Badge from 'soapbox/components/badge';
 import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
 import StillImage from 'soapbox/components/still-image';
 import { Avatar, HStack, IconButton } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification-badge';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
@@ -626,7 +627,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       <div className='px-4 sm:px-6'>
         <HStack className='-mt-12' alignItems='bottom' space={5}>
-          <div className='flex'>
+          <div className='relative flex'>
             <a href={account.avatar} onClick={handleAvatarClick} target='_blank'>
               <Avatar
                 src={account.avatar}
@@ -634,6 +635,11 @@ const Header: React.FC<IHeader> = ({ account }) => {
                 className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white 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' />
+              </div>
+            )}
           </div>
 
           <div className='mt-6 flex w-full justify-end sm:pb-1'>
diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 546b0df6d..1fd6035bc 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -6,7 +6,6 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import Badge from 'soapbox/components/badge';
 import Markup from 'soapbox/components/markup';
 import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
 import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges';
@@ -135,7 +134,6 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
   const deactivated = !account.pleroma.get('is_active', true) === true;
   const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.display_name_html };
   const memberSinceDate = intl.formatDate(account.created_at, { month: 'long', year: 'numeric' });
-  const verified = account.verified;
   const badges = getBadges();
 
   return (
@@ -145,8 +143,6 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           <HStack space={1} alignItems='center'>
             <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
 
-            {verified && <VerificationBadge />}
-
             {account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
 
             {badges.length > 0 && (