diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js index 2bbf571998c45ddfd77810be1f3ed4a656234ca5..109778b5b853196efcfa7f43cadfb226ca5b40da 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 0000000000000000000000000000000000000000..d39ca9e040897d9f9defd5abb78e8818bcf39ad7 --- /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 0000000000000000000000000000000000000000..84c8efba5102a23923c312f2a007912d571643a4 --- /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 0000000000000000000000000000000000000000..151492ce508d30c11438b8c977af1fae4b7f24dd --- /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 d5613a2534b82a074445b7bc8df15caf7f07a0ee..e63d34276c4da210e76d4328d2dccf4d4745fea1 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 455f9af50c47db5e5a3c925b9664e3d44c89b096..0bc32ea65b632d81dc12a0ac0d2b4e2a1153c740 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 b415926c334853e2663b5a1fb0abcba7c176d9e3..2b23e33cb72a77e80a6044b3daa6862595173dad 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