Updated all component styles

new mixins, consolidated
all original styles files uncomitted

app/javascript/gabsocial/components/account/account.scss

@@ -17,7 +17,7 @@
       display: block;
       color: $primary-text-color;
 
-      @include text-overflow;
+      @include text-overflow(nowrap);
     }
   }
 

app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.scss

@@ -38,17 +38,14 @@
       outline: 0;
     }
 
-    @media screen and (max-width: 600px) {
-      font-size: 16px;
-    }
-
     &::-webkit-scrollbar {
       all: unset;
     }
 
-    @media screen and (max-width: 600px) {
+    @include breakpoint(sm) {
       max-height: 100px !important; // prevent auto-resize textarea
       resize: vertical;
+      font-size: 16px;
     }
   }
 

app/javascript/gabsocial/components/avatar/avatar.scss

@@ -1,9 +1,16 @@
-.avatar {
+.avatar,
+.account__avatar {
   // @include avatar-radius();
   display: block;
   position: relative;
   // background-color: $ui-base-color;
   object-fit: cover;
+  background-size: cover;
+
+  // TEMPORARY - need a default size for the avatars for now
+  // They are sized individually all over the application and need to change with breakpoints as well
+  // Might create a mixin to accept the size attribute and apply the various properties where necessary
+  @include size(56px);
 
   &--inline {
     display: inline-block;
@@ -23,3 +30,7 @@
     }
   }
 }
+
+a .account__avatar {
+  cursor: pointer;
+}

app/javascript/gabsocial/components/avatar_overlay/avatar_overlay.scss

