Updated all component styles

new mixins, consolidated
all original styles files uncomitted

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

@@ -6,7 +6,6 @@ import { NavLink } from 'react-router-dom';
 import { debounce } from 'lodash';
 import Button from '../../../components/button';
 import { autoPlayGif, me, isStaff } from '../../../initial_state';
-import Icon from '../../../components/icon';
 import Avatar from '../../../components/avatar';
 import { shortNumberFormat } from '../../../utils/numbers';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
@@ -42,17 +41,12 @@ const messages = defineMessages({
   unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
+  accountFollowsYou: { id: 'account.follows_you', defaultMessage: 'Follows you' },
+  accountBlocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+  accountMuted: { id: 'account.muted', defaultMessage: 'Muted' },
+  domainBlocked: { id: 'account.domain_blocked', defaultMessage: 'Domain hidden' },
 });
 
-const dateFormatOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour12: false,
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
 export default @injectIntl
 class Header extends ImmutablePureComponent {
 
@@ -175,15 +169,15 @@ class Header extends ImmutablePureComponent {
     if (!account || !me) return info;
 
     if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
-      info.push(<span key='followed_by' className='relationship-tag'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>);
+      info.push(<span key='followed_by' className='relationship-tag'>{intl.formatMessage(messages.accountFollowsYou)}</span>);
     } else if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
-      info.push(<span key='blocked' className='relationship-tag'><FormattedMessage id='account.blocked' defaultMessage='Blocked' /></span>);
+      info.push(<span key='blocked' className='relationship-tag'>{intl.formatMessage(messages.accountBlocked)}</span>);
     }
 
     if (me !== account.get('id') && account.getIn(['relationship', 'muting'])) {
-      info.push(<span key='muted' className='relationship-tag'><FormattedMessage id='account.muted' defaultMessage='Muted' /></span>);
+      info.push(<span key='muted' className='relationship-tag'>{intl.formatMessage(messages.accountMuted)}</span>);
     } else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
-      info.push(<span key='domain_blocked' className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain hidden' /></span>);
+      info.push(<span key='domain_blocked' className='relationship-tag'>{intl.formatMessage(messages.domainBlocked)}</span>);
     }
 
     return info;

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

@@ -5,12 +5,12 @@
   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;
 
+  @include text-sizing(11px, 500);
+
   &:hover {
     opacity: 1;
   }

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

@@ -13,8 +13,8 @@
 
     >span {
       display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      @include text-overflow;
     }
   }
 
@@ -33,8 +33,8 @@
     strong,
     span {
       display: block;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      
+      @include text-overflow;
     }
 
     strong {

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

@@ -33,12 +33,11 @@
       span {
         color: $primary-text-color;
 
+        @include text-sizing(15px, 400, 1.25);
+
         body.theme-gabsocial-light & {
           color: $gab-default-text-light;
         }
-
-        font-size: 15px;
-        line-height: 1.25;
       }
     }
   }
@@ -51,15 +50,14 @@
     }
 
     .emojione {
-      width: 22px;
-      height: 22px;
+      @include size(22px);
     }
 
     h1 {
       span:first-of-type {
         color: #ffffff;
 
-        @include text-overflow;
+        @include text-overflow(nowrap);
         @include text-sizing(20px, 600, 1.25);
 
         body.theme-gabsocial-light & {
@@ -70,10 +68,9 @@
       small {
         display: block;
         color: $secondary-text-color;
-        overflow: hidden;
-        text-overflow: ellipsis;
 
-        @include text-sizing(16px, 400, 1.5)
+        @include text-sizing(16px, 400, 1.5);
+        @include text-overflow;
       }
     }
   }
@@ -83,8 +80,8 @@
     flex: 1 1;
     color: $primary-text-color;
     margin: 15px 0;
-    font-size: 15px;
-    line-height: 1.25;
+
+    @include text-sizing(15px, 400, 1.25);
 
     a {
       color: lighten($ui-highlight-color, 8%);
@@ -121,8 +118,7 @@
       flex: 1 1;
 
       * {
-        font-size: 15px;
-        line-height: 24px;
+        @include text-sizing(15px, 400, 24px);
       }
 
       dt {