Refactor bot badge

app/soapbox/features/ui/components/profile_info_panel.js

@@ -17,6 +17,7 @@ const messages = defineMessages({
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
   deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
+  bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
 });
 
 const dateFormatOptions = {
@@ -56,7 +57,6 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     }
 
     const lockedIcon = account.get('locked') ? (<Icon id='lock' title={intl.formatMessage(messages.account_locked)} />) : '';
-    const badge = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
     const content = { __html: account.get('note_emojified') };
     const fields = account.get('fields');
     const deactivated = account.getIn(['pleroma', 'deactivated'], false);
@@ -72,7 +72,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             <h1>
               <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
               {verified && <VerificationBadge />}
-              {badge}
+              {account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
               { <small>@{acctFull(account)} {lockedIcon}</small> }
             </h1>
           </div>

app/styles/accounts.scss

@@ -177,23 +177,6 @@
   }
 }
 
-.account-role {
-  display: inline-block;
-  padding: 4px 6px;
-  cursor: default;
-  border-radius: 3px;
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 500;
-  color: var(--primary-text-color);
-  background-color: hsla(var(--primary-text-color_hsl), 0.1);
-  border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
-
-  &.bot {
-    margin-left: 5px;
-  }
-}
-
 .account {
   padding: 10px;
   position: relative;

app/styles/components/badge.scss

@@ -22,4 +22,16 @@
     background-color: #048ba8;
     color: #fff;
   }
+
+  &--bot {
+    margin-left: 5px;
+    color: var(--primary-text-color);
+    background-color: hsla(var(--primary-text-color_hsl), 0.1);
+    border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
+    text-transform: none;
+    padding: 4px 6px;
+    vertical-align: top;
+    display: inline-block;
+    line-height: 12px;
+  }
 }

app/styles/components/profile-info-panel.scss

@@ -40,10 +40,6 @@
     &__name {
       display: block;
 
-      .account-role {
-        vertical-align: top;
-      }
-
       .emojione {
         width: 22px;
         height: 22px;