Progress

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -61,7 +61,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
 
             <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
               <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-                <Icon id='group' size='14px' />
+                <Icon id='group' size='14px' className={_s.fillPrimary} />
                 <Text size='small' className={_s.ml5}>
                   {intl.formatMessage(messages.members)}
                 </Text>

app/javascript/gabsocial/components/panel/pro_panel.js

@@ -0,0 +1,51 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { URL_GAB_PRO } from '../../constants'
+import PanelLayout from './panel_layout';
+import Button from '../button'
+import Text from '../text'
+
+const messages = defineMessages({
+  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  text: { id: 'pro_upgrade_modal.text_sm', defaultMessage: 'Please consider supporting us on our mission to defend free expression online for all people.' },
+})
+
+export default
+@injectIntl
+class ProPanel extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    isPro: PropTypes.bool.isRequired,
+  }
+
+  render() {
+    const { intl, isPro } = this.props
+
+    // if (isPro) return null
+
+    return (
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        subtitle={intl.formatMessage(messages.text)}
+      >
+        <Button
+          isBlock
+          href={URL_GAB_PRO}
+          icon='arrow-up'
+          className={[_s.justifyContentCenter].join(' ')}
+        >
+          <Text
+            color='inherit'
+            weight='medium'
+            size='medium'
+            align='center'
+            className={_s.ml5}
+          >
+            {intl.formatMessage(messages.title)}
+          </Text>
+        </Button>
+      </PanelLayout>
+    )
+  }
+
+}

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -93,19 +93,19 @@ class ProfileInfoPanel extends ImmutablePureComponent {
                 { 
                   isPro &&
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
-                    <Text weight='bold' size='small' color='white' isBadge>PRO</Text>
+                    <Text weight='bold' size='small' className={_s.colorBGPrimary} isBadge>PRO</Text>
                   </div>
                 }
                 {
                   isInvestor && 
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgInvestor, _s.py2, _s.px5].join(' ')}>
-                    <Text weight='bold' size='small' color='white' isBadge>INVESTOR</Text>
+                    <Text weight='bold' size='small' className={_s.colorBGPrimary} isBadge>INVESTOR</Text>
                   </div>
                 }
                 {
                   isDonor &&
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgDonor, _s.py2, _s.px5].join(' ')}>
-                    <Text weight='bold' size='small' color='white' isBadge>DONOR</Text>
+                    <Text weight='bold' size='small' className={_s.colorBGPrimary} isBadge>DONOR</Text>
                   </div>
                 }
               </div>