Progress

2020-02-22 18:26:23 -05:00
parent bebc39f150
commit d255982ec5
39 changed files with 1054 additions and 885 deletions
--- a/app/javascript/gabsocial/components/block.js
+++ b/app/javascript/gabsocial/components/block.js
@@ -0,0 +1,11 @@
+export default class Block extends PureComponent {
+  render() {
+    const { children } = this.props
+
+    return (
+      <div className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.borderColorSecondary, _s.border1PX].join(' ')}>
+        {children}
+      </div>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
+++ b/app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
@@ -1,6 +1,5 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import Column from '../column';
-import { ColumnHeader } from '../column_header';
 import IconButton from '../icon_button';

 const messages = defineMessages({
@@ -26,7 +25,6 @@ class BundleColumnError extends PureComponent {

    return (
      <Column>
-        <ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
        <div className='error-column'>
          <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
          {formatMessage(messages.body)}
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -35,6 +35,7 @@ export default class Button extends PureComponent {
    outline: PropTypes.bool,
    narrow: PropTypes.bool,
    underlineOnHover: PropTypes.bool,
+    radiusSmall: PropTypes.bool,
  }

  static defaultProps = {
@@ -56,7 +57,7 @@ export default class Button extends PureComponent {
    this.node.focus()
  }

-  render () {
+  render() {
    const {
      block,
      className,
@@ -74,6 +75,7 @@ export default class Button extends PureComponent {
      backgroundColor,
      underlineOnHover,
      narrow,
+      radiusSmall,
      ...otherProps
    } = this.props

@@ -90,6 +92,7 @@ export default class Button extends PureComponent {
      backgroundColorPrimary: backgroundColor === COLORS.white,
      backgroundColorBrand: backgroundColor === COLORS.brand,
      backgroundTransparent: backgroundColor === COLORS.none,
+      backgroundSubtle2: backgroundColor === COLORS.tertiary,

      colorPrimary: color === COLORS.primary,
      colorSecondary: color === COLORS.secondary,
@@ -100,6 +103,7 @@ export default class Button extends PureComponent {
      border1PX: outline,

      circle: !text,
+      radiusSmall: radiusSmall,

      paddingVertical5PX: narrow,
      paddingVertical10PX: !text && !narrow,
@@ -109,6 +113,8 @@ export default class Button extends PureComponent {

      underline_onHover: underlineOnHover,

+      backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary,
+
      backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,

      backgroundColorBrand_onHover: color === COLORS.brand && outline,
@@ -124,19 +130,25 @@ export default class Button extends PureComponent {
      </Fragment>
    ) : children

-    return React.createElement(
-      tagName,
-      {
-        className: classes,
-        ref: this.setRef,
-        disabled: disabled,
-        to: to || undefined,
-        to: href || undefined,
-        onClick: this.handleClick || undefined,
-        ...otherProps
-      },
-      theChildren,
-    )
+    const options = {
+      className: classes,
+      ref: this.setRef,
+      disabled: disabled,
+      to: to || undefined,
+      href: href || undefined,
+      onClick: this.handleClick || undefined,
+    }
+
+    if (tagName === 'NavLink' && !!to) {
+      console.log("to: ", to)
+      return (
+        <NavLink {...options}>
+          {theChildren}
+        </NavLink>
+      )
+    }
+
+    return React.createElement(tagName, options, theChildren)
  }

 }
--- a/app/javascript/gabsocial/components/column/column.js
+++ b/app/javascript/gabsocial/components/column/column.js
@@ -1,5 +1,4 @@
 import { isMobile } from '../../utils/is_mobile';
-import { ColumnHeader } from '../column_header';

 export default class Column extends PureComponent {

@@ -20,9 +19,6 @@ export default class Column extends PureComponent {

    const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
    const columnHeaderId = showHeading && heading.replace(/ /g, '-');
-    const header = showHeading && (
-      <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
-    );

    return (
      <div role='region' aria-labelledby={columnHeaderId} className={[_s.default].join(' ')}>
--- a/app/javascript/gabsocial/components/column_header.js
+++ b/app/javascript/gabsocial/components/column_header.js
@@ -1,4 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl'
+import TabBar from './tab_bar'
 import Icon from './icon'
 import Button from './button'
 import Heading from './heading'
@@ -23,6 +24,7 @@ class ColumnHeader extends PureComponent {
    children: PropTypes.node,
    showBackBtn: PropTypes.bool,
    actions: PropTypes.array,
+    tabs: PropTypes.array,
  }

  state = {
@@ -49,7 +51,7 @@ class ColumnHeader extends PureComponent {
  }

  render() {
-    const { title, showBackBtn, icon, active, children, actions, intl: { formatMessage } } = this.props
+    const { title, showBackBtn, tabs, icon, active, children, actions, intl: { formatMessage } } = this.props
    const { collapsed } = this.state

    return (
@@ -61,12 +63,17 @@ class ColumnHeader extends PureComponent {
          </button>
        }

-        <div className={[_s.default, _s.height100PC, _s.justifyContentCenter].join(' ')}>
+        <div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.marginRight10PX].join(' ')}>
          <Heading size='h1'>
            {title}
          </Heading>
        </div>

+        {
+          !!tabs &&
+          <TabBar tabs={tabs} />
+        }
+
        {
          !!actions &&
          <div className={[_s.default, _s.backgroundTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.marginLeftAuto].join(' ')}>
--- a/app/javascript/gabsocial/components/group_collection_item.js
+++ b/app/javascript/gabsocial/components/group_collection_item.js
@@ -0,0 +1,123 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
+import { shortNumberFormat } from '../utils/numbers'
+import Image from './image'
+import Text from './text'
+import Button from './button'
+import DotTextSeperator from './dot_text_seperator'
+
+const messages = defineMessages({
+  members: { id: 'groups.card.members', defaultMessage: 'Members' },
+  new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
+  no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
+})
+
+const mapStateToProps = (state, { id }) => ({
+  group: state.getIn(['groups', id]),
+  relationships: state.getIn(['group_relationships', id]),
+})
+
+const cx = classNames.bind(_s)
+
+export default
+@connect(mapStateToProps)
+@injectIntl
+class GroupCollectionItem extends ImmutablePureComponent {
+  static propTypes = {
+    group: ImmutablePropTypes.map,
+    relationships: ImmutablePropTypes.map,
+  }
+
+  render() {
+    const { intl, group, relationships } = this.props
+
+    if (!relationships) return null
+
+    const unreadCount = relationships.get('unread_count')
+
+    const subtitle = unreadCount > 0 ? (
+      <Fragment>
+        {shortNumberFormat(unreadCount)}
+        &nbsp;
+        {intl.formatMessage(messages.new_statuses)}
+      </Fragment>
+    ) : intl.formatMessage(messages.no_recent_activity)
+
+    const imageHeight = '200px'
+
+    // : todo :
+    const isMember = false
+
+    const outsideClasses = cx({
+      default: 1,
+      width50PC: 1,
+    })
+
+    const navLinkClasses = cx({
+      default: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      borderColorSecondary: 1,
+      radiusSmall: 1,
+      border1PX: 1,
+      marginBottom10PX: 1,
+      marginLeft5PX: 1,
+      marginRight5PX: 1,
+      backgroundColorPrimary: 1,
+      backgroundSubtle_onHover: isMember,
+    })
+
+    return (
+      <div className={outsideClasses}>
+        <NavLink
+          to={`/groups/${group.get('id')}`}
+          className={navLinkClasses}
+        >
+          <Image
+            src={group.get('cover')}
+            alt={group.get('title')}
+            height={imageHeight}
+          />
+
+          <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical10PX].join(' ')}>
+            <Text color='primary' size='medium' weight='bold'>
+              {group.get('title')}
+            </Text>
+
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.marginTop5PX].join(' ')}>
+              <Text color='secondary' size='small'>
+                {shortNumberFormat(group.get('member_count'))}
+                &nbsp;
+              {intl.formatMessage(messages.members)}
+              </Text>
+              <DotTextSeperator />
+              <Text color='secondary' size='small' className={_s.marginLeft5PX}>
+                {subtitle}
+              </Text>
+            </div>
+          </div>
+
+          {
+            !isMember &&
+            <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX].join(' ')}>
+              <Button
+                color='primary'
+                backgroundColor='tertiary'
+                radiusSmall
+              >
+                <Text color='inherit' weight='bold'>
+                  Join
+                </Text>
+              </Button>
+            </div>
+          }
+
+        </NavLink>
+      </div>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/group_list_item.js
+++ b/app/javascript/gabsocial/components/group_list_item.js
@@ -3,11 +3,13 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
 import { shortNumberFormat } from '../utils/numbers'
 import Image from './image'
 import Text from './text'

 const messages = defineMessages({
+  members: { id: 'groups.card.members', defaultMessage: 'Members' },
  new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
  no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
 })
@@ -17,6 +19,8 @@ const mapStateToProps = (state, { id }) => ({
  relationships: state.getIn(['group_relationships', id]),
 })

+const cx = classNames.bind(_s)
+
 export default
@connect(mapStateToProps)
@injectIntl
@@ -24,23 +28,17 @@ class GroupListItem extends ImmutablePureComponent {
  static propTypes = {
    group: ImmutablePropTypes.map,
    relationships: ImmutablePropTypes.map,
+    slim: PropTypes.bool,
+    isLast: PropTypes.bool,
  }

-  state = {
-    hovering: false,
-  }
-
-  handleOnMouseEnter = () => {
-    this.setState({ hovering: true })
-  }
-
-  handleOnMouseLeave = () => {
-    this.setState({ hovering: false })
+  static defaultProps = {
+    slim: false,
+    isLast: false,
  }

  render() {
-    const { intl, group, relationships } = this.props
-    const { hovering } = this.state
+    const { intl, group, relationships, slim, isLast } = this.props

    if (!relationships) return null

@@ -54,25 +52,65 @@ class GroupListItem extends ImmutablePureComponent {
      </Fragment>
    ) : intl.formatMessage(messages.no_recent_activity)

+    const containerClasses = cx({
+      default: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      backgroundSubtle_onHover: 1,
+      borderColorSecondary: 1,
+      radiusSmall: !slim,
+      marginTop5PX: !slim,
+      marginBottom10PX: !slim,
+      border1PX: !slim,
+      borderBottom1PX: slim && !isLast,
+      flexRow: slim,
+      paddingVertical5PX: slim,
+    })
+
+    const imageClasses = cx({
+      height122PX: !slim,
+      radiusSmall: slim,
+      height72PX: slim,
+      width72PX: slim,
+      marginLeft15PX: slim,
+    })
+
+    const textContainerClasses = cx({
+      default: 1,
+      paddingHorizontal10PX: 1,
+      marginTop5PX: 1,
+      marginBottom10PX: !slim,
+    })
+
    return (
      <NavLink
        to={`/groups/${group.get('id')}`}
-        className={[_s.default, _s.noUnderline, _s.marginTop5PX, _s.overflowHidden, _s.radiusSmall, _s.marginBottom10PX, _s.border1PX, _s.borderColorSecondary, _s.backgroundSubtle_onHover].join(' ')}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
+        className={containerClasses}
      >
        <Image
          src={group.get('cover')}
          alt={group.get('title')}
-          className={_s.height122PX}
+          className={imageClasses}
        />
-        <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical5PX].join(' ')}>
-          <Text color='brand' weight='bold' underline={hovering}>
+
+        <div className={textContainerClasses}>
+          <Text color='brand' weight='bold'>
            {group.get('title')}
          </Text>
-          <Text color='secondary' size='small' className={_s.marginVertical5PX}>
+
+          {
+            slim &&
+            <Text color='secondary' size='small' className={_s.marginTop5PX}>
+              {shortNumberFormat(group.get('member_count'))}
+              &nbsp;
+              {intl.formatMessage(messages.members)}
+            </Text>
+          }
+
+          <Text color='secondary' size='small' className={_s.marginTop5PX}>
            {subtitle}
          </Text>
+
        </div>
      </NavLink>
    )
--- a/app/javascript/gabsocial/components/layouts/default_layout.js
+++ b/app/javascript/gabsocial/components/layouts/default_layout.js
@@ -6,13 +6,17 @@ import Sidebar from '../sidebar'
 export default class DefaultLayout extends PureComponent {
  static propTypes = {
    actions: PropTypes.array,
+    tabs: PropTypes.array,
    layout: PropTypes.object,
    title: PropTypes.string,
    showBackBtn: PropTypes.bool,
  }

  render() {
-    const { children, title, showBackBtn, layout, actions } = this.props
+    const { children, title, showBackBtn, layout, actions, tabs } = this.props
+
+    // const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
+    // const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;

    return (
      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
@@ -24,7 +28,12 @@ export default class DefaultLayout extends PureComponent {
          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
            <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
              <div className={[_s.default, _s.width645PX].join(' ')}>
-                <ColumnHeader title={title} showBackBtn={showBackBtn} actions={actions} />
+                <ColumnHeader
+                  title={title}
+                  showBackBtn={showBackBtn}
+                  actions={actions}
+                  tabs={tabs}
+                />
              </div>
              <div className={[_s.default, _s.width340PX].join(' ')}>
                <Search />
--- a/app/javascript/gabsocial/components/layouts/profile_layout.js
+++ b/app/javascript/gabsocial/components/layouts/profile_layout.js
@@ -1,4 +1,3 @@
-import ColumnHeader from '../column_header'
 import Sidebar from '../sidebar'

 export default class ProfileLayout extends PureComponent {
--- a/app/javascript/gabsocial/components/layouts/search_layout.js
+++ b/app/javascript/gabsocial/components/layouts/search_layout.js
@@ -0,0 +1,68 @@
+import Sticky from 'react-stickynode'
+import Search from '../search'
+import ColumnHeader from '../column_header'
+import Sidebar from '../sidebar'
+
+export default class SearchLayout extends PureComponent {
+  static propTypes = {
+    actions: PropTypes.array,
+    tabs: PropTypes.array,
+    layout: PropTypes.object,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+  }
+
+  render() {
+    const { children, title, showBackBtn, layout, actions, tabs } = this.props
+
+    // const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
+    // const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
+
+    return (
+      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
+
+        <Sidebar />
+
+        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+              <div className={[_s.default, _s.width645PX].join(' ')}>
+                <ColumnHeader
+                  title={title}
+                  showBackBtn={showBackBtn}
+                  actions={actions}
+                  tabs={tabs}
+                />
+              </div>
+              <div className={[_s.default, _s.width340PX].join(' ')}>
+                <Search />
+              </div>
+            </div>
+          </div>
+
+          <div className={[_s.default, _s.height53PX].join(' ')}></div>
+
+          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
+            <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+              <div className={_s.default}>
+                {children}
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.width340PX].join(' ')}>
+              <Sticky top={73} enabled>
+                <div className={[_s.default, _s.width340PX].join(' ')}>
+                  {layout}
+                </div>
+              </Sticky>
+            </div>
+          </div>
+
+        </main>
+
+      </div>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/list.js
+++ b/app/javascript/gabsocial/components/list.js
@@ -1,3 +1,4 @@
+import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'

@@ -13,7 +14,7 @@ export default class List extends PureComponent {
    const { items, scrollKey, emptyMessage } = this.props

    return (
-      <div className={[_s.default, _s.backgroundColorPrimary, _s.radiusSmall, _s.overflowHidden, _s.border1PX, _s.borderColorSecondary].join(' ')}>
+      <Block>
        <ScrollableList
          scrollKey={scrollKey}
          emptyMessage={emptyMessage}
@@ -31,7 +32,7 @@ export default class List extends PureComponent {
            })
          }
        </ScrollableList>
-      </div>
+      </Block>
    )
  }

--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -20,26 +20,35 @@ export default @connect(mapStateToProps)
 class GroupSidebarPanel extends ImmutablePureComponent {
  static propTypes = {
    groupIds: ImmutablePropTypes.list,
+    slim: PropTypes.bool,
  }

  render() {
-    const { intl, groupIds } = this.props
+    const { intl, groupIds, slim } = this.props
    const count = groupIds.count()

    if (count === 0) return null

+    const maxCount = slim ? 12 : 6
+
    return (
      <PanelLayout
        title={intl.formatMessage(messages.title)}
        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}
+        footerButtonTitle={count > maxCount ? intl.formatMessage(messages.show_all) : undefined}
+        footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined}
+        noPadding={slim}
      >
        <div className={_s.default}>
          {
-            groupIds.slice(0, 6).map(groupId => (
-              <GroupListItem key={`group-panel-item-${groupId}`} id={groupId} />
+            groupIds.slice(0, maxCount).map((groupId, i) => (
+              <GroupListItem
+                key={`group-panel-item-${groupId}`}
+                id={groupId}
+                slim={slim}
+                isLast={groupIds.length - 1 === i}
+              />
            ))
          }
        </div>
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -1,3 +1,4 @@
+import Block from '../block'
 import Heading from '../heading'
 import Button from '../button'
 import Text from '../text'
@@ -31,68 +32,70 @@ export default class PanelLayout extends PureComponent {
    } = this.props

    return (
-      <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.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Heading size='h3'>
-                {title}
-              </Heading>
+      <aside className={[_s.default, _s.marginBottom15PX].join(' ')}>
+        <Block>
+          {
+            (title || subtitle) &&
+            <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>
+                {
+                  (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
+                  <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+                    <Button
+                      text
+                      backgroundColor='none'
+                      color='brand'
+                      to={headerButtonTo}
+                      onClick={headerButtonAction}
+                    >
+                      <Text size='small' color='inherit' weight='bold'>
+                        {headerButtonTitle}
+                      </Text>
+                    </Button>
+                  </div>
+                }
+              </div>
              {
-                (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
-                <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
-                  <Button
-                    text
-                    backgroundColor='none'
-                    color='brand'
-                    to={headerButtonTo}
-                    onClick={headerButtonAction}
-                  >
-                    <Text size='small' color='inherit' weight='bold'>
-                      {headerButtonTitle}
-                    </Text>
-                  </Button>
-                </div>
+                subtitle &&
+                <Heading size='h4'>
+                  {subtitle}
+                </Heading>
              }
            </div>
-            {
-              subtitle &&
-              <Heading size='h4'>
-                {subtitle}
-              </Heading>
-            }
-          </div>
-        }
+          }

-        {
-          !noPadding &&
-          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
-            {children}
-          </div>
-        }
+          {
+            !noPadding &&
+            <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+              {children}
+            </div>
+          }

-        {
-          noPadding && children
-        }
+          {
+            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>
-        }
+          {
+            (!!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>
+          }
+        </Block>
      </aside>
    )
  }
--- a/app/javascript/gabsocial/components/popover/popover_layout.js
+++ b/app/javascript/gabsocial/components/popover/popover_layout.js
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -6,9 +6,9 @@ import Button from './button'
 import { closeSidebar } from '../actions/sidebar'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
-import GabLogo from './assets/gab_logo'
 import SidebarSectionTitle from './sidebar_section_title'
 import SidebarSectionItem from './sidebar_section_item'
+import SidebarHeader from './sidebar_header'

 const messages = defineMessages({
  followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -103,6 +103,11 @@ class Sidebar extends ImmutablePureComponent {
        to: '/',
        count: 124,
      },
+      {
+        title: 'Search',
+        icon: 'search-sidebar',
+        to: '/search',
+      },
      {
        title: 'Notifications',
        icon: 'notifications',
@@ -131,6 +136,11 @@ class Sidebar extends ImmutablePureComponent {
      },
    ]

+    // more:
+    // settings/preferences
+    // help
+    // logout
+
    const shortcutItems = [
      {
        title: 'Meme Group',
@@ -175,17 +185,7 @@ class Sidebar extends ImmutablePureComponent {
          <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
            <div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>

-              <h1 className={[_s.default].join(' ')}>
-                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
-                  <GabLogo />
-                </NavLink>
-              </h1>
-
-              <SidebarSectionItem
-                image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139'
-                title='@admin'
-                to='/profile'
-              />
+              <SidebarHeader />

              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
                <SidebarSectionTitle>Menu</SidebarSectionTitle>
--- a/app/javascript/gabsocial/components/sidebar_header.js
+++ b/app/javascript/gabsocial/components/sidebar_header.js
@@ -1,343 +1,47 @@
+import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { injectIntl, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
-import Button from './button'
-import { closeSidebar } from '../actions/sidebar'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
-// import ProgressPanel from './progress_panel'
 import GabLogo from './assets/gab_logo'
-import Icon from './icon'
-
-const messages = defineMessages({
-  followers: { id: 'account.followers', defaultMessage: 'Followers' },
-  follows: { id: 'account.follows', defaultMessage: 'Follows' },
-  profile: { id: 'account.profile', defaultMessage: 'Profile' },
-  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
-  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
-  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
-  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
-  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
-  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
-  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
-  lists: { id: 'column.lists', defaultMessage: 'Lists', },
-  apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
-  more: { id: 'sidebar.more', defaultMessage: 'More' },
-  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-  trends: { id: 'promo.trends', defaultMessage: 'Trends' },
-  search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
-  shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
-  donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
-})
+import SidebarSectionItem from './sidebar_section_item'

 const mapStateToProps = state => {
  const getAccount = makeGetAccount()

  return {
    account: getAccount(state, me),
-    sidebarOpen: state.get('sidebar').sidebarOpen,
  }
 }

-const mapDispatchToProps = (dispatch) => ({
-  onClose() {
-    dispatch(closeSidebar())
-  },
-})
-
-const cx = classNames.bind(_s)
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class Sidebar extends ImmutablePureComponent {
+export default @connect(mapStateToProps)
+class SidebarHeader extends ImmutablePureComponent {

  static propTypes = {
-    intl: PropTypes.object.isRequired,
    account: ImmutablePropTypes.map,
-    sidebarOpen: PropTypes.bool,
-    onClose: PropTypes.func.isRequired,
-  }
-
-  state = {
-    moreOpen: false,
-    hoveringItemIndex: null,
-  }
-
-  componentDidUpdate() {
-    if (!me) return
-
-    if (this.props.sidebarOpen) {
-      document.body.classList.add('with-modals--active')
-    } else {
-      document.body.classList.remove('with-modals--active')
-    }
-  }
-
-  toggleMore = () => {
-    this.setState({
-      moreOpen: !this.state.moreOpen
-    })
-  }
-
-  handleSidebarClose = () => {
-    this.props.onClose()
-    this.setState({
-      moreOpen: false,
-    })
  }

  render() {
-    const { sidebarOpen, intl, account } = this.props
-    const { moreOpen, hoveringItemIndex } = this.state
-
-    if (!me || !account) return null
-
-    const acct = account.get('acct')
-    const isPro = account.get('is_pro')
-
-    // const classes = classNames('sidebar-menu__root', {
-    //   'sidebar-menu__root--visible': sidebarOpen,
-    // })
-
-    const moreIcon = moreOpen ? 'minus' : 'plus'
-    const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
-
-    const menuItems = [
-      {
-        title: 'Home',
-        icon: 'home',
-        to: '/',
-        count: 124,
-      },
-      {
-        title: 'Notifications',
-        icon: 'notifications',
-        to: '/notifications',
-        count: 40,
-      },
-      {
-        title: 'Groups',
-        icon: 'group',
-        to: '/groups',
-      },
-      {
-        title: 'Lists',
-        icon: 'list',
-        to: '/lists',
-      },
-      {
-        title: 'Chat',
-        icon: 'chat',
-        to: '/',
-      },
-      {
-        title: 'More',
-        icon: 'more',
-        to: '/',
-      },
-    ]
-
-    const shortcutItems = [
-      {
-        title: 'Meme Group',
-        icon: 'group',
-        to: '/',
-        count: 0,
-      },
-      {
-        title: '@andrew',
-        image: 'http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139',
-        to: '/',
-        count: 3,
-      },
-    ]
-
-    const exploreItems = [
-      {
-        title: 'Apps',
-        icon: 'apps',
-        to: '/',
-      },
-      {
-        title: 'Shop',
-        icon: 'shop',
-        to: '/',
-      },
-      {
-        title: 'Trends',
-        icon: 'trends',
-        to: '/',
-      },
-      {
-        title: 'Dissenter',
-        icon: 'dissenter',
-        to: '/',
-      },
-    ]
-
-    const titleClasses = cx({
-      default: 1,
-      text: 1,
-      colorSecondary: 1,
-      displayBlock: 1,
-      fontSize13PX: 1,
-      paddingVertical5PX: 1,
-      marginTop10PX: 1,
-      paddingHorizontal10PX: 1,
-      fontWeightBold: 1,
-    })
+    const { account } = this.props

    return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
-        <div className={[_s.default, _s.width240PX].join(' ')}>
-          <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
-              <h1 className={[_s.default].join(' ')}>
-                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
-                  <GabLogo />
-                </NavLink>
-              </h1>
-              <div>
-                <HeaderMenuItem me image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139' title='@admin' to='/profile' />
-              </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
-                <span className={titleClasses}>Menu</span>
-                {
-                  menuItems.map((menuItem, i) => (
-                    <HeaderMenuItem {...menuItem} key={`header-item-menu-${i}`} />
-                  ))
-                }
-                <span className={titleClasses}>Shortcuts</span>
-                {
-                  shortcutItems.map((shortcutItem, i) => (
-                    <HeaderMenuItem {...shortcutItem} key={`header-item-shortcut-${i}`} />
-                  ))
-                }
-                <span className={titleClasses}>Explore</span>
-                {
-                  exploreItems.map((exploreItem, i) => (
-                    <HeaderMenuItem {...exploreItem} key={`header-item-explore-${i}`} />
-                  ))
-                }
-              </nav>
-              <Button block className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}>
-                Gab
-              </Button>
-            </div>
-          </div>
-        </div>
-      </header>
-    )
-  }
+      <Fragment>
+        <h1 className={[_s.default].join(' ')}>
+          <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
+            <GabLogo />
+          </NavLink>
+        </h1>

-}
-
-class HeaderMenuItem extends PureComponent {
-  static propTypes = {
-    to: PropTypes.string,
-    active: PropTypes.bool,
-    icon: PropTypes.string,
-    image: PropTypes.string,
-    title: PropTypes.string,
-    me: PropTypes.bool,
-    count: PropTypes.number,
-  }
-
-  state = {
-    hovering: false,
-  }
-
-  handleOnMouseEnter = () => {
-    this.setState({ hovering: true })
-  }
-
-  handleOnMouseLeave = () => {
-    this.setState({ hovering: false })
-  }
-
-  render() {
-    const { to, active, icon, image, title, me, count } = this.props
-    const { hovering } = this.state
-
-    const iconSize = '16px'
-    const shouldShowActive = hovering || active
-    const isNotifications = to === '/notifications'
-
-    const containerClasses = cx({
-      default: 1,
-      maxWidth100PC: 1,
-      width100PC: 1,
-      flexRow: 1,
-      paddingVertical5PX: 1,
-      paddingHorizontal10PX: 1,
-      alignItemsCenter: 1,
-      radiusSmall: 1,
-      // border1PX: shouldShowActive,
-      // borderColorSecondary: shouldShowActive,
-      backgroundSubtle2: shouldShowActive,
-    })
-
-    const textClasses = cx({
-      default: 1,
-      fontWeightNormal: 1,
-      fontSize15PX: 1,
-      text: 1,
-      textOverflowEllipsis: 1,
-      colorPrimary: shouldShowActive || me,
-      colorSecondary: !hovering && !active && !me,
-    })
-
-    const iconClasses = cx({
-      fillColorBlack: shouldShowActive,
-      fillcolorSecondary: !hovering && !active,
-    })
-
-    const countClasses = cx({
-      default: 1,
-      text: 1,
-      marginLeftAuto: 1,
-      fontSize12PX: 1,
-      paddingHorizontal5PX: 1,
-      marginRight2PX: 1,
-      lineHeight15: 1,
-      marginLeft5PX: 1,
-      colorSecondary: !isNotifications,
-      colorWhite: isNotifications,
-      backgroundColorBrand: isNotifications,
-      radiusSmall: isNotifications,
-    })
-
-    return (
-      <NavLink
-        to={to}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
-        className={[_s.default, _s.noUnderline, _s.cursorPointer, _s.width100PC, _s.alignItemsStart, _s.flexGrow1].join(' ')}
-      >
-        <div className={containerClasses}>
-          <div className={[_s.default]}>
-            { icon && <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} /> }
-            { image &&
-              <img
-                className={[_s.default, _s.circle].join(' ')}
-                width={iconSize}
-                height={iconSize}
-                src={image}
-              />
-            }
-          </div>
-          <div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
-            <span className={textClasses}>{title}</span>
-          </div>
-          { count > 0 &&
-            <span className={countClasses}>
-              {count}
-            </span>
-          }
-        </div>
-      </NavLink>
+        {
+          (!!me && !!account) &&
+          <SidebarSectionItem
+            image={account.get('avatar')}
+            title={account.get('acct')}
+            to={`/${account.get('acct')}`}
+          />
+        }
+      </Fragment>
    )
  }
 }
--- a/app/javascript/gabsocial/components/status/status.js
+++ b/app/javascript/gabsocial/components/status/status.js
@@ -14,6 +14,7 @@ import RelativeTimestamp from '../relative_timestamp';
 import DisplayName from '../display_name';
 import StatusContent from '../status_content';
 import StatusActionBar from '../status_action_bar';
+import Block from '../block';
 import Icon from '../icon';
 import Poll from '../poll';
 import StatusHeader from '../status_header'
@@ -257,9 +258,9 @@ class Status extends ImmutablePureComponent {

  handleOpenProUpgradeModal = () => {
    this.props.onOpenProUpgradeModal();
-	}
+  }

-  render () {
+  render() {
    let media = null;
    let statusAvatar, prepend, rebloggedByText, reblogContent;

@@ -424,51 +425,53 @@ class Status extends ImmutablePureComponent {
    return (
      <HotKeys handlers={handlers}>
        <div
-          className={[_s.default, _s.backgroundColorPrimary, _s.radiusSmall, _s.marginBottom15PX, _s.border1PX, _s.borderColorSecondary].join(' ')}
+          className={[_s.default, _s.marginBottom15PX].join(' ')}
          tabIndex={this.props.muted ? null : 0}
          data-featured={featured ? 'true' : null}
          aria-label={textForScreenReader(intl, status, rebloggedByText)}
          ref={this.handleRef}
        >
+          <Block>

-          {prepend}
+            {prepend}

-          <div
-            className={classNames('status', `status-${status.get('visibility')}`, {
-              'status-reply': !!status.get('in_reply_to_id'),
-              muted: this.props.muted,
-              read: unread === false,
-            })}
-            data-id={status.get('id')}
-          >
+            <div
+              className={classNames('status', `status-${status.get('visibility')}`, {
+                'status-reply': !!status.get('in_reply_to_id'),
+                muted: this.props.muted,
+                read: unread === false,
+              })}
+              data-id={status.get('id')}
+            >

-            <StatusHeader status={status} />
+              <StatusHeader status={status} />

-            <div className={_s.default}>
-              <StatusContent
-                status={status}
-                reblogContent={reblogContent}
-                onClick={this.handleClick}
-                expanded={!status.get('hidden')}
-                onExpandedToggle={this.handleExpandedToggle}
-                collapsable
-              />
-            </div>
+              <div className={_s.default}>
+                <StatusContent
+                  status={status}
+                  reblogContent={reblogContent}
+                  onClick={this.handleClick}
+                  expanded={!status.get('hidden')}
+                  onExpandedToggle={this.handleExpandedToggle}
+                  collapsable
+                />
+              </div>

-            { media }
+              {media}

-            { /* status.get('quote') && <StatusQuote
+              { /* status.get('quote') && <StatusQuote
              id={status.get('quote')}
            /> */ }

-            { /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
+              { /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
              <button className='status__content__read-more-button' onClick={this.handleClick}>
                <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
              </button>
            ) */ }

-            <StatusActionBar status={status} account={account} {...other} />
-          </div>
+              <StatusActionBar status={status} account={account} {...other} />
+            </div>
+          </Block>
        </div>
      </HotKeys>
    );
--- a/app/javascript/gabsocial/components/tab_bar.js
+++ b/app/javascript/gabsocial/components/tab_bar.js
@@ -0,0 +1,21 @@
+import TabBarItem from './tab_bar_item'
+
+export default class TabBar extends PureComponent {
+  static propTypes = {
+    tabs: PropTypes.array,
+  }
+
+  render() {
+    const { tabs } = this.props
+
+    return (
+      <div className={[_s.default, _s.height53PX, _s.paddingHorizontal5PX, _s.flexRow].join(' ')}>
+        {
+          tabs.map((tab, i) => (
+            <TabBarItem key={`tab-bar-item-${i}`} {...tab} />
+          ))
+        }
+      </div>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/tab_bar_item.js
+++ b/app/javascript/gabsocial/components/tab_bar_item.js
@@ -0,0 +1,66 @@
+import { NavLink, withRouter } from 'react-router-dom'
+import classNames from 'classnames/bind'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default
+@withRouter
+class TabBarItem extends PureComponent {
+  static propTypes = {
+    location: PropTypes.object.isRequired,
+    title: PropTypes.string,
+    to: PropTypes.string,
+  }
+
+  state = {
+    active: -1,
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      const isCurrent = this.props.to === this.props.location.pathname
+
+      if (this.state.active !== isCurrent) {
+        this.setState({
+          active: isCurrent,
+        })
+      }
+    }
+  }
+
+  render() {
+    const { title, to, location } = this.props
+    const { active } = this.state
+
+    const isCurrent = active === -1 ? to === location.pathname : active
+
+    const containerClasses = cx({
+      default: 1,
+      height53PX: 1,
+      noUnderline: 1,
+      text: 1,
+      displayFlex: 1,
+      alignItemsCenter: 1,
+      justifyContentCenter: 1,
+      paddingHorizontal10PX: 1,
+      borderBottom2PX: 1,
+      borderColorTransparent: !isCurrent,
+      borderColorBrand: isCurrent,
+    })
+
+    const textOptions = {
+      size: 'small',
+      color: isCurrent ? 'brand' : 'primary',
+      weight: isCurrent ? 'bold' : 'normal',
+    }
+
+    return (
+      <NavLink to={to} className={containerClasses}>
+        <Text {...textOptions}>
+          {title}
+        </Text>
+      </NavLink>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import { injectIntl, defineMessages } from 'react-intl'
 import { me } from '../initial_state'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
+import Block from './block'
 import Avatar from './avatar'
 import Heading from './heading'

@@ -35,18 +36,20 @@ class TimelineComposeBlock extends ImmutablePureComponent {
    const { account, size, intl, ...rest } = this.props

    return (
-      <section className={[_s.default, _s.overflowHidden, _s.radiusSmall, _s.border1PX, _s.borderColorSecondary, _s.backgroundColorPrimary, _s.marginBottom15PX].join(' ')}>
-        <div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
-          <Heading size='h5'>
-            {intl.formatMessage(messages.createPost)}
-          </Heading>
-        </div>
-        <div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
-          <div className={[_s.default, _s.marginRight10PX].join(' ')}>
-            <Avatar account={account} size={46} />
+      <section className={[_s.default, _s.marginBottom15PX].join(' ')}>
+        <Block>
+          <div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
+            <Heading size='h5'>
+              {intl.formatMessage(messages.createPost)}
+            </Heading>
          </div>
-          <ComposeFormContainer {...rest} />
-        </div>
+          <div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
+            <div className={[_s.default, _s.marginRight10PX].join(' ')}>
+              <Avatar account={account} size={46} />
+            </div>
+            <ComposeFormContainer {...rest} />
+          </div>
+        </Block>
      </section>
    )
  }