Added user badges and "member since"

added ProBadge, InvestorBadge, DonorBadge components, css
removed "PRO" from appending in display_name
fixes: #50

app/javascript/gabsocial/components/display_name.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import DisplayNameBadge from './display_name_badge';
 import VerificationBadge from './verification_badge';
 
 export default class DisplayName extends React.PureComponent {
@@ -39,7 +38,6 @@ export default class DisplayName extends React.PureComponent {
         {displayName}
         {account.get('is_verified') && <VerificationBadge />}
         {suffix}
-        {account.get('is_pro') && <DisplayNameBadge label="PRO" />}
       </span>
     );
   }

app/javascript/gabsocial/components/donor_badge.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DonorBadge = () => (
+  <span className='badge badge--donor'>Donor</span>
+);
+
+export default DonorBadge;

app/javascript/gabsocial/components/investor_badge.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const InvestorBadge = () => (
+  <span className='badge badge--investor'>Investor</span>
+);
+
+export default InvestorBadge;

app/javascript/gabsocial/components/pro_badge.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ProBadge = () => (
+  <span className='badge badge--pro'>Pro</span>
+);
+
+export default ProBadge;

app/javascript/gabsocial/features/ui/components/profile_info_panel.js

@@ -8,8 +8,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from 'gabsocial/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'gabsocial/components/icon';
-import DisplayNameBadge from 'gabsocial/components/display_name_badge';
 import VerificationBadge from 'gabsocial/components/verification_badge';
+import ProBadge from 'gabsocial/components/pro_badge';
+import DonorBadge from 'gabsocial/components/donor_badge';
+import InvestorBadge from 'gabsocial/components/investor_badge';
 import { List as ImmutableList } from 'immutable';
 
 const messages = defineMessages({
@@ -59,6 +61,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const fields = account.get('fields');
     const acct = account.get('acct');
     const displayNameHtml = { __html: account.get('display_name_html') };
+    const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
 
     return (
       <div className='profile-info-panel'>
@@ -68,12 +71,23 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             <h1>
               <span dangerouslySetInnerHTML={displayNameHtml} />
                 {account.get('is_verified') && <VerificationBadge />}
-                {account.get('is_pro') && <DisplayNameBadge label="PRO" />}
                 {badge}
               <small>@{acct} {lockedIcon}</small>
             </h1>
           </div>
 
+          <div className='profile-info-panel-content__badges'>
+            {account.get('is_pro') && <ProBadge />}
+            {account.get('is_donor') && <DonorBadge />}
+            {account.get('is_investor') && <InvestorBadge />}
+            <div className='profile-info-panel-content__badges__join-date'>
+              <Icon id="calendar"/>
+              <FormattedMessage id='account.member_since' defaultMessage='Member since {date}' values={{
+                date: memberSinceDate
+              }} />
+            </div>
+          </div>
+
           {
             (account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
             <div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />

app/javascript/styles/gabsocial/components.scss

@@ -4942,6 +4942,29 @@ noscript {
 	.profile-info-panel-content {
 		display: flex;
 
+		&__badges {
+			display: flex;
+	    margin: 5px 0;
+	    flex-direction: row;
+			flex-wrap: wrap;
+
+			&__join-date {
+				display: block;
+				margin-top: 5px;
+
+				.fa {
+					margin-right: 8px;
+				}
+
+				span {
+					color: $primary-text-color;
+					body.theme-gabsocial-light & {color: $gab-default-text-light;}
+					font-size: 15px;
+					line-height: 1.25;
+				}
+			}
+		}
+
 		&__name {
 			display: block;
 
@@ -5181,3 +5204,26 @@ noscript {
 		}
 	}
 }
+
+.badge {
+	font-size: 12px;
+	text-transform: uppercase;
+	padding: 2px 6px;
+	border-radius: 2px;
+	margin: 0 5px 5px 0;
+
+	&--pro {
+		background-color: blueviolet;
+		color: #fff;
+	}
+
+	&--investor {
+		background-color: gold;
+		color: #000;
+	}
+
+	&--donor {
+		background-color: lightgreen;
+    color: #000;
+	}
+}

app/serializers/rest/account_serializer.rb

@@ -5,7 +5,7 @@ class REST::AccountSerializer < ActiveModel::Serializer
 
   attributes :id, :username, :acct, :display_name, :locked, :bot, :created_at,
              :note, :url, :avatar, :avatar_static, :header, :header_static,
-             :followers_count, :following_count, :statuses_count, :is_pro, :is_verified
+             :followers_count, :following_count, :statuses_count, :is_pro, :is_verified, :is_donor, :is_investor
 
   has_one :moved_to_account, key: :moved, serializer: REST::AccountSerializer, if: :moved_and_not_nested?
   has_many :emojis, serializer: REST::CustomEmojiSerializer