Progress

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

@@ -31,24 +31,17 @@ class GroupSidebarPanel extends ImmutablePureComponent {
     return (
       <PanelLayout
         title={intl.formatMessage(messages.title)}
-        buttonTitle={intl.formatMessage(messages.all)}
-        buttonTo='/groups/browse/member'
+        headerButtonTitle={intl.formatMessage(messages.all)}
+        headerButtonTo='/groups/browse/member'
+        footerButtonTitle={count > 6 ? intl.formatMessage(messages.show_all) : undefined}
+        footerButtonTo={count > 6 ? '/groups/browse/member' : undefined}
       >
         <div className={_s.default}>
           {
             groupIds.slice(0, 6).map(groupId => (
-              <GroupListItem
-                key={`group-panel-item-${groupId}`}
-                id={groupId}
-              />
+              <GroupListItem key={`group-panel-item-${groupId}`} id={groupId} />
             ))
           }
-          {
-            count > 6 &&
-            <Button to='/groups/browse/member' block text>
-              {intl.formatMessage(messages.show_all)}
-            </Button>
-          }
         </div>
       </PanelLayout>
     )

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

@@ -44,7 +44,12 @@ class HashtagsPanel extends ImmutablePureComponent {
     // }
 
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)} noPadding>
+      <PanelLayout
+        noPadding
+        title={intl.formatMessage(messages.title)}
+        footerButtonTitle={intl.formatMessage(messages.show_all)}
+        footerButtonTo='/explore'
+      >
         <div className={_s.default}>
           { /* hashtags && hashtags.map(hashtag => (
             <HashtagingItem key={hashtag.get('name')} hashtag={hashtag} />
@@ -55,9 +60,6 @@ class HashtagsPanel extends ImmutablePureComponent {
           <HashtagItem />
           <HashtagItem />
         </div>
-        <Button to='/groups/browse/member' block text>
-          {intl.formatMessage(messages.show_all)}
-        </Button>
       </PanelLayout>
     )
   }

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

@@ -40,8 +40,8 @@ class ListDetailsPanel extends ImmutablePureComponent {
     return (
       <PanelLayout
         title={intl.formatMessage(messages.title, { count })}
-        buttonTitle={intl.formatMessage(messages.show_all)}
-        buttonAction={this.handleShowAllLists}
+        headerButtonTitle={intl.formatMessage(messages.show_all)}
+        headerButtonAction={this.handleShowAllLists}
       >
         <div className={_s.default}>
 

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

@@ -1,39 +1,57 @@
 import Heading from '../heading'
 import Button from '../button'
+import Text from '../text'
 
 export default class PanelLayout extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     children: PropTypes.node,
-    buttonTitle: PropTypes.string,
-    buttonAction: PropTypes.func,
-    buttonTo: PropTypes.func,
+    headerButtonTitle: PropTypes.string,
+    headerButtonAction: PropTypes.func,
+    headerButtonTo: PropTypes.func,
+    footerButtonTitle: PropTypes.string,
+    footerButtonAction: PropTypes.func,
+    footerButtonTo: PropTypes.func,
     noPadding: PropTypes.bool,
   }
 
   render() {
-    const { title, subtitle, buttonTitle, buttonAction, buttonTo, noPadding, children } = this.props
+    const {
+      title,
+      subtitle,
+      headerButtonTitle,
+      headerButtonAction,
+      headerButtonTo,
+      footerButtonTitle,
+      footerButtonAction,
+      footerButtonTo,
+      noPadding,
+      children,
+    } = this.props
 
     return (
-      <aside className={[_s.default, _s.backgroundWhite, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.bordercolorSecondary, _s.border1PX].join(' ')}>
+      <aside className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.borderColorSecondary, _s.border1PX].join(' ')}>
         {
           (title || subtitle) &&
-          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.bordercolorSecondary, _s.borderBottom1PX].join(' ')}>
+          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
             <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
               <Heading size='h3'>
                 {title}
               </Heading>
               {
-                (!!buttonTitle && (!!buttonAction || !!buttonTo)) &&
+                (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
                 <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
                   <Button
                     text
-                    to={buttonTo}
-                    onClick={buttonAction}
-                    className={[_s.default, _s.cursorPointer, _s.fontWeightBold, _s.text, _s.colorBrand, _s.fontSize13PX, _s.noUnderline].join(' ')}
+                    backgroundColor='none'
+                    color='brand'
+                    to={headerButtonTo}
+                    onClick={headerButtonAction}
                   >
-                    {buttonTitle}
+                    <Text size='small' color='inherit' weight='bold'>
+                      {headerButtonTitle}
+                    </Text>
                   </Button>
                 </div>
               }
@@ -57,6 +75,24 @@ export default class PanelLayout extends PureComponent {
         {
           noPadding && children
         }
+
+        {
+          (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
+          <div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
+          <Button
+            text
+            color='none'
+            backgroundColor='none'
+            to={footerButtonTo}
+            onClick={footerButtonAction}
+            className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
+          >
+            <Text color='brand' align='left' size='medium'>
+              {footerButtonTitle}
+            </Text>
+          </Button>
+          </div>
+        }
       </aside>
     )
   }

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

@@ -2,11 +2,12 @@ import { injectIntl, defineMessages } from 'react-intl'
 // import { fetchTrends } from '../../actions/trends'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import TrendingItem from '../../components/trending_item'
+import TrendingItem from '../trends_panel_item'
 import PanelLayout from './panel_layout'
 
 const messages = defineMessages({
   title: { id:'trends.title', defaultMessage: 'Trending right now' },
+  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
 })
 
 // const mapStateToProps = state => ({
@@ -43,7 +44,12 @@ class TrendsPanel extends ImmutablePureComponent {
     // }
 
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
+      <PanelLayout
+        noPadding
+        title={intl.formatMessage(messages.title)}
+        footerButtonTitle={intl.formatMessage(messages.show_all)}
+        footerButtonTo='/explore'
+      >
         <div className={_s.default}>
           { /* trends && trends.map(hashtag => (
             <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
@@ -52,7 +58,6 @@ class TrendsPanel extends ImmutablePureComponent {
           <TrendingItem />
           <TrendingItem />
           <TrendingItem />
-          <TrendingItem />
         </div>
       </PanelLayout>
     )

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

@@ -8,6 +8,7 @@ import PanelLayout from './panel_layout';
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
   title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
+  show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
 });
 
 const mapStateToProps = state => ({
@@ -47,7 +48,11 @@ class WhoToFollowPanel extends ImmutablePureComponent {
     // }
 
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        footerButtonTitle={intl.formatMessage(messages.show_more)}
+        footerButtonTo='/explore'
+      >
         <div className={_s.default}>
           {suggestions && suggestions.map(accountId => (
             <AccountContainer