From fe8eecf925039dc17295cf8b64a617a68084181e Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Mon, 18 Jan 2021 11:55:38 -0700
Subject: [PATCH] Refactor bot badge

---
 .../ui/components/profile_info_panel.js         |  4 ++--
 app/styles/accounts.scss                        | 17 -----------------
 app/styles/components/badge.scss                | 12 ++++++++++++
 app/styles/components/profile-info-panel.scss   |  4 ----
 4 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index 735a4145d..7d2da3c99 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/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>
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index d391fa460..2e59d622f 100644
--- a/app/styles/accounts.scss
+++ b/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;
diff --git a/app/styles/components/badge.scss b/app/styles/components/badge.scss
index 61a06c971..6866484f9 100644
--- a/app/styles/components/badge.scss
+++ b/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;
+  }
 }
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 7e08cfbe8..999123e58 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -40,10 +40,6 @@
     &__name {
       display: block;
 
-      .account-role {
-        vertical-align: top;
-      }
-
       .emojione {
         width: 22px;
         height: 22px;