Another 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 group page components.

app/javascript/gabsocial/features/account_timeline/components/header/header.js

@@ -1,7 +1,9 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import InnerHeader from './inner_header';
-import MovedNote from './moved_note';
+import InnerHeader from '../inner_header';
+import MovedNote from '../moved_note';
+
+import './header.scss';
 
 export default class Header extends ImmutablePureComponent {
 

app/javascript/gabsocial/features/account_timeline/components/header/header.scss

@@ -0,0 +1,6 @@
+.account-timeline {
+  &__header {
+    display: block;
+    width: 100%;
+  }
+}

app/javascript/gabsocial/features/account_timeline/components/header/index.js

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

app/javascript/gabsocial/features/account_timeline/components/inner_header/index.js

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

app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js

@@ -10,7 +10,9 @@ import Icon from '../../../components/icon';
 import Avatar from '../../../components/avatar';
 import { shortNumberFormat } from '../../../utils/numbers';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
-import ProfileInfoPanel from './profile_info_panel';
+import ProfileInfoPanel from './profile_info_panel/profile_info_panel';
+
+import './inner_header.scss';
 
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },

app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.scss

@@ -0,0 +1,17 @@
+.relationship-tag {
+  display: block;
+  margin-bottom: 4px;
+  vertical-align: top;
+  color: $primary-text-color;
+  background-color: $base-overlay-background;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 4px;
+  border-radius: 4px;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}

app/javascript/gabsocial/features/account_timeline/components/moved_note.js

@@ -1,39 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import AvatarOverlay from '../../../components/avatar_overlay';
-import DisplayName from '../../../components/display_name';
-import Icon from 'gabsocial/components/icon';
-import { NavLink } from 'react-router-dom';
-
-export default class MovedNote extends ImmutablePureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  static propTypes = {
-    from: ImmutablePropTypes.map.isRequired,
-    to: ImmutablePropTypes.map.isRequired,
-  };
-
-  render () {
-    const { from, to } = this.props;
-    const displayNameHtml = { __html: from.get('display_name_html') };
-
-    return (
-      <div className='account__moved-note'>
-        <div className='account__moved-note__message'>
-          <div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div>
-          <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
-        </div>
-
-        <NavLink to={`/${this.props.to.get('acct')}`} className='detailed-status__display-name'>
-          <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>
-          <DisplayName account={to} />
-        </NavLink>
-      </div>
-    );
-  }
-
-}

app/javascript/gabsocial/features/account_timeline/components/moved_note/index.js

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

app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js

