Progress

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

@@ -33,7 +33,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
           !!group &&
           <Fragment>
 
-            <Heading size='h3'>
+            <Heading size='h2'>
               {group.get('title')}
             </Heading>
 
@@ -51,7 +51,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
                 to={`/groups/${group.get('id')}/members`}
                 color='brand'
                 backgroundColor='none'
-                className={_s.marginLeftAuto}
+                className={_s.mlAuto}
               >
                 <Text color='inherit' weight='medium' size='normal' className={_s.underline_onHover}>
                   {shortNumberFormat(group.get('member_count'))}

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

@@ -4,7 +4,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import PanelLayout from './panel_layout'
 import HashtagItem from '../hashtag_item'
-import Button from '../button'
 
 const messages = defineMessages({
   title: { id: 'hashtags.title', defaultMessage: 'Popular Hashtags' },
@@ -30,6 +29,10 @@ class HashtagsPanel extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   }
 
+  updateOnProps = [
+    'hashtags',
+  ]
+
   componentDidMount() {
     this.props.fetchHashtags()
   }
@@ -37,27 +40,23 @@ class HashtagsPanel extends ImmutablePureComponent {
   render() {
     const { intl, hashtags } = this.props
 
-    // !!! TESTING !!!
-    // if (hashtags.isEmpty()) {
-    //   return null
-    // }
+    if (hashtags.isEmpty()) {
+      return null
+    }
 
     return (
       <PanelLayout
         noPadding
         title={intl.formatMessage(messages.title)}
         footerButtonTitle={intl.formatMessage(messages.show_all)}
-        footerButtonTo='/explore'
+        footerButtonTo='/search'
       >
         <div className={_s.default}>
-          { /* hashtags && hashtags.map(hashtag => (
-            <HashtagingItem key={hashtag.get('name')} hashtag={hashtag} />
-          )) */ }
-          <HashtagItem />
-          <HashtagItem />
-          <HashtagItem />
-          <HashtagItem />
-          <HashtagItem />
+          {
+            hashtags.map(hashtag => (
+              <HashtagItem key={hashtag.get('name')} hashtag={hashtag} />
+            ))
+          }
         </div>
       </PanelLayout>
     )

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

@@ -58,9 +58,8 @@ class ListsPanel extends ImmutablePureComponent {
         footerButtonTo={count > maxCount ? '/lists' : undefined}
         noPadding
       >
-        <div className={_s.default}>
+        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
           <List
-            unrounded
             scrollKey='lists_sidebar_panel'
             items={listItems}
           />

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

@@ -36,14 +36,14 @@ export default class PanelLayout extends PureComponent {
         <Block>
           {
             (title || subtitle) &&
-            <div className={[_s.default, _s.px15, _s.py10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
               <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-                <Heading size='h3'>
+                <Heading size='h2'>
                   {title}
                 </Heading>
                 {
                   (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
-                  <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+                  <div className={[_s.default, _s.mlAuto].join(' ')}>
                     <Button
                       isText
                       backgroundColor='none'
@@ -80,7 +80,7 @@ export default class PanelLayout extends PureComponent {
 
           {
             (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
-            <div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
+            <div className={_s.default}>
               <Button
                 isText
                 color='none'

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

@@ -54,6 +54,10 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const content = { __html: account.get('note_emojified') }
     const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' })
     const hasNote = !!content ? (account.get('note').length > 0 && account.get('note') !== '<p></p>') : false
+    const isPro = account.get('is_pro')
+    const isDonor = account.get('is_donor')
+    const isInvestor = account.get('is_investor')
+    const hasBadges = isPro || isDonor || isInvestor
 
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
@@ -80,6 +84,18 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               }
             </Text>
           </div>
+            
+          {
+            hasBadges &&
+            <Fragment>
+              <Divider isSmall />
+              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+                { isPro && <Icon id='pro' size='16px' className={_s.mr5} /> }
+                { isInvestor && <Icon id='investor' size='16px' className={_s.mr5} /> }
+                { isDonor && <Icon id='donor' size='16px' /> }
+              </div>
+            </Fragment>
+          }
 
           {(fields.size > 0 || identityProofs.size > 0) && (
             <div className={[_s.default]}>
@@ -121,7 +137,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
                         title={pair.get('name')}
                       />
                       <dd
-                        className={[_s.dangerousContent, _s.marginLeftAuto].join(' ')}
+                        className={[_s.dangerousContent, _s.mlAuto].join(' ')}
                         title={pair.get('value_plain')}
                         dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
                       />

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

@@ -106,11 +106,11 @@ class UserPanel extends ImmutablePureComponent {
           className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
           to={`/${acct}`}
         >
-          <div className={[_s.default, _s.mtNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
-            <Avatar account={account} size={62} />
+          <div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorWhite, _s.border6PX].join(' ')}>
+            <Avatar account={account} size={62} noHover />
           </div>
           <div className={[_s.default, _s.ml15].join(' ')}>
-            <DisplayName account={account} multiline />
+            <DisplayName account={account} isMultiline noRelationship noHover />
           </div>
         </NavLink>