diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index 2bbf5719..109778b5 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/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') && }
{suffix}
- {account.get('is_pro') && }
);
}
diff --git a/app/javascript/gabsocial/components/donor_badge.js b/app/javascript/gabsocial/components/donor_badge.js
new file mode 100644
index 00000000..d39ca9e0
--- /dev/null
+++ b/app/javascript/gabsocial/components/donor_badge.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DonorBadge = () => (
+ Donor
+);
+
+export default DonorBadge;
diff --git a/app/javascript/gabsocial/components/investor_badge.js b/app/javascript/gabsocial/components/investor_badge.js
new file mode 100644
index 00000000..84c8efba
--- /dev/null
+++ b/app/javascript/gabsocial/components/investor_badge.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const InvestorBadge = () => (
+ Investor
+);
+
+export default InvestorBadge;
diff --git a/app/javascript/gabsocial/components/pro_badge.js b/app/javascript/gabsocial/components/pro_badge.js
new file mode 100644
index 00000000..151492ce
--- /dev/null
+++ b/app/javascript/gabsocial/components/pro_badge.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ProBadge = () => (
+ Pro
+);
+
+export default ProBadge;
diff --git a/app/javascript/gabsocial/features/ui/components/profile_info_panel.js b/app/javascript/gabsocial/features/ui/components/profile_info_panel.js
index d5613a25..e63d3427 100644
--- a/app/javascript/gabsocial/features/ui/components/profile_info_panel.js
+++ b/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 (
@@ -68,12 +71,23 @@ class ProfileInfoPanel extends ImmutablePureComponent {
{account.get('is_verified') && }
- {account.get('is_pro') && }
{badge}
@{acct} {lockedIcon}
+
+ {account.get('is_pro') &&
}
+ {account.get('is_donor') &&
}
+ {account.get('is_investor') &&
}
+
+
+
+
+
+
{
(account.get('note').length > 0 && account.get('note') !== '') &&
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss
index 455f9af5..0bc32ea6 100644
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/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;
+ }
+}
diff --git a/app/serializers/rest/account_serializer.rb b/app/serializers/rest/account_serializer.rb
index b415926c..2b23e33c 100644
--- a/app/serializers/rest/account_serializer.rb
+++ b/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