@@ -0,0 +1,51 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { NavLink } from 'react-router-dom';
+import AvatarOverlay from '../../../../components/avatar_overlay';
+import DisplayName from '../../../../components/display_name';
+import Icon from '../../../../components/icon';
+
+import './moved_note.scss';
+
+export default class MovedNote extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    from: ImmutablePropTypes.map.isRequired,
+    to: ImmutablePropTypes.map.isRequired,
+  };
+
+  render () {
+    const { from, to } = this.props;
+    const displayNameHtml = { __html: from.get('display_name_html') };
+
+    return (
+      <div className='moved-note'>
+        <div className='moved-note__message'>
+          <div className='moved-note__icon-wrapper'>
+            <Icon id='suitcase' className='moved-note__icon' fixedWidth />
+          </div>
+          <FormattedMessage
+            id='account.moved_to'
+            defaultMessage='{name} has moved to:'
+            values={{
+              name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi>
+            }}
+          />
+        </div>
+
+        <NavLink to={`/${this.props.to.get('acct')}`} className='moved-note__display-name'>
+          <div className='moved-note__display-avatar'>
+            <AvatarOverlay account={to} friend={from} />
+          </div>
+          <DisplayName account={to} />
+        </NavLink>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.scss

@@ -0,0 +1,55 @@
+.moved-note {
+  padding: 14px 10px 16px 10px;
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  &__message {
+    position: relative;
+    margin-left: 58px;
+    color: $dark-text-color;
+    padding-bottom: 4px;
+    font-size: 14px;
+
+    >span {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__icon-wrapper {
+    left: -26px;
+    position: absolute;
+  }
+
+  &__display-name {
+    display: block;
+    color: $secondary-text-color;
+    margin-bottom: 0;
+    line-height: 24px;
+    overflow: hidden;
+
+    strong,
+    span {
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    strong {
+      font-size: 16px;
+      color: $primary-text-color;
+    }
+
+    &:hover strong {
+      text-decoration: underline;
+    }
+  }
+
+  &__display-avatar {
+    position: relative;
+    float: left;
+    margin-right: 10px;
+  }
+}

app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/index.js

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

app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.js

@@ -1,16 +1,18 @@
-'use strict';
-
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'gabsocial/components/icon';
-import VerifiedIcon from 'gabsocial/components/verified_icon';
-import Badge from 'gabsocial/components/badge';
 import { List as ImmutableList } from 'immutable';
+import Icon from '../../../../components/icon';
+import VerifiedIcon from '../../../../components/verified_icon';
+import Badge from '../../../../components/badge';
+
+import './profile_info_panel.scss';
 
 const messages = defineMessages({
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
+  bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
+  memberSince: { id: 'account.member_since', defaultMessage:'Member since {date}'},
 });
 
 const dateFormatOptions = {
@@ -60,7 +62,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     }
 
     const lockedIcon = account.get('locked') ? (<Icon id='lock' title={intl.formatMessage(messages.account_locked)} />) : '';
-    const badge = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
+    const badge = account.get('bot') ? (<div className='account-role bot'>{intl.formatMessage(messages.bot)}</div>) : null;
     const content = { __html: account.get('note_emojified') };
     const fields = account.get('fields');
     const acct = account.get('acct');
@@ -86,9 +88,9 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             {account.get('is_investor') && <Badge type='investor' />}
             <div className='profile-info-panel-content__badges__join-date'>
               <Icon id="calendar"/>
-              <FormattedMessage id='account.member_since' defaultMessage='Member since {date}' values={{
+              {intl.formatMessage(messages.memberSince, {
                 date: memberSinceDate
-              }} />
+              })}
             </div>
           </div>
 
@@ -131,4 +133,4 @@ class ProfileInfoPanel extends ImmutablePureComponent {
       </div>
     );
   }
-}
+}

app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.scss

@@ -0,0 +1,137 @@
+.profile-info-panel {
+  display: flex;
+  position: relative;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1;
+
+    @media (min-width:895px) {
+      padding-top: 60px;
+    }
+  }
+}
+
+.profile-info-panel-content {
+  display: flex;
+
+  &__badges {
+    display: flex;
+    margin: 5px 0;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    &__join-date {
+      display: block;
+      margin-top: 5px;
+
+      .fa {
+        margin-right: 8px;
+      }
+
+      span {
+        color: $primary-text-color;
+
+        body.theme-gabsocial-light & {
+          color: $gab-default-text-light;
+        }
+
+        font-size: 15px;
+        line-height: 1.25;
+      }
+    }
+  }
+
+  &__name {
+    display: block;
+
+    .account-role {
+      vertical-align: top;
+    }
+
+    .emojione {
+      width: 22px;
+      height: 22px;
+    }
+
+    h1 {
+      span:first-of-type {
+        color: #ffffff;
+
+        @include text-overflow;
+        @include text-sizing(20px, 600, 1.25);
+
+        body.theme-gabsocial-light & {
+          color: $gab-default-text-light;
+        }
+      }
+
+      small {
+        display: block;
+        color: $secondary-text-color;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        @include text-sizing(16px, 400, 1.5)
+      }
+    }
+  }
+
+  &__bio {
+    display: block;
+    flex: 1 1;
+    color: $primary-text-color;
+    margin: 15px 0;
+    font-size: 15px;
+    line-height: 1.25;
+
+    a {
+      color: lighten($ui-highlight-color, 8%);
+    }
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid lighten($ui-base-color, 12%);
+    padding: 10px 0;
+    margin: 5px 0;
+
+    @media screen and (max-width:895px) {
+      border-bottom: 1px solid lighten($ui-base-color, 12%);
+    }
+
+    a {
+      color: lighten($ui-highlight-color, 8%);
+    }
+
+    dl:first-child .verified {
+      border-radius: 0 4px 0 0;
+    }
+
+    .verified a {
+      color: $valid-value-color;
+    }
+
+    &__item {
+      display: flex;
+      padding: 2px 0;
+      margin: 2px 0;
+      flex: 1 1;
+
+      * {
+        font-size: 15px;
+        line-height: 24px;
+      }
+
+      dt {
+        min-width: 26px;
+      }
+
+      dd {
+        padding-left: 4px;
+      }
+    }
+  }
+}