@@ -1,4 +1,6 @@
 .avatar-overlay {
+  background-size: 48px 48px;
+
   @include circle(48px);
 
   &__base {

app/javascript/gabsocial/components/button/button.scss

@@ -12,7 +12,7 @@
   @include border-design(transparent, 10px, 4px);
   @include text-sizing(14px, 500, 36px, center);
   @include size(auto, 36px);
-  @include text-overflow;
+  @include text-overflow(nowrap);
 
   &:active,
   &:focus,

app/javascript/gabsocial/components/column/column.scss

@@ -4,4 +4,19 @@
   box-sizing: border-box;
   flex-direction: column;
   width: 350px;
+  flex: 1 1 100%;
+  overflow: hidden;
+
+  @media screen and (min-width: 631px) {
+    flex: 0 0 auto;
+    padding: 10px 5px;
+
+    &:first-child {
+      padding-left: 10px;
+    }
+
+    &:last-child {
+      padding-right: 10px;
+    }
+  }
 }

app/javascript/gabsocial/components/column_indicator/column_indicator.scss

@@ -49,3 +49,45 @@
 .no-reduce-motion .column-indicator--loading .column-indicator__figure {
   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
 }
+
+@keyframes loader-label {
+  0% {
+    opacity: 0.25;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes loader-figure {
+  0% {
+    background-color: lighten($ui-base-color, 26%);
+
+    @include size(0);
+  }
+
+  29% {
+    background-color: lighten($ui-base-color, 26%);
+  }
+
+  30% {
+    background-color: transparent;
+    border-width: 21px;
+    opacity: 1;
+
+    @include size(42px);
+  }
+
+  100% {
+    border-width: 0;
+    opacity: 0;
+    background-color: transparent;
+
+    @include size(42px);
+  }
+}

app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss

@@ -8,14 +8,13 @@
     flex: 1 1 auto;
   }
 
-  &__title {
+  &__title {}
-
-  }
 
   &__input {
-    width: 100%;
     margin-bottom: 6px;
 
+    @include size(100%, 36px);
+
     &:focus {
       outline: 0;
     }
@@ -24,5 +23,7 @@
   &__btn {
     flex: 0 0 auto;
     margin: 0 5px;
+    margin-left: 6px;
+    width: 112px;
   }
 }

app/javascript/gabsocial/components/column_subheading/column_subheading.scss

@@ -2,8 +2,8 @@
   background: $ui-base-color;
   color: $dark-text-color;
   padding: 8px 20px;
-  font-size: 12px;
-  font-weight: 500;
   text-transform: uppercase;
   cursor: default;
+
+  @include text-sizing(12px, 500);
 }

app/javascript/gabsocial/components/columns_area/columns_area.scss

@@ -24,25 +24,22 @@
 }
 
 .columns-area {
-  display: flex;
   flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: flex-start;
   position: relative;
 
-  &__panels {
+  @include flex(center, stretch, row);
-    display: flex;
-    justify-content: center;
 
+  &__panels {
     @include size(100%);
+    @include flex(center);
 
     &__pane {
       height: 100%;
       pointer-events: none;
-      display: flex;
-      justify-content: flex-end;
       padding-top: 15px;
 
+      @include flex(flex-end);
+
       &--start {
         justify-content: flex-start;
       }
@@ -78,14 +75,12 @@
 @media screen and (min-width: 631px) {
   .columns-area {
     padding: 0;
-  }
-
-  .columns-area>div {
 
+    >div {
       .column,
       .drawer {
-      padding-left: 5px;
+        @include horizontal-padding(5px);
-      padding-right: 5px;
+      }
     }
   }
 }
@@ -104,9 +99,9 @@
   }
 
   .search__input {
-    line-height: 18px;
-    font-size: 16px;
     padding: 15px 30px 15px 15px;
+
+    @include text-sizing(16px, 400, 18px);
   }
 
   .search__icon .fa {
@@ -163,8 +158,7 @@
       }
 
       .account__avatar-wrapper {
-        margin-left: 17px;
+        @include horizontal-margin(17px, 15px);
-        margin-right: 15px;
       }
     }
   }

app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.scss

@@ -2,11 +2,11 @@
   z-index: 9999;
   position: absolute;
   background: $gab-background-container;
-  border-radius: 4px;
-  border: 1px solid $gab-placeholder-accent;
   padding: 4px 0;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
 
+  @include border-design($gab-placeholder-accent, 1px, 4px);
+
   &.left {
     transform-origin: 100% 50%;
   }
@@ -71,7 +71,7 @@
     text-transform: capitalize;
     color: $gab-secondary-text;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
     @include text-sizing(13px, 400, 26px);
 
     &:focus,

app/javascript/gabsocial/components/icon/icon.scss

@@ -0,0 +1,3 @@
+.star-icon.active {
+  color: $gold-star;
+}

app/javascript/gabsocial/components/link_footer/link_footer.scss

@@ -1,7 +1,6 @@
 .link-footer {
   flex: 0 0 auto;
-  padding: 10px;
+  padding: 20px 10px 10px 10px;
-  padding-top: 20px;
 
   ul {
     margin-bottom: 10px;

app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss

@@ -1,12 +1,10 @@
 .embed-modal {
-  max-width: 80vw;
+  @include max-size(80vw, 80vh);
-  max-height: 80vh;
 
   h4 {
     padding: 30px;
-    font-weight: 500;
+
-    font-size: 16px;
+    @include text-sizing(16px, 500, 1, center);
-    text-align: center;
   }
 
   .embed-modal__container {
@@ -44,7 +42,7 @@
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @include breakpoint(sm) {
         font-size: 16px;
       }
     }

app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.scss

@@ -13,8 +13,7 @@
     position: relative;
     border-bottom: 1px solid lighten($classic-base-color, 8%);
     border-radius: 6px 6px 0 0;
-    padding-top: 12px;
+    padding: 12px 0;
-    padding-bottom: 12px;
 
     &__title {
       display: block;
@@ -66,8 +65,8 @@
       display: inline-block;
       padding: 2px 8px;
       background-color: lighten($ui-base-color, 8%);
-      border: 1px solid darken($ui-base-color, 4%);
+
-      border-radius: 4px;
+      @include border-design(darken($ui-base-color, 4%), 1px, 4px);
     }
   }
 }

app/javascript/gabsocial/components/modal/modal.scss

@@ -26,8 +26,8 @@
   position: relative;
   border-bottom: 1px solid lighten($classic-base-color, 8%);
   border-radius: 6px 6px 0 0;
-  padding-top: 12px;
+
-  padding-bottom: 12px;
+  @include vertical-padding(12px);
 
   &__title {
     display: block;

app/javascript/gabsocial/components/modal/report_modal/report_modal.scss

@@ -0,0 +1,22 @@
+.setting-text {
+  color: $darker-text-color;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid $ui-primary-color;
+  box-sizing: border-box;
+  display: block;
+  font-family: inherit;
+  margin-bottom: 10px;
+  padding: 7px 0;
+  width: 100%;
+
+  &:focus,
+  &:active {
+    color: $primary-text-color;
+    border-bottom-color: $highlight-text-color;
+  }
+
+  @include breakpoint(sm) {
+    font-size: 16px;
+  }
+}

app/javascript/gabsocial/components/panel/panel.scss

@@ -1,12 +1,12 @@
 .panel {
   display: flex;
-  width: 100%;
   border-radius: 10px;
   flex-direction: column;
-  height: auto;
   box-sizing: border-box;
   background: $gab-background-container;
 
+  @include size(100%, auto);
+
   body.theme-gabsocial-light & {
     // @include light-theme-shadow();
     background: $gab-background-container-light;
@@ -66,11 +66,11 @@
       padding-right: 10px;
 
       &__avatar {
-        height: 46px;
-        width: 46px;
         background-color: red;
         left: -58px;
         position: absolute;
+
+        @include size(46px);
       }
 
       &__name {
@@ -81,18 +81,17 @@
 
         &__name {
           color: $primary-text-color;
-          font-size: 14px;
-          font-weight: bold;
-          line-height: 16px;
           margin-bottom: 2px;
           max-height: 32px; //2 lines of text
           overflow: hidden;
+
+          @include text-sizing(14px, 700, 16px);
         }
 
         &__username {
           color: $lighter-text-color;
-          font-size: 12px;
+
-          line-height: 14px;
+          @include text-sizing(12px, 400, 14px);
         }
       }
     }
@@ -125,8 +124,7 @@
   &__title {
     flex: 1 1;
     color: $primary-text-color;
-    font-size: 16px;
+
-    font-weight: bold;
+    @include text-sizing(16px, 700, 19px);
-    line-height: 19px;
   }
 }

app/javascript/gabsocial/components/poll/poll.scss

@@ -26,7 +26,7 @@
     cursor: default;
     color: #fff;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
 
     body.theme-gabsocial-light & {
       color: $gab-default-text-light;
@@ -51,10 +51,10 @@
       outline: 0;
       font-family: inherit;
       background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
-      border-radius: 4px;
       padding: 6px 10px;
 
+      @include border-design(darken($simple-background-color, 14%), 1px, 4px);
+
       &:focus {
         border-color: $highlight-text-color;
       }
@@ -94,10 +94,10 @@
   }
 
   &__footer {
-    padding-top: 6px;
-    padding-bottom: 5px;
     color: $dark-text-color;
 
+    @include vertical-padding(6px, 5px);
+
     span {
       font-size: 14px;
     }

app/javascript/gabsocial/components/promo_panel/promo_panel.scss

@@ -17,11 +17,11 @@
 
   &__message {
     display: block;
-    font-size: 14px;
-    line-height: 16px;
     margin-top: 6px;
     color: $primary-text-color;
 
+    @include text-sizing(14px, 400, 16px);
+
     &--dark {
       color: $ui-secondary-color;
     }

app/javascript/gabsocial/components/search/search.scss

@@ -0,0 +1,69 @@
+.search {
+  position: relative;
+
+  &__input {
+    display: block;
+    padding: 7px 30px 6px 10px;
+    @include search-input();
+  }
+
+  &__icon {
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus {
+      outline: 0 !important;
+    }
+
+    .fa {
+      cursor: default;
+      display: inline-block;
+      position: absolute;
+      top: 8px;
+      right: 6px;
+      z-index: 2;
+      font-size: 16px;
+      color: $gab-placeholder-accent;
+      opacity: 0;
+      pointer-events: none;
+
+      @include size(18px);
+
+      &.active {
+        pointer-events: auto;
+        opacity: 1;
+      }
+    }
+
+    .fa-search.active {
+      pointer-events: none;
+    }
+
+    .fa-times-circle {
+      cursor: pointer;
+      font-size: 17px;
+      color: $gab-alert-red;
+
+      &:hover {
+        color: lighten($gab-alert-red, 7%);
+      }
+    }
+  }
+
+  @media screen and (max-width: 630px) and (max-height: 400px) {
+    will-change: margin-top;
+    transition: margin-top 400ms 100ms;
+  }
+
+  @media screen and (min-width: 360px) {
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (min-width: 895px) {
+  .search-page .search {
+    display: none;
+  }
+}

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.scss

@@ -17,28 +17,25 @@
     flex: 1 1 auto;
     color: $secondary-text-color;
     padding: 15px 0;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
     text-decoration: none;
     position: relative;
 
+    @include text-sizing(14px, 500, 1, center);
+
     &.active {
       color: $primary-text-color;
 
       &::before,
       &::after {
-        display: block;
-        content: "";
-        position: absolute;
         bottom: 0;
         left: 50%;
-        width: 0;
-        height: 0;
         transform: translateX(-50%);
         border-style: solid;
         border-width: 0 10px 10px;
         border-color: transparent transparent lighten($ui-base-color, 8%);
+
+        @include pseudo;
+        @include size(0);
       }
 
       &::after {
@@ -48,3 +45,14 @@
     }
   }
 }
+
+.account-section-headline {
+
+  button,
+  a {
+    flex: none;
+    padding: 18px 15px;
+
+    @include text-sizing(16px, 600);
+  }
+}

app/javascript/gabsocial/components/status/status.scss

@@ -1,6 +1,5 @@
 .status {
-  padding: 8px 10px;
+  padding: 8px 10px 8px 68px;
-  padding-left: 68px;
   position: relative;
   min-height: 54px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -120,17 +119,15 @@
 .status__wrapper--filtered {
   color: $dark-text-color;
   border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
   margin: 0;
   padding: 15px;
   box-sizing: border-box;
   width: 100%;
   clear: both;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
 
+  @include text-sizing(inherit, 400, inherit, center);
+}
 
 .status__prepend-icon-wrapper {
   left: -26px;
@@ -172,8 +169,8 @@
 
   >span {
     display: block;
-    overflow: hidden;
+
-    text-overflow: ellipsis;
+    @include text-overflow
   }
 }
 
@@ -184,18 +181,53 @@
 }
 
 .status__avatar {
-  height: 48px;
+  @include size(48px);
-  left: 10px;
+  @include abs-position(10px, auto, auto, 10px);
-  position: absolute;
-  top: 10px;
-  width: 48px;
 }
 
 .status__expand {
-  width: 68px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
   cursor: pointer;
+
+  @include size(68px, 100%);
+  @include abs-position(0, auto, auto, 0);
+}
+
+
+.media-spoiler-video {
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  border: 0;
+  display: block;
+
+  @include background-image("");
+}
+
+.media-spoiler-video-play-icon {
+  border-radius: 100px;
+  color: rgba($primary-text-color, 0.8);
+  font-size: 36px;
+  padding: 5px;
+  transform: translate(-50%, -50%);
+
+  @include abs-position(50%, auto, auto, 50%);
+}
+
+
+.media-spoiler {
+  background: $base-overlay-background;
+  color: $darker-text-color;
+  border: 0;
+  padding: 0;
+  border-radius: 4px;
+  appearance: none;
+
+  @include size(100%);
+
+  &:hover,
+  &:active,
+  &:focus {
+    padding: 0;
+    color: lighten($darker-text-color, 8%);
+  }
 }

app/javascript/gabsocial/components/status_content/status_content.scss

@@ -4,12 +4,10 @@
 
 .status__content {
   position: relative;
-  word-wrap: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-top: 2px;
   color: $primary-text-color;
 
+  @include text-overflow(normal, break-word);
   @include text-sizing(15px, 400, 20px);
 
   &:focus {
@@ -103,8 +101,7 @@
   color: $gab-brand-default;
   border: 0;
   background: transparent;
-  padding: 0;
+  padding: 8px 0 0 0;
-  padding-top: 8px;
 
   @include text-sizing(15px, 400, 20px);
 

app/javascript/gabsocial/components/tabs_bar/tabs_bar.scss

@@ -124,6 +124,11 @@
   .flex {
     display: flex;
   }
+
+  @media screen and (max-width: 630px) and (max-height: 400px) {
+    will-change: margin-top;
+    transition: margin-top 400ms 100ms;
+  }
 }
 
 .tabs-bar-item {

app/javascript/gabsocial/components/toggle_switch/toggle_switch.scss

@@ -5,10 +5,11 @@
   background-color: transparent;
   border: 0;
   padding: 0;
-  user-select: none;
   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
   -webkit-tap-highlight-color: transparent;
 
+  @include unselectable;
+
   &--disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -19,17 +20,15 @@
 .react-toggle-screenreader-only {
   border: 0;
   clip: rect(0 0 0 0);
-  height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
+
+  @include size(1px);
 }
 
 .react-toggle-track {
-  width: 50px;
-  height: 24px;
   padding: 0;
   border-radius: 30px;
   background-color: $ui-base-color;
@@ -51,14 +50,13 @@
 }
 
 .react-toggle-track-check {
-  margin-top: auto;
-  margin-bottom: auto;
   line-height: 0;
   opacity: 0;
   transition: opacity 0.25s ease;
 
   @include abs-position(0, auto, 0, 8px);
   @include size(14px, 10px);
+  @include vertical-margin(auto);
 }
 
 .react-toggle--checked .react-toggle-track-check {
@@ -67,14 +65,13 @@
 }
 
 .react-toggle-track-x {
-  margin-top: auto;
-  margin-bottom: auto;
   line-height: 0;
   opacity: 1;
   transition: opacity 0.25s ease;
 
   @include abs-position(0, 10px, 0);
   @include size(10px);
+  @include vertical-margin(auto);
 }
 
 .react-toggle--checked .react-toggle-track-x {

app/javascript/gabsocial/components/trending_item/trending_item.scss

@@ -12,7 +12,7 @@
     flex: 1 1 auto;
     color: $dark-text-color;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
 
     strong {
       font-weight: 500;
@@ -24,7 +24,7 @@
       text-decoration: none;
 
       @include text-sizing(14px, 500);
-      @include text-overflow;
+      @include text-overflow(nowrap);
 
       &:hover,
       &:focus,

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

@@ -74,17 +74,17 @@
 
     &__username {
       display: block;
-      font-size: 14px;
-      line-height: 16px;
       color: $gab-secondary-text;
       text-decoration: none !important;
+
+      @include text-sizing(14px, 16px);
     }
   }
 
   &__stats-block {
-    display: flex;
-    justify-content: space-between;
     padding-top: 12px;
+
+    @include flex(space-between);
   }
 
   .user-panel-stats-item {

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;
+      @include size(22px);
-      height: 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;
+        @include text-sizing(15px, 400, 24px);
-        line-height: 24px;
       }
 
       dt {

app/javascript/gabsocial/features/compose/components/compose_form/compose_form.scss

@@ -0,0 +1,144 @@
+.compose-form {
+  padding: 10px;
+
+  &__sensitive-button {
+    padding: 0 10px 10px 10px;
+
+    @include text-sizing(14px, 500);
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    .checkbox {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      margin-right: 10px;
+      top: -1px;
+      vertical-align: middle;
+
+      @include size(18px);
+      @include border-design($ui-primary-color, 1px, 4px);
+
+      &.active {
+        border-color: $highlight-text-color;
+        background: $highlight-text-color;
+      }
+    }
+  }
+
+  .emoji-picker-dropdown {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+  }
+
+  &.condensed {
+    .autosuggest-textarea__textarea {
+      min-height: 46px;
+      border-radius: 5px;
+    }
+  }
+
+  .emoji-picker-wrapper {
+    position: relative;
+    height: 0;
+  }
+
+  &__modifiers {
+    color: $inverted-text-color;
+    font-family: inherit;
+    font-size: 14px;
+    background: $simple-background-color;
+  }
+
+  &__buttons-wrapper {
+    padding: 10px;
+    background: darken($simple-background-color, 8%);
+    border-radius: 0 0 4px 4px;
+    flex: 0 0 auto;
+
+    @include flex(space-between);
+
+    .compose-form__buttons {
+      display: flex;
+
+      .compose-form__sensitive-button {
+        display: none;
+
+        &.compose-form__sensitive-button--visible {
+          display: block;
+        }
+
+        .compose-form__sensitive-button__icon {
+          line-height: 27px;
+        }
+      }
+    }
+
+    .icon-button {
+      box-sizing: content-box;
+      padding: 0 3px;
+    }
+  }
+
+  &__publish {
+    min-width: 0;
+    flex: 0 0 auto;
+
+    @include flex(flex-end);
+  }
+
+  &__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
+  }
+}
+
+.spoiler-input {
+  height: 0;
+  transform-origin: bottom;
+  opacity: 0.0;
+  position: relative;
+
+  &--visible {
+    height: 36px;
+    margin-bottom: 11px;
+    opacity: 1.0;
+  }
+
+  &__input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    color: $inverted-text-color;
+    background: $simple-background-color;
+    padding: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    resize: vertical;
+    border: 0;
+    outline: 0;
+    border-radius: 4px;
+
+    &:focus {
+      outline: 0;
+    }
+
+    @include breakpoint(sm) {
+      font-size: 16px;
+    }
+  }
+}
+
+.no-reduce-motion .spoiler-input {
+  transition: height 0.4s ease, opacity 0.4s ease;
+}

app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.scss

@@ -53,13 +53,13 @@
 
 .emoji-button {
   display: block;
-  font-size: 24px;
-  line-height: 24px;
   margin-left: 2px;
   width: 24px;
   outline: 0;
   cursor: pointer;
 
+  @include text-sizing(24px, 400, 24px);
+
   &:active,
   &:focus {
     outline: 0 !important;
@@ -69,10 +69,9 @@
     filter: grayscale(100%);
     opacity: 0.8;
     display: block;
-    margin: 0;
+    margin: 2px 0 0 0;
-    width: 22px;
+
-    height: 22px;
+    @include size(22px);
-    margin-top: 2px;
   }
 
   &:hover,
@@ -84,3 +83,35 @@
     }
   }
 }
+
+.no-reduce-motion .pulse-loading {
+  transform-origin: center center;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+@keyframes heartbeat {
+  from {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    transform: scale(0.91);
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    transform: scale(0.98);
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    transform: scale(0.87);
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+}

app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.scss

@@ -47,7 +47,7 @@
     display: block;
     font-weight: 500;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
   }
 
   &__profile-edit {

app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.scss

@@ -48,15 +48,12 @@
 
 .reply-indicator-content {
   position: relative;
-  font-size: 15px;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-top: 2px;
   color: $primary-text-color;
 
+  @include text-sizing(15px, 400, 20px);
+  @include text-overflow(normal, break-word);
+
   &:focus {
     outline: 0;
   }
@@ -70,9 +67,9 @@
   }
 
   .emojione {
-    width: 20px;
-    height: 20px;
     margin: -3px 0 0;
+
+    @include size(20px);
   }
 
   p {

app/javascript/gabsocial/features/compose/compose.scss

@@ -41,8 +41,8 @@
   flex-direction: column;
   overflow: hidden;
   overflow-y: auto;
-  width: 100%;
+
-  height: 100%;
+  @include size(100%);
 
   &.darker {
     background: $ui-base-color;
@@ -59,11 +59,11 @@
     display: block;
     object-fit: contain;
     object-position: bottom left;
-    width: 100%;
-    height: 100%;
     pointer-events: none;
     user-drag: none;
-    user-select: none;
+
+    @include unselectable;
+    @include size(100%);
   }
 
   @media screen and (min-height: 640px) {
@@ -93,8 +93,8 @@
   .drawer {
     flex: 0 0 auto;
     padding: 10px;
-    padding-left: 5px;
+
-    padding-right: 5px;
+    @include horizontal-padding(5px);
 
     &:first-child {
       padding-left: 10px;

app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.scss

@@ -16,8 +16,8 @@
     strong,
     span {
       display: block;
-      text-overflow: ellipsis;
+
-      overflow: hidden;
+      @include text-overflow;
     }
 
     strong {
@@ -33,12 +33,12 @@
 
 .account__header__content {
   color: $darker-text-color;
-  font-size: 14px;
-  font-weight: 400;
   overflow: hidden;
   word-break: normal;
   word-wrap: break-word;
 
+  @include text-sizing(14px, 400);
+
   p {
     margin-bottom: 20px;
 
@@ -56,3 +56,17 @@
     }
   }
 }
+
+.account--panel {
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+}
+
+.account--panel__button {
+  flex: 1 1 auto;
+  text-align: center;
+}

app/javascript/gabsocial/features/introduction/introduction.scss

@@ -135,8 +135,7 @@
   }
 
   &__action {
-    padding: 25px;
+    padding: 0 25px 25px 25px;
-    padding-top: 0;
 
     @include flex(center, center);
   }

app/javascript/gabsocial/features/notifications/components/notification/notification.scss

@@ -1,20 +1,21 @@
 .notification {
 
+
   &--favourite {
+    .status.status-direct {
+      background: transparent;
 
+      .icon-button.disabled {
+        color: lighten($action-button-color, 13%);
+      }
+    }
   }
 
-  &--follow {
+  &--follow {}
 
-  }
+  &--reblog {}
 
-  &--reblog {
+  &--poll {}
-
-  }
-
-  &--poll {
-
-  }
 
   &__message {
     margin: 0 10px 0 68px;
@@ -32,7 +33,7 @@
     >span {
       display: inline;
 
-      @include text-overflow;
+      @include text-overflow(nowrap);
     }
   }
 

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

@@ -18,7 +18,7 @@
     max-width: 1200px;
 
     @include text-sizing(27px, bold, 32px);
-    @include text-overflow;
+    @include text-overflow(nowrap);
     @include margin-center;
 
     @media (min-width:895px) and (max-width:1190px) {

app/javascript/gabsocial/features/status/components/card/card.scss

@@ -0,0 +1,169 @@
+.status-card {
+  display: flex;
+  font-size: 14px;
+  color: $dark-text-color;
+  margin-top: 14px;
+  text-decoration: none;
+  overflow: hidden;
+
+  @include border-design(lighten($ui-base-color, 8%), 1px, 4px);
+
+  &__actions {
+    @include flex(center, center);
+    @include abs-position(0, 0, 0, 0);
+
+    &>div {
+      background: rgba($base-shadow-color, 0.6);
+      border-radius: 8px;
+      padding: 12px 9px;
+      flex: 0 0 auto;
+
+      @include flex(center, center);
+    }
+
+    button,
+    a {
+      display: inline;
+      color: $secondary-text-color;
+      background: transparent;
+      border: 0;
+      padding: 0 8px;
+      text-decoration: none;
+      font-size: 18px;
+      line-height: 18px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $primary-text-color;
+      }
+    }
+
+    a {
+      font-size: 19px;
+      position: relative;
+      bottom: -1px;
+    }
+  }
+
+  &__title {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: $darker-text-color;
+    text-decoration: none;
+
+    @include text-overflow(nowrap);
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding: 14px 14px 14px 8px;
+  }
+
+  &__description {
+    color: $darker-text-color;
+  }
+
+  &__host {
+    display: block;
+    margin-top: 5px;
+    font-size: 13px;
+
+    @include text-overflow(nowrap);
+  }
+
+  &__image {
+    flex: 0 0 100px;
+    background: lighten($ui-base-color, 8%);
+    position: relative;
+
+    &>.fa {
+      font-size: 21px;
+      position: absolute;
+      transform-origin: 50% 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__image-image {
+    border-radius: 4px 0 0 4px;
+    display: block;
+    margin: 0;
+    object-fit: cover;
+    background-size: cover;
+    background-position: center center;
+
+    @include size(100%);
+  }
+
+  &.horizontal {
+    display: block;
+  }
+
+  &.horizontal & {
+    &__image {
+      width: 100%;
+    }
+
+    &__image-image {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__title {
+      white-space: inherit;
+    }
+  }
+
+  &.compact {
+    border-color: lighten($ui-base-color, 4%);
+
+    &.interactive {
+      border: 0;
+    }
+  }
+
+  &.compact & {
+    &__content {
+      padding: 10px 8px 8px 8px;
+    }
+
+    &__title {
+      white-space: nowrap;
+    }
+
+    &__image {
+      flex: 0 0 60px;
+    }
+  }
+}
+
+a.status-card {
+  cursor: pointer;
+
+  &:hover {
+    background: lighten($ui-base-color, 8%);
+  }
+
+  &.compact:hover {
+    background-color: lighten($ui-base-color, 4%);
+  }
+}
+
+.status-card-photo {
+  cursor: zoom-in;
+  display: block;
+  text-decoration: none;
+  margin: 0;
+
+  @include size(100%, auto);
+}
+
+.status-card-video {
+  iframe {
+    @include size(100%);
+  }
+}

app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.scss

@@ -0,0 +1,96 @@
+.detailed-status {
+  background: lighten($ui-base-color, 4%);
+  padding: 14px 10px;
+
+  &--flex {
+    @include flex(space-between, flex-start, row, wrap);
+
+    .status__content,
+    .detailed-status__meta {
+      flex: 100%;
+    }
+  }
+
+  .status__content {
+    @include text-sizing(19px, 400, 24px);
+
+    .emojione {
+      margin: -1px 0 0;
+
+      @include size(24px);
+    }
+
+    .status__content__spoiler-link {
+      line-height: 24px;
+      margin: -1px 0 0;
+    }
+  }
+
+  .video-player {
+    margin-top: 8px;
+  }
+
+
+  &__meta {
+    margin-top: 15px;
+    color: $dark-text-color;
+
+    @include text-sizing(14px, 400, 18px);
+  }
+
+  &__datetime {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__favorites,
+  &__reblogs {
+    display: inline-block;
+    margin-left: 6px;
+
+    @include text-sizing(12px, 500);
+  }
+
+  &__display-name,
+  &__datetime,
+  &__application {
+    text-decoration: none;
+  }
+
+  &__display-name {
+    &:hover strong {
+      text-decoration: underline;
+    }
+  }
+
+  &__application,
+  &__datetime {
+    color: inherit;
+  }
+
+  &__display-name {
+    color: $secondary-text-color;
+    display: block;
+    line-height: 24px;
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    strong,
+    span {
+      display: block;
+
+      @include text-overflow;
+    }
+
+    strong {
+      font-size: 16px;
+      color: $primary-text-color;
+    }
+  }
+
+  &__display-avatar {
+    float: left;
+    margin-right: 10px;
+  }
+}

app/javascript/gabsocial/features/ui/util/reduced_motion.js

@@ -9,7 +9,7 @@ const extractValue = (value) => {
   return (typeof value === 'object' && value && 'val' in value) ? value.val : value;
 };
 
-class ReducedMotion extends Component {
+class ReducedMotion extends PureComponent {
 
   static propTypes = {
     defaultStyle: PropTypes.object,

app/javascript/gabsocial/features/video/video.scss

@@ -94,15 +94,15 @@
   }
 
   &__buttons-bar {
-    display: flex;
-    justify-content: space-between;
     padding-bottom: 10px;
+
+    @include flex(space-between);
   }
 
   &__buttons {
     font-size: 16px;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
 
     &.left {
       button {
@@ -177,13 +177,12 @@
 
     &__handle {
       z-index: 3;
-      border-radius: 50%;
       transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       pointer-events: none;
 
-      @include size(12px);
+      @include circle(12px);
       @include abs-position(auto, auto, 16px, 70px);
     }
   }
@@ -222,11 +221,11 @@
     &__progress,
     &__buffer {
       display: block;
-      position: absolute;
       height: 4px;
       border-radius: 4px;
-      top: 10px;
       background: lighten($ui-highlight-color, 8%);
+
+      @include abs-position(10px);
     }
 
     &__buffer {
@@ -234,10 +233,8 @@
     }
 
     &__handle {
-      position: absolute;
       z-index: 3;
       opacity: 0;
-      top: 6px;
       margin-left: -6px;
       transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
@@ -245,6 +242,7 @@
       pointer-events: none;
 
       @include circle(12px);
+      @include abs-position(6px);
 
       &.active {
         opacity: 1;
@@ -262,8 +260,7 @@
   &.fullscreen {
     .video-player__buttons {
       button {
-        padding-top: 10px;
+        @include vertical-padding(10px);
-        padding-bottom: 10px;
       }
     }
   }