Large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*

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

@@ -0,0 +1 @@
+export { default } from './user_panel';

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

@@ -0,0 +1,95 @@
+import { Link } from 'react-router-dom';
+import { injectIntl, defineMessages } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { autoPlayGif, me } from '../../initial_state';
+import { makeGetAccount } from '../../selectors';
+import Avatar from '../avatar';
+import { shortNumberFormat } from '../../utils/numbers';
+
+import './user_panel.scss';
+
+const messages = defineMessages({
+  gabs: { id:'account.posts', defaultMessage: 'Gabs' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' }
+});
+
+
+const mapStateToProps = state => {
+  const getAccount = makeGetAccount();
+
+  return {
+    account: getAccount(state, me),
+  };
+};
+
+export default @connect(mapStateToProps)
+@injectIntl
+class UserPanel extends ImmutablePureComponent {
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { account, intl } = this.props;
+    const displayNameHtml = { __html: account.get('display_name_html') };
+
+    return (
+      <div className='user-panel'>
+        <div className='user-panel__container'>
+
+          <div className='user-panel__header'>
+            <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
+          </div>
+
+          <div className='user-panel__profile'>
+            <Link to={`/${account.get('acct')}`} title={account.get('acct')}>
+              <Avatar account={account} />
+            </Link>
+          </div>
+
+          <div className='user-panel__meta'>
+
+            <div className='user-panel__account'>
+              <h1>
+                <Link to={`/${account.get('acct')}`}>
+                  <span className='user-panel__account__name' dangerouslySetInnerHTML={displayNameHtml} />
+                  <small className='user-panel__account__username'>@{account.get('acct')}</small>
+                </Link>
+              </h1>
+            </div>
+
+            <div className='user-panel__stats-block'>
+
+              <div className='user-panel-stats-item'>
+                <Link to={`/${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
+                  <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('statuses_count'))}</strong>
+                  <span className='user-panel-stats-item__label'>{intl.formatMessage(messages.gabs)}</span>
+                </Link>
+              </div>
+
+              <div className='user-panel-stats-item'>
+                <Link to={`/${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
+                  <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
+                  <span className='user-panel-stats-item__label'>{intl.formatMessage(messages.followers)}</span>
+                </Link>
+              </div>
+
+              <div className='user-panel-stats-item'>
+                <Link to={`/${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
+                  <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('following_count'))}</strong>
+                  <span className='user-panel-stats-item__label'>{intl.formatMessage(messages.follows)}</span>
+                </Link>
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+};

app/javascript/gabsocial/components/user_panel/user_panel.scss

@@ -0,0 +1,125 @@
+.user-panel {
+  display: flex;
+  width: 265px;
+  flex-direction: column;
+  overflow-y: hidden;
+
+  // @include gab-container-standards();
+
+  &__header {
+    display: block;
+    background: lighten($gab-background-container, 4%);
+
+    @include size(100%, 112px);
+
+    body.theme-gabsocial-light & {
+      background: darken($gab-background-container-light, 4%);
+    }
+
+    img {
+      display: block;
+      margin: 0;
+      object-fit: cover;
+
+      @include size(100%);
+    }
+  }
+
+  &__profile {
+    display: flex;
+    align-items: flex-start;
+    padding: 0 10px;
+    margin-top: -53px;
+
+    .account__avatar {
+      display: block;
+      border: 6px solid $gab-background-base;
+      background-size: cover;
+      
+      @include size(82px);
+
+      body.theme-gabsocial-light & {
+        border: 6px solid $gab-background-base-light;
+      }
+    }
+  }
+
+  &__meta {
+    display: block;
+    padding: 6px 20px 17px 20px;
+  }
+
+  &__account {
+    a {
+      text-decoration: none;
+      color: $primary-text-color;
+    }
+
+    &__name {
+      display: block;
+      color: #fff;
+
+      @include text-sizing(20px, 700, 24px);
+
+      body.theme-gabsocial-light & {
+        color: $gab-default-text-light;
+      }
+    }
+
+    &:hover & {
+      &__name {
+        text-decoration: underline;
+      }
+    }
+
+    &__username {
+      display: block;
+      font-size: 14px;
+      line-height: 16px;
+      color: $gab-secondary-text;
+      text-decoration: none !important;
+    }
+  }
+
+  &__stats-block {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 12px;
+  }
+
+  .user-panel-stats-item {
+    flex-wrap: wrap;
+
+    @include flex(left, start, column);
+
+    a {
+      text-decoration: none;
+
+      color: $primary-text-color;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    &__value {
+      display: block;
+      width: 100%;
+      color: #fff;
+
+      @include text-sizing(20px, 800, 24px);
+
+      body.theme-gabsocial-light & {
+        color: $gab-default-text-light;
+      }
+    }
+
+    &__label {
+      display: block;
+      width: 100%;
+      color: $gab-secondary-text;
+
+      @include text-sizing(12px, 400, 14px);
+    }
+  }
+}