From cca41ea544fe7de3e7afdc250992a1c6e48d2a31 Mon Sep 17 00:00:00 2001
From: Stephen Burgess <stephenburgess8@gmail.com>
Date: Sat, 22 Apr 2017 21:26:55 -0500
Subject: [PATCH] Replace inline styles with CSS classes (BEM) (#2338)

* fix(classnames): Status icon style classnames

Take out inline css and put into classnames for the following components: account, avatar, icon button, status action bar, notification.

* fix(status): Move styles from inline to classes for statuses

Move styles to classnames in components.scss for the following components:

display name
media gallery
status
status content
video player

* fix(classnames): Add classnames to rest of components

Take out inline styles and apply them to classnames in the sass for the following components:

button
column back button
slim column back button
collapsable column
dropdown menu
loading indicator
status list

* fix(classnames): Remove all non-dynamic inline styles

Components affected:

autosuggested
permalink
action bar
header
character counter
compose form
emoji dropdown
privacy dropdown
reply indicator
upload form
account auth
followers
getting started
column settings
mutes
settings
reblogs
status checkbox
report
action bar
status
card
boost modal
media modal
video modal

* fix(permalink): Do not lose classname

* fix(tests): Add space back in display name

* fix(status__wrapper): Remove duplicate css name

Remove incorrect style attribute. Remove style attribute all together. Cursor defaults to "auto" when not specified as 'default'.

* fix(nl): do not lose translations
---
 .../components/components/account.jsx         |  11 +-
 .../components/autosuggest_textarea.jsx       |   5 +-
 .../components/components/avatar.jsx          |   2 +-
 .../components/components/button.jsx          |  16 +-
 .../components/column_back_button.jsx         |   7 +-
 .../components/column_back_button_slim.jsx    |  22 +-
 .../components/column_collapsable.jsx         |  14 +-
 .../components/components/display_name.jsx    |   4 +-
 .../components/components/dropdown_menu.jsx   |  12 +-
 .../components/components/icon_button.jsx     |   5 +
 .../components/loading_indicator.jsx          |   9 +-
 .../components/components/media_gallery.jsx   |  87 +-
 .../components/components/permalink.jsx       |   5 +-
 .../components/components/status.jsx          |  12 +-
 .../components/status_action_bar.jsx          |  10 +-
 .../components/components/status_content.jsx  |   6 +-
 .../components/components/status_list.jsx     |   2 +-
 .../components/components/video_player.jsx    |  92 +--
 .../account/components/action_bar.jsx         |  15 +-
 .../features/account/components/header.jsx    |   6 +-
 .../account_timeline/components/header.jsx    |   2 +-
 .../components/autosuggest_account.jsx        |   4 +-
 .../compose/components/autosuggest_status.jsx |   2 +-
 .../compose/components/character_counter.jsx  |   4 +-
 .../compose/components/compose_form.jsx       |  14 +-
 .../components/emoji_picker_dropdown.jsx      |  14 +-
 .../compose/components/navigation_bar.jsx     |   8 +-
 .../compose/components/privacy_dropdown.jsx   |   7 +-
 .../compose/components/reply_indicator.jsx    |   8 +-
 .../compose/components/upload_button.jsx      |   9 +-
 .../compose/components/upload_form.jsx        |   8 +-
 .../compose/components/upload_progress.jsx    |   4 +-
 .../components/account_authorize.jsx          |  31 +-
 .../components/features/followers/index.jsx   |   2 +-
 .../components/features/following/index.jsx   |   2 +-
 .../features/getting_started/index.jsx        |   2 +-
 .../components/column_settings.jsx            |  27 +-
 .../home_timeline/components/setting_text.jsx |  10 -
 .../components/features/mutes/index.jsx       |   3 +-
 .../components/column_settings.jsx            |  33 +-
 .../notifications/components/notification.jsx |  14 +-
 .../components/setting_toggle.jsx             |  17 +-
 .../components/features/reblogs/index.jsx     |   2 +-
 .../report/components/status_check_box.jsx    |   5 +-
 .../components/features/report/index.jsx      |  17 +-
 .../features/status/components/action_bar.jsx |   8 +-
 .../features/status/components/card.jsx       |  19 +-
 .../status/components/detailed_status.jsx     |  22 +-
 .../components/features/status/index.jsx      |   2 +-
 .../features/ui/components/boost_modal.jsx    |   8 +-
 .../features/ui/components/column_header.jsx  |   2 +-
 .../features/ui/components/column_link.jsx    |  17 +-
 .../features/ui/components/columns_area.jsx   |   8 +-
 .../features/ui/components/media_modal.jsx    |  42 +-
 .../features/ui/components/modal_root.jsx     |   2 +-
 .../features/ui/components/video_modal.jsx    |   9 +-
 .../javascripts/components/locales/nl.jsx     |   2 +-
 app/assets/stylesheets/components.scss        | 779 ++++++++++++++++--
 58 files changed, 903 insertions(+), 608 deletions(-)

diff --git a/app/assets/javascripts/components/components/account.jsx b/app/assets/javascripts/components/components/account.jsx
index 18197380ecd..57c631d29cb 100644
--- a/app/assets/javascripts/components/components/account.jsx
+++ b/app/assets/javascripts/components/components/account.jsx
@@ -14,11 +14,6 @@ const messages = defineMessages({
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute' }
 });
 
-const buttonsStyle = {
-  padding: '10px',
-  height: '18px'
-};
-
 class Account extends React.PureComponent {
 
   constructor (props, context) {
@@ -68,13 +63,13 @@ class Account extends React.PureComponent {
 
     return (
       <div className='account'>
-        <div style={{ display: 'flex' }}>
+        <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
-            <div style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div>
+            <div className='account__avatar-wrapper'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div>
             <DisplayName account={account} />
           </Permalink>
 
-          <div style={buttonsStyle}>
+          <div className='account__relationship'>
             {buttons}
           </div>
         </div>
diff --git a/app/assets/javascripts/components/components/autosuggest_textarea.jsx b/app/assets/javascripts/components/components/autosuggest_textarea.jsx
index 90eb5b6a13b..d548eeeca91 100644
--- a/app/assets/javascripts/components/components/autosuggest_textarea.jsx
+++ b/app/assets/javascripts/components/components/autosuggest_textarea.jsx
@@ -150,8 +150,7 @@ class AutosuggestTextarea extends React.Component {
   render () {
     const { value, suggestions, disabled, placeholder, onKeyUp } = this.props;
     const { suggestionsHidden, selectedSuggestion } = this.state;
-    const className = 'autosuggest-textarea__textarea';
-    const style     = { direction: 'ltr' };
+    const style = { direction: 'ltr' };
 
     if (isRtl(value)) {
       style.direction = 'rtl';
@@ -161,7 +160,7 @@ class AutosuggestTextarea extends React.Component {
       <div className='autosuggest-textarea'>
         <textarea
           ref={this.setTextarea}
-          className={className}
+          className='autosuggest-textarea__textarea'
           disabled={disabled}
           placeholder={placeholder}
           autoFocus={true}
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx
index 54f96b3a78b..d1a00ac3968 100644
--- a/app/assets/javascripts/components/components/avatar.jsx
+++ b/app/assets/javascripts/components/components/avatar.jsx
@@ -38,7 +38,7 @@ class Avatar extends React.PureComponent {
 
     return (
       <div
-        className='avatar'
+        className='account__avatar'
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx
index 8d0e49aeedf..00d80b1fd0e 100644
--- a/app/assets/javascripts/components/components/button.jsx
+++ b/app/assets/javascripts/components/components/button.jsx
@@ -15,25 +15,11 @@ class Button extends React.PureComponent {
 
   render () {
     const style = {
-      fontFamily: 'inherit',
       display: this.props.block ? 'block' : 'inline-block',
       width: this.props.block ? '100%' : 'auto',
-      position: 'relative',
-      boxSizing: 'border-box',
-      textAlign: 'center',
-      border: '10px none',
-      fontSize: '14px',
-      fontWeight: '500',
-      letterSpacing: '0',
       padding: `0 ${this.props.size / 2.25}px`,
       height: `${this.props.size}px`,
-      cursor: 'pointer',
-      lineHeight: `${this.props.size}px`,
-      borderRadius: '4px',
-      textDecoration: 'none',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden'
+      lineHeight: `${this.props.size}px`
     };
 
     return (
diff --git a/app/assets/javascripts/components/components/column_back_button.jsx b/app/assets/javascripts/components/components/column_back_button.jsx
index d891b6829a3..70110f0aa77 100644
--- a/app/assets/javascripts/components/components/column_back_button.jsx
+++ b/app/assets/javascripts/components/components/column_back_button.jsx
@@ -1,11 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const iconStyle = {
-  display: 'inline-block',
-  marginRight: '5px'
-};
-
 class ColumnBackButton extends React.PureComponent {
 
   constructor (props, context) {
@@ -21,7 +16,7 @@ class ColumnBackButton extends React.PureComponent {
   render () {
     return (
       <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
-        <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
+        <i className='fa fa-fw fa-chevron-left column-back-button__icon'/>
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </div>
     );
diff --git a/app/assets/javascripts/components/components/column_back_button_slim.jsx b/app/assets/javascripts/components/components/column_back_button_slim.jsx
index 0c753436bb8..f739b3f83de 100644
--- a/app/assets/javascripts/components/components/column_back_button_slim.jsx
+++ b/app/assets/javascripts/components/components/column_back_button_slim.jsx
@@ -1,21 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const outerStyle = {
-  position: 'absolute',
-  right: '0',
-  top: '-48px',
-  padding: '15px',
-  fontSize: '16px',
-  flex: '0 0 auto',
-  cursor: 'pointer'
-};
-
-const iconStyle = {
-  display: 'inline-block',
-  marginRight: '5px'
-};
-
 class ColumnBackButtonSlim extends React.PureComponent {
 
   constructor (props, context) {
@@ -29,15 +14,14 @@ class ColumnBackButtonSlim extends React.PureComponent {
 
   render () {
     return (
-      <div style={{ position: 'relative' }}>
-        <div role='button' tabIndex='0' style={outerStyle} onClick={this.handleClick} className='column-back-button'>
-          <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
+      <div className='column-back-button--slim'>
+        <div className='column-back-button--slim-button' role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
+          <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>
       </div>
     );
   }
-
 }
 
 ColumnBackButtonSlim.contextTypes = {
diff --git a/app/assets/javascripts/components/components/column_collapsable.jsx b/app/assets/javascripts/components/components/column_collapsable.jsx
index 62b6457835c..2cb44086216 100644
--- a/app/assets/javascripts/components/components/column_collapsable.jsx
+++ b/app/assets/javascripts/components/components/column_collapsable.jsx
@@ -1,16 +1,6 @@
 import { Motion, spring } from 'react-motion';
 import PropTypes from 'prop-types';
 
-const iconStyle = {
-  fontSize: '16px',
-  padding: '15px',
-  position: 'absolute',
-  right: '0',
-  top: '-48px',
-  cursor: 'pointer',
-  zIndex: '3'
-};
-
 class ColumnCollapsable extends React.PureComponent {
 
   constructor (props, context) {
@@ -38,8 +28,8 @@ class ColumnCollapsable extends React.PureComponent {
     const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
 
     return (
-      <div style={{ position: 'relative' }}>
-        <div role='button' tabIndex='0' title={`${title}`} style={{...iconStyle }} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}>
+      <div className='column-collapsable'>
+        <div role='button' tabIndex='0' title={`${title}`} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}>
           <i className={`fa fa-${icon}`} />
         </div>
 
diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx
index 9a6e7a9a530..d7257e09285 100644
--- a/app/assets/javascripts/components/components/display_name.jsx
+++ b/app/assets/javascripts/components/components/display_name.jsx
@@ -9,8 +9,8 @@ class DisplayName extends React.PureComponent {
     const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
 
     return (
-      <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} className='display-name'>
-        <strong style={{ fontWeight: '500' }} dangerouslySetInnerHTML={displayNameHTML} /> <span style={{ fontSize: '14px' }}>@{this.props.account.get('acct')}</span>
+      <span className='display-name'>
+        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHTML} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
       </span>
     );
   }
diff --git a/app/assets/javascripts/components/components/dropdown_menu.jsx b/app/assets/javascripts/components/components/dropdown_menu.jsx
index 2b0929e052e..fc05fcd2ad9 100644
--- a/app/assets/javascripts/components/components/dropdown_menu.jsx
+++ b/app/assets/javascripts/components/components/dropdown_menu.jsx
@@ -28,14 +28,14 @@ class DropdownMenu extends React.PureComponent {
 
   renderItem (item, i) {
     if (item === null) {
-      return <li key={i} className='dropdown__sep' />;
+      return <li key={ 'sep' + i } className='dropdown__sep' />;
     }
 
     const { text, action, href = '#' } = item;
 
     return (
-      <li key={i}>
-        <a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)}>
+      <li className='dropdown__content-list-item' key={ text + i }>
+        <a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)} className='dropdown__content-list-link'>
           {text}
         </a>
       </li>
@@ -49,11 +49,11 @@ class DropdownMenu extends React.PureComponent {
     return (
       <Dropdown ref={this.setRef}>
         <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
-          <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
+          <i className={ `fa fa-fw fa-${icon} dropdown__icon` } />
         </DropdownTrigger>
 
-        <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
-          <ul>
+        <DropdownContent className={directionClass}>
+          <ul className='dropdown__content-list'>
             {items.map(this.renderItem)}
           </ul>
         </DropdownContent>
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
index e2059fc4fd0..67c6513fd01 100644
--- a/app/assets/javascripts/components/components/icon_button.jsx
+++ b/app/assets/javascripts/components/components/icon_button.jsx
@@ -47,6 +47,10 @@ class IconButton extends React.PureComponent {
       classes.push('overlayed');
     }
 
+    if (this.props.className) {
+      classes.push(this.props.className)
+    }
+
     return (
       <Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
         {({ rotate }) =>
@@ -66,6 +70,7 @@ class IconButton extends React.PureComponent {
 }
 
 IconButton.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   onClick: PropTypes.func,
diff --git a/app/assets/javascripts/components/components/loading_indicator.jsx b/app/assets/javascripts/components/components/loading_indicator.jsx
index 913a4bf997f..61e0a0f1532 100644
--- a/app/assets/javascripts/components/components/loading_indicator.jsx
+++ b/app/assets/javascripts/components/components/loading_indicator.jsx
@@ -1,14 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-const style = {
-  textAlign: 'center',
-  fontSize: '16px',
-  fontWeight: '500',
-  paddingTop: '120px'
-};
-
 const LoadingIndicator = () => (
-  <div className='loading-indicator' style={style}>
+  <div className='loading-indicator'>
     <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
   </div>
 );
diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx
index ebc6e709d06..6101c2eef9c 100644
--- a/app/assets/javascripts/components/components/media_gallery.jsx
+++ b/app/assets/javascripts/components/components/media_gallery.jsx
@@ -8,72 +8,7 @@ const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }
 });
 
-const outerStyle = {
-  marginTop: '8px',
-  overflow: 'hidden',
-  width: '100%',
-  boxSizing: 'border-box',
-  position: 'relative'
-};
-
-const spoilerStyle = {
-  textAlign: 'center',
-  height: '100%',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column'
-};
-
-const spoilerSpanStyle = {
-  display: 'block',
-  fontSize: '14px',
-};
-
-const spoilerSubSpanStyle = {
-  display: 'block',
-  fontSize: '11px',
-  fontWeight: '500'
-};
-
-const spoilerButtonStyle = {
-  position: 'absolute',
-  top: '4px',
-  left: '4px',
-  zIndex: '100'
-};
-
-const itemStyle = {
-  boxSizing: 'border-box',
-  position: 'relative',
-  float: 'left',
-  border: 'none',
-  display: 'block'
-};
-
-const thumbStyle = {
-  display: 'block',
-  width: '100%',
-  height: '100%',
-  textDecoration: 'none',
-  backgroundSize: 'cover',
-  cursor: 'zoom-in'
-};
-
-const gifvThumbStyle = {
-  position: 'relative',
-  zIndex: '1',
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  cursor: 'zoom-in'
-};
-
 class Item extends React.PureComponent {
-
   constructor (props, context) {
     super(props, context);
     this.handleClick = this.handleClick.bind(this);
@@ -147,24 +82,26 @@ class Item extends React.PureComponent {
     if (attachment.get('type') === 'image') {
       thumbnail = (
         <a
-          href={attachment.get('remote_url') ? attachment.get('remote_url') : attachment.get('url')}
+          className='media-gallery__item-thumbnail'
+          href={attachment.get('remote_url') || attachment.get('url')}
           onClick={this.handleClick}
           target='_blank'
-          style={{ background: `url(${attachment.get('preview_url')}) no-repeat center`, ...thumbStyle }}
+          style={{ background: `url(${attachment.get('preview_url')}) no-repeat center`}}
         />
       );
     } else if (attachment.get('type') === 'gifv') {
       const autoPlay = !isIOS() && this.props.autoPlayGif;
 
       thumbnail = (
-        <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }} className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
+        <div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
           <video
+            className='media-gallery__item-gifv-thumbnail'
+            role='application'
             src={attachment.get('url')}
             onClick={this.handleClick}
             autoPlay={autoPlay}
             loop={true}
             muted={true}
-            style={gifvThumbStyle}
           />
 
           <span className='media-gallery__gifv__label'>GIF</span>
@@ -173,7 +110,7 @@ class Item extends React.PureComponent {
     }
 
     return (
-      <div key={attachment.get('id')} style={{ ...itemStyle, left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
+      <div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
         {thumbnail}
       </div>
     );
@@ -223,9 +160,9 @@ class MediaGallery extends React.PureComponent {
       }
 
       children = (
-        <div role='button' tabIndex='0' style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}>
-          <span style={spoilerSpanStyle}>{warning}</span>
-          <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+        <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
+          <span className='media-spoiler__warning'>{warning}</span>
+          <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
         </div>
       );
     } else {
@@ -234,8 +171,8 @@ class MediaGallery extends React.PureComponent {
     }
 
     return (
-      <div style={{ ...outerStyle, height: `${this.props.height}px` }}>
-        <div style={{ ...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block' }}>
+      <div className='media-gallery' style={{ height: `${this.props.height}px` }}>
+        <div className='spoiler-button' style={{ display: !this.state.visible ? 'none' : 'block' }}>
           <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
         </div>
 
diff --git a/app/assets/javascripts/components/components/permalink.jsx b/app/assets/javascripts/components/components/permalink.jsx
index 0ad477db7a3..ccbe4944f1f 100644
--- a/app/assets/javascripts/components/components/permalink.jsx
+++ b/app/assets/javascripts/components/components/permalink.jsx
@@ -15,9 +15,9 @@ class Permalink extends React.Component {
   }
 
   render () {
-    const { href, children, ...other } = this.props;
+    const { href, children, className, ...other } = this.props;
 
-    return <a href={href} onClick={this.handleClick} {...other}>{children}</a>;
+    return <a href={href} onClick={this.handleClick} {...other} className={'permalink ' + className}>{children}</a>;
   }
 
 }
@@ -27,6 +27,7 @@ Permalink.contextTypes = {
 };
 
 Permalink.propTypes = {
+  className: PropTypes.string,
   href: PropTypes.string.isRequired,
   to: PropTypes.string.isRequired,
   children: PropTypes.node
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index c57ee5c8938..823c7b5375d 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -50,9 +50,9 @@ class Status extends React.PureComponent {
       const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
 
       return (
-        <div style={{ cursor: 'default' }}>
+        <div className='status__wrapper'>
           <div className='status__prepend'>
-            <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet' /></div>
+            <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
             <FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
           </div>
 
@@ -73,13 +73,13 @@ class Status extends React.PureComponent {
 
     return (
       <div className={this.props.muted ? 'status muted' : 'status'}>
-        <div style={{ fontSize: '15px' }}>
-          <div style={{ float: 'right', fontSize: '14px' }}>
+        <div className='status__info'>
+          <div className='status__info-time'>
             <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
           </div>
 
-          <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
-            <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+          <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name'>
+            <div className='status__avatar'>
               <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />
             </div>
 
diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx
index b452cb8cf1f..7b9d7a37604 100644
--- a/app/assets/javascripts/components/components/status_action_bar.jsx
+++ b/app/assets/javascripts/components/components/status_action_bar.jsx
@@ -100,12 +100,12 @@ class StatusActionBar extends React.PureComponent {
     }
 
     return (
-      <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton title={reply_title} icon={reply_icon} onClick={this.handleReplyClick} /></div>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton disabled={status.get('visibility') === 'private' || status.get('visibility') === 'direct'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
+      <div className='status__action-bar'>
+        <div className='status__action-bar-button-wrapper'><IconButton title={reply_title} icon={reply_icon} onClick={this.handleReplyClick} /></div>
+        <div className='status__action-bar-button-wrapper'><IconButton disabled={status.get('visibility') === 'private' || status.get('visibility') === 'direct'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
+        <div className='status__action-bar-button-wrapper'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} className='star-icon' /></div>
 
-        <div style={{ width: '18px', height: '18px', float: 'left' }}>
+        <div className='status__action-bar-dropdown'>
           <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" />
         </div>
       </div>
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 08370b18962..714c00951a2 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -112,7 +112,7 @@ class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <div className='status__content' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden && status.get('mentions').size === 0 ? '0px' : '' }} >
             <span dangerouslySetInnerHTML={spoilerContent} />  <a tabIndex='0' className='status__content__spoiler-link' role='button' onClick={this.handleSpoilerClick}>{toggleText}</a>
           </p>
@@ -126,7 +126,7 @@ class StatusContent extends React.PureComponent {
       return (
         <div
           className='status__content'
-          style={{ cursor: 'pointer', ...directionStyle }}
+          style={{ ...directionStyle }}
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
           dangerouslySetInnerHTML={content}
@@ -135,7 +135,7 @@ class StatusContent extends React.PureComponent {
     } else {
       return (
         <div
-          className='status__content'
+          className='status__content status__content--no-action'
           style={{ ...directionStyle }}
           dangerouslySetInnerHTML={content}
         />
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
index 7ba8bad1d17..dc2a9509d10 100644
--- a/app/assets/javascripts/components/components/status_list.jsx
+++ b/app/assets/javascripts/components/components/status_list.jsx
@@ -79,7 +79,7 @@ class StatusList extends React.PureComponent {
         <div className='scrollable' ref={this.setRef}>
           {unread}
 
-          <div>
+          <div className='status-list'>
             {prepend}
 
             {statusIds.map((statusId) => {
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx
index 50a69a75953..09c8ed87592 100644
--- a/app/assets/javascripts/components/components/video_player.jsx
+++ b/app/assets/javascripts/components/components/video_player.jsx
@@ -11,67 +11,6 @@ const messages = defineMessages({
   expand_video: { id: 'video_player.video_error', defaultMessage: 'Video could not be played' }
 });
 
-const videoStyle = {
-  position: 'relative',
-  zIndex: '1',
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  top: '50%',
-  transform: 'translateY(-50%)'
-};
-
-const muteStyle = {
-  position: 'absolute',
-  top: '4px',
-  right: '4px',
-  color: 'white',
-  textShadow: "0px 1px 1px black, 1px 0px 1px black",
-  opacity: '0.8',
-  zIndex: '5'
-};
-
-const coverStyle = {
-  marginTop: '8px',
-  textAlign: 'center',
-  height: '100%',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  position: 'relative'
-};
-
-const spoilerSpanStyle = {
-  display: 'block',
-  fontSize: '14px'
-};
-
-const spoilerSubSpanStyle = {
-  display: 'block',
-  fontSize: '11px',
-  fontWeight: '500'
-};
-
-const spoilerButtonStyle = {
-  position: 'absolute',
-  top: '4px',
-  left: '4px',
-  color: 'white',
-  textShadow: "0px 1px 1px black, 1px 0px 1px black",
-  zIndex: '100'
-};
-
-const expandButtonStyle = {
-  position: 'absolute',
-  bottom: '4px',
-  right: '4px',
-  color: 'white',
-  textShadow: "0px 1px 1px black, 1px 0px 1px black",
-  zIndex: '100'
-};
-
 class VideoPlayer extends React.PureComponent {
 
   constructor (props, context) {
@@ -83,6 +22,7 @@ class VideoPlayer extends React.PureComponent {
       hasAudio: true,
       videoError: false
     };
+
     this.handleClick = this.handleClick.bind(this);
     this.handleVideoClick = this.handleVideoClick.bind(this);
     this.handleOpen = this.handleOpen.bind(this);
@@ -170,13 +110,13 @@ class VideoPlayer extends React.PureComponent {
     const { media, intl, width, height, sensitive, autoplay } = this.props;
 
     let spoilerButton = (
-      <div style={{...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block'}} >
+      <div className='status__video-player-spoiler' style={{ display: !this.state.visible ? 'none' : 'block' }} >
         <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
       </div>
     );
 
     let expandButton = (
-      <div style={expandButtonStyle} >
+      <div className='status__video-player-expand'>
         <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
       </div>
     );
@@ -185,7 +125,7 @@ class VideoPlayer extends React.PureComponent {
 
     if (this.state.hasAudio) {
       muteButton = (
-        <div style={muteStyle}>
+        <div className='status__video-player-mute'>
           <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
         </div>
       );
@@ -194,18 +134,18 @@ class VideoPlayer extends React.PureComponent {
     if (!this.state.visible) {
       if (sensitive) {
         return (
-          <div role='button' tabIndex='0' style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
+          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
             {spoilerButton}
-            <span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
-            <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+            <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
           </div>
         );
       } else {
         return (
-          <div role='button' tabIndex='0' style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
+          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
             {spoilerButton}
-            <span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
-            <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+            <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
           </div>
         );
       }
@@ -213,27 +153,27 @@ class VideoPlayer extends React.PureComponent {
 
     if (this.state.preview && !autoplay) {
       return (
-        <div role='button' tabIndex='0' style={{ cursor: 'pointer', position: 'relative', marginTop: '8px', width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }} onClick={this.handleOpen}>
+        <div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center` }} onClick={this.handleOpen}>
           {spoilerButton}
-          <div style={{ position: 'absolute', top: '50%', left: '50%', fontSize: '36px', transform: 'translate(-50%, -50%)', padding: '5px', borderRadius: '100px', color: 'rgba(255, 255, 255, 0.8)' }}><i className='fa fa-play' /></div>
+          <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
         </div>
       );
     }
 
     if (this.state.videoError) {
       return (
-        <div style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='video-error-cover' >
-          <span style={spoilerSpanStyle}><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
+        <div style={{ width: `${width}px`, height: `${height}px` }} className='video-error-cover' >
+          <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
         </div>
       );
     }
 
     return (
-      <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
+      <div className='status__video-player' style={{ width: `${width}px`, height: `${height}px` }}>
         {spoilerButton}
         {muteButton}
         {expandButton}
-        <video role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
+        <video className='status__video-player-video' role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} onClick={this.handleVideoClick} />
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx
index 3aefee027c6..772ea3a3806 100644
--- a/app/assets/javascripts/components/features/account/components/action_bar.jsx
+++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx
@@ -17,17 +17,6 @@ const messages = defineMessages({
   disclaimer: { id: 'account.disclaimer', defaultMessage: 'This user is from another instance. This number may be larger.' }
 });
 
-const outerDropdownStyle = {
-  padding: '10px',
-  flex: '1 1 auto'
-};
-
-const outerLinksStyle = {
-  flex: '1 1 auto',
-  display: 'flex',
-  lineHeight: '18px'
-};
-
 class ActionBar extends React.PureComponent {
 
   render () {
@@ -63,11 +52,11 @@ class ActionBar extends React.PureComponent {
 
     return (
       <div className='account__action-bar'>
-        <div style={outerDropdownStyle}>
+        <div className='account__action-bar-dropdown'>
           <DropdownMenu items={menu} icon='bars' size={24} direction="right" />
         </div>
 
-        <div style={outerLinksStyle}>
+        <div className='account__action-bar-links'>
           <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
             <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
             <strong><FormattedNumber value={account.get('statuses_count')} /> {extraInfo}</strong>
diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx
index 3ebfb7df3dd..958a5206b50 100644
--- a/app/assets/javascripts/components/features/account/components/header.jsx
+++ b/app/assets/javascripts/components/features/account/components/header.jsx
@@ -25,11 +25,11 @@ class Avatar extends React.PureComponent {
 
   constructor (props, context) {
     super(props, context);
-    
+
     this.state = {
       isHovered: false
     };
-    
+
     this.handleMouseOver = this.handleMouseOver.bind(this);
     this.handleMouseOut = this.handleMouseOut.bind(this);
   }
@@ -56,7 +56,7 @@ class Avatar extends React.PureComponent {
             className='account__header__avatar'
             target='_blank'
             rel='noopener'
-            style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden', backgroundSize: '90px 90px', backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
+            style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
             onMouseOver={this.handleMouseOver}
             onMouseOut={this.handleMouseOut}
             onFocus={this.handleMouseOver}
diff --git a/app/assets/javascripts/components/features/account_timeline/components/header.jsx b/app/assets/javascripts/components/features/account_timeline/components/header.jsx
index fb8b8b287d7..fd66c13e0c4 100644
--- a/app/assets/javascripts/components/features/account_timeline/components/header.jsx
+++ b/app/assets/javascripts/components/features/account_timeline/components/header.jsx
@@ -44,7 +44,7 @@ class Header extends React.PureComponent {
     }
 
     return (
-      <div>
+      <div className='account-timeline__header'>
         <InnerHeader
           account={account}
           me={me}
diff --git a/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx b/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx
index 2d21f3437e4..bf6a15e5d7f 100644
--- a/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx
+++ b/app/assets/javascripts/components/features/compose/components/autosuggest_account.jsx
@@ -3,8 +3,8 @@ import DisplayName from '../../../components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const AutosuggestAccount = ({ account }) => (
-  <div style={{ overflow: 'hidden' }} className='autosuggest-account'>
-    <div style={{ float: 'left', marginRight: '5px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div>
+  <div className='autosuggest-account'>
+    <div className='autosuggest-account-icon'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div>
     <DisplayName account={account} />
   </div>
 );
diff --git a/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx b/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx
index 086488649dc..275b3d5a6f4 100644
--- a/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx
+++ b/app/assets/javascripts/components/features/compose/components/autosuggest_status.jsx
@@ -3,7 +3,7 @@ import DisplayName from '../../../components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const AutosuggestStatus = ({ status }) => (
-  <div style={{ overflow: 'hidden' }} className='autosuggest-status'>
+  <div className='autosuggest-status'>
     <FormattedMessage id='search.status_by' defaultMessage='Status by {name}' values={{ name: <strong>@{status.getIn(['account', 'acct'])}</strong> }} />
   </div>
 );
diff --git a/app/assets/javascripts/components/features/compose/components/character_counter.jsx b/app/assets/javascripts/components/features/compose/components/character_counter.jsx
index b1e74b4de69..31d82d4d2fa 100644
--- a/app/assets/javascripts/components/features/compose/components/character_counter.jsx
+++ b/app/assets/javascripts/components/features/compose/components/character_counter.jsx
@@ -4,9 +4,9 @@ class CharacterCounter extends React.PureComponent {
 
   checkRemainingText (diff) {
     if (diff <= 0) {
-      return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>;
+      return <span className='character-counter character-counter--over'>{diff}</span>;
     }
-    return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>;
+    return <span className='character-counter'>{diff}</span>;
   }
 
   render () {
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
index b8e8ed5efc1..c5ff8a5bdc2 100644
--- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -137,13 +137,13 @@ class ComposeForm extends React.PureComponent {
     }
 
     if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
-      publishText = <span><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
+      publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
     } else {
       publishText = intl.formatMessage(messages.publish) + (this.props.privacy !== 'unlisted' ? '!' : '');
     }
 
     return (
-      <div style={{ padding: '10px' }}>
+      <div className='compose-form'>
         <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
           <div className="spoiler-input">
             <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type="text" className="spoiler-input__input" />
@@ -154,7 +154,7 @@ class ComposeForm extends React.PureComponent {
 
         <ReplyIndicatorContainer />
 
-        <div style={{ position: 'relative' }}>
+        <div className='compose-form__autosuggest-wrapper'>
           <AutosuggestTextarea
             ref={this.setAutosuggestTextarea}
             placeholder={intl.formatMessage(messages.placeholder)}
@@ -176,7 +176,7 @@ class ComposeForm extends React.PureComponent {
           <UploadFormContainer />
         </div>
 
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div className='compose-form__buttons-wrapper'>
           <div className='compose-form__buttons'>
             <UploadButtonContainer />
             <PrivacyDropdownContainer />
@@ -184,9 +184,9 @@ class ComposeForm extends React.PureComponent {
             <SpoilerButtonContainer />
           </div>
 
-          <div style={{ display: 'flex', minWidth: 0 }}>
-            <div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={text} /></div>
-            <div style={{ paddingTop: '10px', overflow: 'hidden' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} block /></div>
+          <div className='compose-form__publish'>
+            <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
+            <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} block /></div>
           </div>
         </div>
       </div>
diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
index b8acf7ada67..69042d3f71a 100644
--- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
@@ -22,12 +22,20 @@ const settings = {
   imagePathPNG: '/emoji/'
 };
 
-const style = {
+const dropdownStyle = {
   position: 'absolute',
   right: '5px',
   top: '5px'
 };
 
+const dropdownTriggerStyle = {
+  display: 'block',
+  fontSize: '24px',
+  lineHeight: '24px',
+  marginLeft: '2px',
+  width: '24px'
+}
+
 class EmojiPickerDropdown extends React.PureComponent {
 
   constructor (props, context) {
@@ -84,8 +92,8 @@ class EmojiPickerDropdown extends React.PureComponent {
     }
 
     return (
-      <Dropdown ref={this.setRef} style={style}>
-        <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
+      <Dropdown ref={this.setRef} style={dropdownStyle}>
+        <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={dropdownTriggerStyle}>
           <img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
         </DropdownTrigger>
 
diff --git a/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx b/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx
index f4c45278ce1..f3329133dec 100644
--- a/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx
+++ b/app/assets/javascripts/components/features/compose/components/navigation_bar.jsx
@@ -11,11 +11,11 @@ class NavigationBar extends React.PureComponent {
   render () {
     return (
       <div className='navigation-bar'>
-        <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} animate size={40} /></Permalink>
+        <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}><Avatar src={this.props.account.get('avatar')} animate size={40} /></Permalink>
 
-        <div style={{ flex: '1 1 auto', marginLeft: '8px' }}>
-          <strong style={{ fontWeight: '500', display: 'block' }}>{this.props.account.get('acct')}</strong>
-          <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+        <div className='navigation-bar__profile'>
+          <strong className='navigation-bar__profile-account'>{this.props.account.get('acct')}</strong>
+          <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
         </div>
       </div>
     );
diff --git a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
index 6a80cf7a2f7..537871bb5fc 100644
--- a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
+++ b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
@@ -14,11 +14,6 @@ const messages = defineMessages({
   change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' }
 });
 
-const iconStyle = {
-  lineHeight: '27px',
-  height: null
-};
-
 class PrivacyDropdown extends React.PureComponent {
 
   constructor (props, context) {
@@ -77,7 +72,7 @@ class PrivacyDropdown extends React.PureComponent {
 
     return (
       <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
-        <div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div>
+        <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} /></div>
         <div className='privacy-dropdown__dropdown'>
           {options.map(item =>
             <div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>
diff --git a/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx b/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx
index 784f082845c..442ed5a35b8 100644
--- a/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx
+++ b/app/assets/javascripts/components/features/compose/components/reply_indicator.jsx
@@ -40,11 +40,11 @@ class ReplyIndicator extends React.PureComponent {
 
     return (
       <div className='reply-indicator'>
-        <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
-          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div>
+        <div className='reply-indicator__header'>
+          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div>
 
-          <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
-            <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div>
+          <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name'>
+            <div className='reply-indicator__display-avatar'><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div>
             <DisplayName account={status.get('account')} />
           </a>
         </div>
diff --git a/app/assets/javascripts/components/features/compose/components/upload_button.jsx b/app/assets/javascripts/components/features/compose/components/upload_button.jsx
index 64b36a4dfe8..80e5a0545c8 100644
--- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx
@@ -6,11 +6,6 @@ const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
 });
 
-const iconStyle = {
-  lineHeight: '27px',
-  height: null
-};
-
 class UploadButton extends React.PureComponent {
 
   constructor (props, context) {
@@ -38,8 +33,8 @@ class UploadButton extends React.PureComponent {
     const { intl, resetFileKey, disabled } = this.props;
 
     return (
-      <div style={this.props.style}>
-        <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} style={iconStyle} size={18} inverted />
+      <div className='compose-form__upload-button'>
+        <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted />
         <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
       </div>
     );
diff --git a/app/assets/javascripts/components/features/compose/components/upload_form.jsx b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
index f28944ad513..a937cafb76c 100644
--- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
@@ -15,10 +15,10 @@ class UploadForm extends React.PureComponent {
     const { intl, media } = this.props;
 
     const uploads = media.map(attachment =>
-      <div key={attachment.get('id')} style={{ margin: '5px', flex: '1 1 0' }}>
+      <div className='compose-form__upload' key={attachment.get('id')}>
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) =>
-            <div style={{ transform: `translateZ(0) scale(${scale})`, width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
+            <div style={{ transform: `translateZ(0) scale(${scale})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}>
               <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
             </div>
           }
@@ -27,9 +27,9 @@ class UploadForm extends React.PureComponent {
     );
 
     return (
-      <div style={{ overflow: 'hidden' }}>
+      <div className='compose-form__upload-wrapper'>
         <UploadProgressContainer />
-        <div style={{ display: 'flex', padding: '5px' }}>{uploads}</div>
+        <div className='compose-form__uploads-wrapper'>{uploads}</div>
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/features/compose/components/upload_progress.jsx b/app/assets/javascripts/components/features/compose/components/upload_progress.jsx
index a04edb97ddf..8f03bb76ab8 100644
--- a/app/assets/javascripts/components/features/compose/components/upload_progress.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_progress.jsx
@@ -13,11 +13,11 @@ class UploadProgress extends React.PureComponent {
 
     return (
       <div className='upload-progress'>
-        <div>
+        <div className='upload-progress__icon'>
           <i className='fa fa-upload' />
         </div>
 
-        <div style={{ flex: '1 1 auto' }}>
+        <div className='upload-progress__message'>
           <FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
 
           <div className='upload-progress__backdrop'>
diff --git a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
index a194d2b2741..d35a54c12b4 100644
--- a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
+++ b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
@@ -12,38 +12,23 @@ const messages = defineMessages({
   reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }
 });
 
-const outerStyle = {
-  padding: '14px 10px'
-};
-
-const panelStyle = {
-  display: 'flex',
-  flexDirection: 'row',
-  padding: '10px 0'
-};
-
-const btnStyle = {
-  flex: '1 1 auto',
-  textAlign: 'center'
-};
-
 const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => {
   const content = { __html: emojify(account.get('note')) };
 
   return (
-    <div>
-      <div style={outerStyle}>
-        <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}>
-          <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div>
+    <div className='account-authorize__wrapper'>
+      <div className='account-authorize'>
+        <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name'>
+          <div className='account-authorize__avatar'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div>
           <DisplayName account={account} />
         </Permalink>
 
-        <div style={{ fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
+        <div className='account__header__content' dangerouslySetInnerHTML={content} />
       </div>
 
-      <div className='account--panel' style={panelStyle}>
-        <div style={btnStyle}><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
-        <div style={btnStyle}><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
+      <div className='account--panel'>
+        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
+        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
       </div>
     </div>
   )
diff --git a/app/assets/javascripts/components/features/followers/index.jsx b/app/assets/javascripts/components/features/followers/index.jsx
index 3ba4c288543..2b1e3719e58 100644
--- a/app/assets/javascripts/components/features/followers/index.jsx
+++ b/app/assets/javascripts/components/features/followers/index.jsx
@@ -68,7 +68,7 @@ class Followers extends React.PureComponent {
 
         <ScrollContainer scrollKey='followers'>
           <div className='scrollable' onScroll={this.handleScroll}>
-            <div>
+            <div className='followers'>
               <HeaderContainer accountId={this.props.params.accountId} />
               {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
               <LoadMore onClick={this.handleLoadMore} />
diff --git a/app/assets/javascripts/components/features/following/index.jsx b/app/assets/javascripts/components/features/following/index.jsx
index 0e3c440a52a..30b32091703 100644
--- a/app/assets/javascripts/components/features/following/index.jsx
+++ b/app/assets/javascripts/components/features/following/index.jsx
@@ -68,7 +68,7 @@ class Following extends React.PureComponent {
 
         <ScrollContainer scrollKey='following'>
           <div className='scrollable' onScroll={this.handleScroll}>
-            <div>
+            <div className='following'>
               <HeaderContainer accountId={this.props.params.accountId} />
               {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
               <LoadMore onClick={this.handleLoadMore} />
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index 3fc4a683cb0..f9561b937a0 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -32,7 +32,7 @@ const GettingStarted = ({ intl, me }) => {
 
   return (
     <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}>
-      <div style={{ position: 'relative' }}>
+      <div className='getting-started__wrapper'>
         <ColumnLink icon='users' hideOnMobile={true} text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />
         <ColumnLink icon='globe' hideOnMobile={true} text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />
         <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
diff --git a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx b/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx
index b209a9f9070..81a1a0e5bab 100644
--- a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx
+++ b/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx
@@ -10,21 +10,6 @@ const messages = defineMessages({
   settings: { id: 'home.settings', defaultMessage: 'Column settings' }
 });
 
-const outerStyle = {
-  padding: '15px'
-};
-
-const sectionStyle = {
-  cursor: 'default',
-  display: 'block',
-  fontWeight: '500',
-  marginBottom: '10px'
-};
-
-const rowStyle = {
-
-};
-
 class ColumnSettings extends React.PureComponent {
 
   render () {
@@ -32,20 +17,20 @@ class ColumnSettings extends React.PureComponent {
 
     return (
       <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={209} onCollapse={onSave}>
-        <div className='column-settings--outer' style={outerStyle}>
-          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
+        <div className='column-settings__outer'>
+          <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show boosts' />} />
           </div>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingToggle settings={settings} settingKey={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
           </div>
 
-          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
+          <span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />
           </div>
         </div>
diff --git a/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx b/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx
index 44f8658e128..90b4aeb949c 100644
--- a/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx
+++ b/app/assets/javascripts/components/features/home_timeline/components/setting_text.jsx
@@ -1,15 +1,6 @@
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-const style = {
-  display: 'block',
-  fontFamily: 'inherit',
-  marginBottom: '10px',
-  padding: '7px 0',
-  boxSizing: 'border-box',
-  width: '100%'
-};
-
 class SettingText extends React.PureComponent {
 
   constructor (props, context) {
@@ -26,7 +17,6 @@ class SettingText extends React.PureComponent {
 
     return (
       <input
-        style={style}
         className='setting-text'
         value={settings.getIn(settingKey)}
         onChange={this.handleChange}
diff --git a/app/assets/javascripts/components/features/mutes/index.jsx b/app/assets/javascripts/components/features/mutes/index.jsx
index 6bd5e6735cb..0310fa7f248 100644
--- a/app/assets/javascripts/components/features/mutes/index.jsx
+++ b/app/assets/javascripts/components/features/mutes/index.jsx
@@ -51,7 +51,7 @@ class Mutes extends React.PureComponent {
       <Column icon='volume-off' heading={intl.formatMessage(messages.heading)}>
         <ColumnBackButtonSlim />
         <ScrollContainer scrollKey='mutes'>
-          <div className='scrollable' onScroll={this.handleScroll}>
+          <div className='scrollable mutes' onScroll={this.handleScroll}>
             {accountIds.map(id =>
               <AccountContainer key={id} id={id} />
             )}
@@ -60,6 +60,7 @@ class Mutes extends React.PureComponent {
       </Column>
     );
   }
+
 }
 
 Mutes.propTypes = {
diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
index 41c2e7d368d..30063010c7b 100644
--- a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
+++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
@@ -8,21 +8,6 @@ const messages = defineMessages({
   settings: { id: 'notifications.settings', defaultMessage: 'Column settings' }
 });
 
-const outerStyle = {
-  padding: '15px'
-};
-
-const sectionStyle = {
-  cursor: 'default',
-  display: 'block',
-  fontWeight: '500',
-  marginBottom: '10px'
-};
-
-const rowStyle = {
-
-};
-
 class ColumnSettings extends React.PureComponent {
 
   render () {
@@ -34,34 +19,34 @@ class ColumnSettings extends React.PureComponent {
 
     return (
       <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={616} onCollapse={onSave}>
-        <div className='column-settings--outer' style={outerStyle}>
-          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
+        <div className='column-settings__outer'>
+          <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} />
             <SettingToggle settings={settings} settingKey={['shows', 'follow']} onChange={onChange} label={showStr} />
             <SettingToggle settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} />
           </div>
 
-          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
+          <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
             <SettingToggle settings={settings} settingKey={['shows', 'favourite']} onChange={onChange} label={showStr} />
             <SettingToggle settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
           </div>
 
-          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
+          <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} />
             <SettingToggle settings={settings} settingKey={['shows', 'mention']} onChange={onChange} label={showStr} />
             <SettingToggle settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} />
           </div>
 
-          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
+          <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
 
-          <div style={rowStyle}>
+          <div className='column-settings__row'>
             <SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
             <SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={showStr} />
             <SettingToggle settings={settings} settingKey={['sounds', 'reblog']} onChange={onChange} label={soundStr} />
diff --git a/app/assets/javascripts/components/features/notifications/components/notification.jsx b/app/assets/javascripts/components/features/notifications/components/notification.jsx
index dadc6696a2a..34dd76bb7a5 100644
--- a/app/assets/javascripts/components/features/notifications/components/notification.jsx
+++ b/app/assets/javascripts/components/features/notifications/components/notification.jsx
@@ -6,17 +6,13 @@ import Permalink from '../../../components/permalink';
 import emojify from '../../../emoji';
 import escapeTextContentForBrowser from 'escape-html';
 
-const linkStyle = {
-  fontWeight: '500'
-};
-
 class Notification extends React.PureComponent {
 
   renderFollow (account, link) {
     return (
       <div className='notification notification-follow'>
         <div className='notification__message'>
-          <div style={{ position: 'absolute', 'left': '-26px'}}>
+          <div className='notification__favourite-icon-wrapper'>
             <i className='fa fa-fw fa-user-plus' />
           </div>
 
@@ -36,8 +32,8 @@ class Notification extends React.PureComponent {
     return (
       <div className='notification notification-favourite'>
         <div className='notification__message'>
-          <div style={{ position: 'absolute', 'left': '-26px'}}>
-            <i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} />
+          <div className='notification__favourite-icon-wrapper'>
+            <i className='fa fa-fw fa-star star-icon'/>
           </div>
 
           <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
@@ -52,7 +48,7 @@ class Notification extends React.PureComponent {
     return (
       <div className='notification notification-reblog'>
         <div className='notification__message'>
-          <div style={{ position: 'absolute', 'left': '-26px'}}>
+          <div className='notification__favourite-icon-wrapper'>
             <i className='fa fa-fw fa-retweet' />
           </div>
 
@@ -69,7 +65,7 @@ class Notification extends React.PureComponent {
     const account          = notification.get('account');
     const displayName      = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
     const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
-    const link             = <Permalink className='notification__display-name' style={linkStyle} href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
+    const link             = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
 
     switch(notification.get('type')) {
     case 'follow':
diff --git a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
index 1c395765146..e9bca5928d2 100644
--- a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
+++ b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
@@ -2,23 +2,10 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Toggle from 'react-toggle';
 
-const labelStyle = {
-  display: 'block',
-  lineHeight: '24px',
-  verticalAlign: 'middle'
-};
-
-const labelSpanStyle = {
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  marginBottom: '14px',
-  marginLeft: '8px'
-};
-
 const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' }) => (
-  <label htmlFor={htmlFor} style={labelStyle}>
+  <label htmlFor={htmlFor} className='setting-toggle__label'>
     <Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
-    <span className='setting-toggle' style={labelSpanStyle}>{label}</span>
+    <span className='setting-toggle'>{label}</span>
   </label>
 );
 
diff --git a/app/assets/javascripts/components/features/reblogs/index.jsx b/app/assets/javascripts/components/features/reblogs/index.jsx
index e4826b078cf..5e56714223d 100644
--- a/app/assets/javascripts/components/features/reblogs/index.jsx
+++ b/app/assets/javascripts/components/features/reblogs/index.jsx
@@ -40,7 +40,7 @@ class Reblogs extends React.PureComponent {
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='reblogs'>
-          <div className='scrollable'>
+          <div className='scrollable reblogs'>
             {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
           </div>
         </ScrollContainer>
diff --git a/app/assets/javascripts/components/features/report/components/status_check_box.jsx b/app/assets/javascripts/components/features/report/components/status_check_box.jsx
index 4268e5f3d03..bc866616a37 100644
--- a/app/assets/javascripts/components/features/report/components/status_check_box.jsx
+++ b/app/assets/javascripts/components/features/report/components/status_check_box.jsx
@@ -14,14 +14,13 @@ class StatusCheckBox extends React.PureComponent {
     }
 
     return (
-      <div className='status-check-box' style={{ display: 'flex' }}>
+      <div className='status-check-box'>
         <div
           className='status__content'
-          style={{ flex: '1 1 auto', padding: '10px' }}
           dangerouslySetInnerHTML={content}
         />
 
-        <div style={{ flex: '0 0 auto', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <div className='status-check-box-toggle'>
           <Toggle checked={checked} onChange={onToggle} disabled={disabled} />
         </div>
       </div>
diff --git a/app/assets/javascripts/components/features/report/index.jsx b/app/assets/javascripts/components/features/report/index.jsx
index 7b9b202a875..6e3cfcb2abd 100644
--- a/app/assets/javascripts/components/features/report/index.jsx
+++ b/app/assets/javascripts/components/features/report/index.jsx
@@ -34,10 +34,6 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const textareaStyle = {
-  marginBottom: '10px'
-};
-
 class Report extends React.PureComponent {
 
   constructor (props, context) {
@@ -86,30 +82,29 @@ class Report extends React.PureComponent {
       <Column heading={intl.formatMessage(messages.heading)} icon='flag'>
         <ColumnBackButtonSlim />
 
-        <div className='report scrollable' style={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', boxSizing: 'border-box' }}>
-          <div className='report__target' style={{ flex: '0 0 auto', padding: '10px' }}>
+        <div className='report scrollable'>
+          <div className='report__target'>
             <FormattedMessage id='report.target' defaultMessage='Reporting' />
             <strong>{account.get('acct')}</strong>
           </div>
 
-          <div style={{ flex: '1 1 auto' }} className='scrollable'>
+          <div className='scrollable report__statuses'>
             <div>
               {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
             </div>
           </div>
 
-          <div style={{ flex: '0 0 100px', padding: '10px' }}>
+          <div className='report__textarea-wrapper'>
             <textarea
               className='report__textarea'
               placeholder={intl.formatMessage(messages.placeholder)}
               value={comment}
               onChange={this.handleCommentChange}
-              style={textareaStyle}
               disabled={isSubmitting}
             />
 
-            <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-              <div style={{ float: 'right' }}><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div>
+            <div className='report__submit'>
+              <div className='report__submit-button'><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div>
             </div>
           </div>
         </div>
diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx
index 4bd3352d8db..130c3b92d6c 100644
--- a/app/assets/javascripts/components/features/status/components/action_bar.jsx
+++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx
@@ -69,10 +69,10 @@ class ActionBar extends React.PureComponent {
 
     return (
       <div className='detailed-status__action-bar'>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton disabled={status.get('visibility') === 'direct' || status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div>
+        <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
+        <div className='detailed-status__button'><IconButton disabled={status.get('visibility') === 'direct' || status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
+        <div className='detailed-status__button'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
+        <div className='detailed-status__button'><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div>
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/features/status/components/card.jsx b/app/assets/javascripts/components/features/status/components/card.jsx
index 8feb3b350eb..1b5722b6ae7 100644
--- a/app/assets/javascripts/components/features/status/components/card.jsx
+++ b/app/assets/javascripts/components/features/status/components/card.jsx
@@ -1,20 +1,5 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-const contentStyle = {
-  flex: '1 1 auto',
-  padding: '8px',
-  paddingLeft: '14px',
-  overflow: 'hidden'
-};
-
-const imageStyle = {
-  display: 'block',
-  width: '100%',
-  height: 'auto',
-  margin: '0',
-  borderRadius: '4px 0 0 4px'
-};
-
 const hostStyle = {
   display: 'block',
   marginTop: '5px',
@@ -41,7 +26,7 @@ class Card extends React.PureComponent {
     if (card.get('image')) {
       image = (
         <div className='status-card__image'>
-          <img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
+          <img src={card.get('image')} alt={card.get('title')} className='status-card__image-image' />
         </div>
       );
     }
@@ -50,7 +35,7 @@ class Card extends React.PureComponent {
       <a href={card.get('url')} className='status-card' target='_blank' rel='noopener'>
         {image}
 
-        <div className='status-card__content' style={contentStyle}>
+        <div className='status-card__content'>
           <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
           <p className='status-card__description'>{card.get('description').substring(0, 50)}</p>
           <span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span>
diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
index 566eb3974a8..c2fa1a32585 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
@@ -45,13 +45,13 @@ class DetailedStatus extends React.PureComponent {
     }
 
     if (status.get('application')) {
-      applicationLink = <span> · <a className='detailed-status__application' style={{ color: 'inherit' }} href={status.getIn(['application', 'website'])} target='_blank' rel='nooopener'>{status.getIn(['application', 'name'])}</a></span>;
+      applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='nooopener'>{status.getIn(['application', 'name'])}</a></span>;
     }
 
     return (
-      <div style={{ padding: '14px 10px' }} className='detailed-status'>
-        <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}>
-          <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
+      <div className='detailed-status'>
+        <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
+          <div className='.detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
           <DisplayName account={status.get('account')} />
         </a>
 
@@ -60,7 +60,19 @@ class DetailedStatus extends React.PureComponent {
         {media}
 
         <div className='detailed-status__meta'>
-          <a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
+          <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
+            <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+          </a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
+            <i className='fa fa-retweet' />
+            <span className='detailed-status__reblogs'>
+              <FormattedNumber value={status.get('reblogs_count')} />
+            </span>
+          </Link> · <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
+            <i className='fa fa-star' />
+            <span className='detailed-status__favorites'>
+              <FormattedNumber value={status.get('favourites_count')} />
+            </span>
+          </Link>
         </div>
       </div>
     );
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index ba7c8d3edbd..60f5415d60d 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/app/assets/javascripts/components/features/status/index.jsx
@@ -151,7 +151,7 @@ class Status extends React.PureComponent {
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='thread'>
-          <div className='scrollable'>
+          <div className='scrollable detailed-status__wrapper'>
             {ancestors}
 
             <DetailedStatus status={status} autoPlayGif={autoPlayGif} me={me} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} />
diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx
index e33239be763..3bd82ceeec4 100644
--- a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx
@@ -40,13 +40,13 @@ class BoostModal extends React.PureComponent {
       <div className='modal-root__modal boost-modal'>
         <div className='boost-modal__container'>
           <div className='status light'>
-            <div style={{ fontSize: '15px' }}>
-              <div style={{ float: 'right', fontSize: '14px' }}>
+            <div className='boost-modal__status-header'>
+              <div className='boost-modal__status-time'>
                 <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
               </div>
 
-              <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
-                <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+              <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
+                <div className='status__avatar'>
                   <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />
                 </div>
 
diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx
index c4e6b4afa26..7ccd72e0b01 100644
--- a/app/assets/javascripts/components/features/ui/components/column_header.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx
@@ -17,7 +17,7 @@ class ColumnHeader extends React.PureComponent {
     let icon = '';
 
     if (this.props.icon) {
-      icon = <i className={`fa fa-fw fa-${this.props.icon}`} style={{ display: 'inline-block', marginRight: '5px' }} />;
+      icon = <i className={`fa fa-fw fa-${this.props.icon} column-header__icon`} />;
     }
 
     return (
diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx
index 32fd329d418..77a9b3bd8ee 100644
--- a/app/assets/javascripts/components/features/ui/components/column_link.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx
@@ -1,29 +1,18 @@
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 
-const outerStyle = {
-  padding: '15px',
-  fontSize: '16px',
-  textDecoration: 'none'
-};
-
-const iconStyle = {
-  display: 'inline-block',
-  marginRight: '5px'
-};
-
 const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
   if (href) {
     return (
       <a href={href} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}>
-        <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+        <i className={`fa fa-fw fa-${icon} column-link__icon`} />
         {text}
       </a>
     );
   } else {
     return (
-      <Link to={to} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}>
-        <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+      <Link to={to} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}>
+        <i className={`fa fa-fw fa-${icon} column-link__icon`} />
         {text}
       </Link>
     );
diff --git a/app/assets/javascripts/components/features/ui/components/columns_area.jsx b/app/assets/javascripts/components/features/ui/components/columns_area.jsx
index 06f6427ab4d..360a759aefe 100644
--- a/app/assets/javascripts/components/features/ui/components/columns_area.jsx
+++ b/app/assets/javascripts/components/features/ui/components/columns_area.jsx
@@ -1,16 +1,10 @@
 import PropTypes from 'prop-types';
 
-const style = {
-  display: 'flex',
-  flex: '1 1 auto',
-  overflowX: 'auto'
-};
-
 class ColumnsArea extends React.PureComponent {
 
   render () {
     return (
-      <div className='columns-area' style={style}>
+      <div className='columns-area'>
         {this.props.children}
       </div>
     );
diff --git a/app/assets/javascripts/components/features/ui/components/media_modal.jsx b/app/assets/javascripts/components/features/ui/components/media_modal.jsx
index 8ed6afa6ca4..02a57750053 100644
--- a/app/assets/javascripts/components/features/ui/components/media_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/media_modal.jsx
@@ -10,40 +10,6 @@ const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' }
 });
 
-const leftNavStyle = {
-  position: 'absolute',
-  background: 'rgba(0, 0, 0, 0.5)',
-  padding: '30px 15px',
-  cursor: 'pointer',
-  fontSize: '24px',
-  top: '0',
-  left: '-61px',
-  boxSizing: 'border-box',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center'
-};
-
-const rightNavStyle = {
-  position: 'absolute',
-  background: 'rgba(0, 0, 0, 0.5)',
-  padding: '30px 15px',
-  cursor: 'pointer',
-  fontSize: '24px',
-  top: '0',
-  right: '-61px',
-  boxSizing: 'border-box',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center'
-};
-
-const closeStyle = {
-  position: 'absolute',
-  top: '4px',
-  right: '4px'
-};
-
 class MediaModal extends React.PureComponent {
 
   constructor (props, context) {
@@ -99,8 +65,8 @@ class MediaModal extends React.PureComponent {
     leftNav = rightNav = content = '';
 
     if (media.size > 1) {
-      leftNav  = <div role='button' tabIndex='0' style={leftNavStyle} className='modal-container__nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
-      rightNav = <div role='button' tabIndex='0' style={rightNavStyle} className='modal-container__nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
+      leftNav  = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
+      rightNav = <div role='button' tabIndex='0' className='modal-container__nav  modal-container__nav--right' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
     }
 
     if (attachment.get('type') === 'image') {
@@ -113,8 +79,8 @@ class MediaModal extends React.PureComponent {
       <div className='modal-root__modal media-modal'>
         {leftNav}
 
-        <div>
-          <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} />
+        <div className='media-modal__content'>
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
           {content}
         </div>
 
diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx
index 7b84ef3c87c..f9e173222ad 100644
--- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx
+++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx
@@ -65,7 +65,7 @@ class ModalRoot extends React.PureComponent {
 
               return (
                 <div key={key}>
-                  <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity, transform: `translateZ(0px)` }} onClick={onClose} />
+                  <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
                   <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
                     <SpecificComponent {...props} onClose={onClose} />
                   </div>
diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
index adbab0494cc..d98b42882ed 100644
--- a/app/assets/javascripts/components/features/ui/components/video_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
@@ -9,13 +9,6 @@ const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' }
 });
 
-const closeStyle = {
-  position: 'absolute',
-  zIndex: '100',
-  top: '4px',
-  right: '4px'
-};
-
 class VideoModal extends React.PureComponent {
 
   render () {
@@ -26,7 +19,7 @@ class VideoModal extends React.PureComponent {
     return (
       <div className='modal-root__modal media-modal'>
         <div>
-          <div style={closeStyle}><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
+          <div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
           <ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} />
         </div>
       </div>
diff --git a/app/assets/javascripts/components/locales/nl.jsx b/app/assets/javascripts/components/locales/nl.jsx
index 0a3d1d148d3..e1f9ff50cd0 100644
--- a/app/assets/javascripts/components/locales/nl.jsx
+++ b/app/assets/javascripts/components/locales/nl.jsx
@@ -122,7 +122,7 @@ const nl = {
   "upload_button.label": "Media toevoegen",
   "upload_form.undo": "Ongedaan maken",
   "video_player.toggle_sound": "Geluid in-/uitschakelen",
-  
+
 };
 
 export default nl;
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 425f44d956c..4e7309a02ad 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -7,26 +7,31 @@
 
 .button {
   background-color: darken($color4, 3%);
-  font-family: inherit;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  text-align: center;
   border: 10px none;
+  border-radius: 4px;
+  box-sizing: border-box;
   color: $color5;
+  cursor: pointer;
+  display: inline-block;
+  font-family: inherit;
   font-size: 14px;
   font-weight: 500;
-  letter-spacing: 0;
-  text-transform: uppercase;
-  padding: 0 16px;
   height: 36px;
-  cursor: pointer;
+  letter-spacing: 0;
   line-height: 36px;
-  border-radius: 4px;
+  overflow: hidden;
+  padding: 0 16px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
   text-decoration: none;
+  text-overflow: ellipsis;
   transition: all 100ms ease-in;
+  white-space: nowrap;
 
-  &:hover, &:active, &:focus {
+  &:active,
+  &:focus,
+  &:hover {
     background-color: lighten($color4, 7%);
     transition: all 200ms ease-out;
   }
@@ -41,9 +46,20 @@
   }
 }
 
+.column-collapsable {
+  position: relative;
+}
+
 .column-icon {
-  color: $color3;
   background: lighten($color1, 4%);
+  color: $color3;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 15px;
+  position: absolute;
+  right: 0;
+  top: -48px;
+  z-index: 3;
 
   &:hover {
     color: lighten($color3, 7%);
@@ -178,18 +194,14 @@
   }
 }
 
-.avatar {
-  border-radius: 4px;
-  background: transparent no-repeat;
-  background-position: 50%;
-  background-clip: padding-box;
-  position: relative;
-}
-
 .lightbox .icon-button {
   color: $color1;
 }
 
+.compose-form {
+  padding: 10px;
+}
+
 .compose-form__warning {
   color: $color2;
   margin-bottom: 15px;
@@ -213,6 +225,11 @@
   border-radius: 0 0 4px 0;
 }
 
+.compose-form__buttons-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
 .compose-form__buttons {
   padding: 10px;
   background: darken($color5, 8%);
@@ -226,6 +243,31 @@
   }
 }
 
+.compose-form__upload-button-icon {
+  line-height: 27px;
+}
+
+.compose-form__upload-wrapper {
+  overflow: hidden;
+}
+
+.compose-form__uploads-wrapper {
+  display: flex;
+  padding: 5px;
+}
+
+.compose-form__upload {
+  flex: 1 1 0;
+  margin: 5px;
+}
+
+.compose-form__upload-cancel {
+  background-size: cover;
+  border-radius: 4px;
+  height: 100px;
+  width: 100px;
+}
+
 .compose-form__label {
   display: block;
   line-height: 24px;
@@ -253,6 +295,20 @@
   }
 }
 
+.compose-form__autosuggest-wrapper {
+  position: relative;
+}
+
+.compose-form__publish {
+  display: flex;
+  min-width: 0;
+}
+
+.compose-form__publish-button-wrapper {
+  overflow: hidden;
+  padding-top: 10px;
+}
+
 .emojione {
   display: inline-block;
   font-size: inherit;
@@ -272,13 +328,43 @@
   bottom: -2px;
   background: $color3;
   padding: 10px;
-
-  .reply-indicator__display-name {
-    color: $color1;
-  }
 }
 
-.status__content, .reply-indicator__content {
+.reply-indicator__header {
+  margin-bottom: 5px;
+  overflow: hidden;
+}
+
+.reply-indicator__cancel {
+  float: right;
+  line-height: 24px;
+}
+
+.reply-indicator__display-name {
+  color: $color1;
+  display: block;
+  max-width: 100%;
+  line-height: 24px;
+  overflow: hidden;
+  padding-right: 25px;
+  text-decoration: none;
+}
+
+.reply-indicator__display-avatar {
+  float: left;
+  margin-right: 5px;
+}
+
+.status__content {
+  cursor: pointer;
+}
+
+.status__content--no-action {
+  cursor: default;
+}
+
+.status__content,
+.reply-indicator__content {
   font-size: 15px;
   line-height: 20px;
   word-wrap: break-word;
@@ -347,6 +433,11 @@ a.status__content__spoiler-link {
   line-height: inherit;
 }
 
+.status__prepend-icon-wrapper {
+  left: -26px;
+  position: absolute;
+}
+
 .status {
   padding: 8px 10px;
   padding-left: 68px;
@@ -355,14 +446,6 @@ a.status__content__spoiler-link {
   border-bottom: 1px solid lighten($color1, 8%);
   cursor: default;
 
-  .status__relative-time {
-    color: lighten($color1, 26%);
-  }
-
-  .status__display-name {
-    color: lighten($color1, 26%);
-  }
-
   &.light {
     .status__relative-time {
       color: $color3;
@@ -401,14 +484,45 @@ a.status__content__spoiler-link {
   }
 }
 
+.status__relative-time {
+  color: lighten($color1, 26%);
+}
+
+.status__display-name {
+  color: lighten($color1, 26%);
+  display: block;
+  max-width: 100%;
+  padding-right: 25px;
+}
+
+.status__info {
+  font-size: 15px;
+}
+
+.status__info-time {
+  float: right;
+  font-size: 14px;
+}
+
 .status-check-box {
   border-bottom: 1px solid lighten($color1, 8%);
+  display: flex;
 
   .status__content {
     background: lighten($color1, 4%);
+    flex: 1 1 auto;
+    padding: 10px;
   }
 }
 
+.status-check-box-toggle {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  padding: 10px;
+}
+
 .status__prepend {
   margin-left: 68px;
   color: lighten($color1, 26%);
@@ -422,8 +536,25 @@ a.status__content__spoiler-link {
   }
 }
 
+.status__action-bar {
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.status__action-bar-button-wrapper {
+  float: left;
+  margin-right: 18px;
+}
+
+.status__action-bar-dropdown {
+  float: left;
+  height: 18px;
+  width: 18px;
+}
+
 .detailed-status {
   background: lighten($color1, 4%);
+  padding: 14px 10px;
 
   .status__content {
     font-size: 19px;
@@ -452,6 +583,19 @@ a.status__content__spoiler-link {
   padding: 10px 0;
 }
 
+.detailed-status__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.detailed-status__favorites,
+.detailed-status__reblogs {
+  display: inline-block;
+  font-weight: 500;
+  font-size: 12px;
+  margin-left: 6px;
+}
+
 .reply-indicator__content {
   color: $color1;
   font-size: 14px;
@@ -475,6 +619,29 @@ a.status__content__spoiler-link {
   }
 }
 
+.account__wrapper {
+  display: flex;
+}
+
+.account__avatar-wrapper {
+  float: left;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.account__avatar {
+  border-radius: 4px;
+  background: transparent no-repeat;
+  background-position: 50%;
+  background-clip: padding-box;
+  position: relative;
+}
+
+.account__relationship {
+  height: 18px;
+  padding: 10px;
+}
+
 .account__header {
   flex: 0 0 auto;
   background: lighten($color1, 4%);
@@ -501,11 +668,12 @@ a.status__content__spoiler-link {
 }
 
 .account__header__content {
-  word-wrap: break-word;
-  word-break: normal;
+  color: $color3;
+  font-size: 14px;
   font-weight: 400;
   overflow: hidden;
-  color: $color3;
+  word-break: normal;
+  word-wrap: break-word;
 
   p {
     margin-bottom: 20px;
@@ -541,6 +709,17 @@ a.status__content__spoiler-link {
   display: flex;
 }
 
+.account__action-bar-dropdown {
+  flex: 1 1 auto;
+  padding: 10px;
+}
+
+.account__action-bar-links {
+  display: flex;
+  flex: 1 1 auto;
+  line-height: 18px;
+}
+
 .account__action-bar__tab {
   text-decoration: none;
   overflow: hidden;
@@ -567,11 +746,41 @@ a.status__content__spoiler-link {
   }
 }
 
-.status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name {
+.account__header__avatar {
+  background-size: 90px 90px;
+  display: block;
+  height: 90px;
+  margin: 0 auto 10px;
+  overflow: hidden;
+  width: 90px;
+}
+
+.account-authorize {
+  padding: 14px 10px;
+
+  .detailed-status__display-name {
+    display: block;
+    margin-bottom: 15px;
+    overflow: hidden;
+  }
+}
+
+.account-authorize__avatar {
+  float: left;
+  margin-right: 10px;
+}
+
+.status__display-name,
+.status__relative-time,
+.detailed-status__display-name,
+.detailed-status__datetime,
+.detailed-status__application,
+.account__display-name {
   text-decoration: none;
 }
 
-.status__display-name, .account__display-name {
+.status__display-name,
+.account__display-name {
   strong {
     color: $color5;
   }
@@ -583,25 +792,33 @@ a.status__content__spoiler-link {
   }
 }
 
-.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name {
-  &:hover {
-    strong {
-      text-decoration: underline;
-    }
+.status__display-name,
+.reply-indicator__display-name,
+.detailed-status__display-name,
+.account__display-name {
+  &:hover strong {
+    text-decoration: underline;
   }
 }
 
-.account__display-name {
-  strong {
-    display: block;
-  }
+.account__display-name strong {
+  display: block;
+}
+
+.detailed-status__application,
+.detailed-status__datetime {
+  color: inherit;
 }
 
 .detailed-status__display-name {
   color: $color2;
+  display: block;
   line-height: 24px;
+  margin-bottom: 15px;
+  overflow: hidden;
 
-  strong, span {
+  strong,
+  span {
     display: block;
   }
 
@@ -611,8 +828,22 @@ a.status__content__spoiler-link {
   }
 }
 
+.detailed-status__display-avatar {
+  float: right;
+  margin-right: 10px;
+}
+
+.status__avatar {
+  height: 48px;
+  left: 10px;
+  position: absolute;
+  top: 10px;
+  width: 48px;
+}
+
 .muted {
-  .status__content p, .status__content a {
+  .status__content p,
+  .status__content a {
     color: lighten($color1, 26%);
   }
 
@@ -624,7 +855,7 @@ a.status__content__spoiler-link {
     opacity: 0.5;
   }
 
-  a.status__content__spoiler-link {
+  .status__content__spoiler-link {
     background: lighten($color1, 26%);
     color: lighten($color1, 4%);
 
@@ -649,8 +880,18 @@ a.status__content__spoiler-link {
   }
 }
 
+.notification__favourite-icon-wrapper {
+  left: -26px;
+  position: absolute;
+}
+
+.star-icon.active {
+  color: #ca8f04;
+}
+
 .notification__display-name {
   color: inherit;
+  font-weight: 500;
   text-decoration: none;
 
   &:hover {
@@ -659,7 +900,24 @@ a.status__content__spoiler-link {
   }
 }
 
-.status__relative-time, .detailed-status__datetime {
+.display-name {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.display-name__html {
+  font-weight: 500;
+}
+
+.display-name__account {
+  font-size: 14px;
+}
+
+.status__relative-time,
+.detailed-status__datetime {
   &:hover {
     text-decoration: underline;
   }
@@ -683,6 +941,25 @@ a.status__content__spoiler-link {
   strong {
     color: $color5;
   }
+
+  .permalink {
+    text-decoration: none;
+  }
+}
+
+.navigation-bar__profile {
+  flex: 1 1 auto;
+  margin-left: 8px;
+}
+
+.navigation-bar__profile-account {
+  display: block;
+  font-weight: 500;
+}
+
+.navigation-bar__profile-edit {
+  color: inherit;
+  text-decoration: none;
 }
 
 .dropdown {
@@ -702,6 +979,8 @@ a.status__content__spoiler-link {
 
 .dropdown--active .dropdown__content {
   display: block;
+  line-height: 18px;
+  text-align: left;
   z-index: 9999;
 
   &:before {
@@ -769,6 +1048,10 @@ a.status__content__spoiler-link {
   }
 }
 
+.dropdown__icon {
+  vertical-align: middle;
+}
+
 .static-content {
   padding: 10px;
   padding-top: 20px;
@@ -788,8 +1071,11 @@ a.status__content__spoiler-link {
 }
 
 .columns-area {
+  display: flex;
+  flex: 1 1 auto;
   flex-direction: row;
   justify-content: flex-start;
+  overflow-x: auto;
 }
 
 @media screen and (min-width: 360px) {
@@ -1074,6 +1360,25 @@ a.status__content__spoiler-link {
   }
 }
 
+.column-back-button__icon {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.column-back-button--slim {
+  position: relative;
+}
+
+.column-back-button--slim-button {
+  cursor: pointer;
+  flex: 0 0 auto;
+  font-size: 16px;
+  padding: 15px;
+  position: absolute;
+  right: 0;
+  top: -48px;
+}
+
 .react-toggle {
   display: inline-block;
   position: relative;
@@ -1184,6 +1489,9 @@ a.status__content__spoiler-link {
   background: lighten($color1, 8%);
   color: $color5;
   display: block;
+  font-size: 16px;
+  padding: 15px;
+  text-decoration: none;
 
   &:hover {
     background: lighten($color1, 11%);
@@ -1196,11 +1504,18 @@ a.status__content__spoiler-link {
   }
 }
 
-.autosuggest-textarea, .spoiler-input {
+.column-link__icon {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.autosuggest-textarea,
+.spoiler-input {
   position: relative;
 }
 
-.autosuggest-textarea__textarea, .spoiler-input__input {
+.autosuggest-textarea__textarea,
+.spoiler-input__input {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -1265,6 +1580,44 @@ a.status__content__spoiler-link {
   }
 }
 
+.autosuggest-account {
+  overflow: hidden;
+}
+
+.autosuggest-account-icon {
+  float: left;
+  margin-right: 5px;
+}
+
+.autosuggest-status {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
+.character-counter__wrapper {
+  line-height: 36px;
+  margin-right: 16px;
+  padding-top: 10px;
+}
+
+.character-counter {
+  cursor: default; 
+  font-size: 16px;
+}
+
+.character-counter--over {
+  color: #ff5050;
+}
+
+.getting-started__wrapper {
+  position: relative;
+}
+
 .getting-started {
   box-sizing: border-box;
   padding-bottom: 235px;
@@ -1285,6 +1638,12 @@ a.status__content__spoiler-link {
   background: transparent;
   border: none;
   border-bottom: 2px solid $color3;
+  box-sizing: border-box;
+  display: block;
+  font-family: inherit;
+  margin-bottom: 10px;
+  padding: 7px 0px;
+  width: 100%;
 
   &:focus, &:active {
     color: $color5;
@@ -1295,7 +1654,7 @@ a.status__content__spoiler-link {
     font-size: 16px;
   }
 }
-
+    
 @import 'boost';
 
 button.icon-button i.fa-retweet {
@@ -1341,6 +1700,12 @@ button.icon-button.active i.fa-retweet {
   white-space: nowrap;
 }
 
+.status-card__content {
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding: 14px 14px 14px 8px;
+}
+
 .status-card__description {
   color: $color3;
 }
@@ -1350,6 +1715,14 @@ button.icon-button.active i.fa-retweet {
   background: lighten($color1, 8%);
 }
 
+.status-card__image-image {
+  border-radius: 4px 0px 0px 4px;
+  display: block;
+  height: auto;
+  margin: 0;
+  width: 100%;
+}
+
 .load-more {
   display: block;
   color: lighten($color1, 26%);
@@ -1397,8 +1770,17 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.column-header__icon {
+  display: inline-block;
+  margin-right: 5px;
+}
+
 .loading-indicator {
   color: $color2;
+  font-size: 16px;
+  font-weight: 500;
+  padding-top: 120px;
+  text-align: center;
 }
 
 .collapsable-collapsed {
@@ -1416,9 +1798,37 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.media-spoiler, .video-error-cover {
+.media-spoiler,
+.video-error-cover {
+  align-items: center;
   background: $color8;
   color: $color5;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  margin-top: 8px;
+  position: relative;
+  text-align: center;
+  z-index: 100;
+}
+
+.media-spoiler__warning {
+  display: block;
+  font-size: 14px;
+}
+
+.media-spoiler__trigger {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.spoiler-button {
+  left: 4px;
+  position: absolute;
+  top: 4px;
 }
 
 .modal-container--preloader {
@@ -1429,32 +1839,82 @@ button.icon-button.active i.fa-retweet {
   background: lighten($color1, 4%);
   border-top: 1px solid lighten($color1, 8%);
   border-bottom: 1px solid lighten($color1, 8%);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0px;
 }
 
-.column-settings--outer {
+.account--panel__button,
+.detailed-status__button {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.column-settings__outer {
   background: lighten($color1, 8%);
+  padding: 15px;
 }
 
-.column-settings--section {
+.column-settings__section {
   color: $color3;
+  cursor: default;
+  display: block;
+  font-weight: 500;
+  margin-bottom: 10px;
 }
 
 .modal-container__nav {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
   color: $color5;
+  cursor: pointer;
+  display: flex;
+  font-size: 24px;
+  height: 100%;
+  padding: 30px 15px;
+  position: absolute;
+  top: 0;
+}
+
+.modal-container__nav--left {
+  left: -61px;
+}
+
+.modal-container__nav--right {
+  right: -61px;
 }
 
 .account--follows-info {
   color: $color5;
 }
 
+.setting-toggle__label {
+  display: block;
+  line-height: 24px;
+  vertical-align: middle;
+}
+
 .setting-toggle {
   color: $color3;
+  display: inline-block;
+  margin-bottom: 14px;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+
+.report.scrollable {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
 }
 
 .report__target {
   border-bottom: 1px solid lighten($color1, 4%);
   color: $color2;
-  padding-bottom: 10px;
+  flex: 0 0 auto;
+  padding: 10px;
 
   strong {
     display: block;
@@ -1463,20 +1923,30 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.report__statuses {
+  flex: 1 1 auto;
+}
+
+.report__textarea-wrapper {
+  flex: 0 0 100px;
+  padding: 10px;
+}
+
 .report__textarea {
   background: transparent;
   box-sizing: border-box;
   border: 0;
   border-bottom: 2px solid $color3;
   border-radius: 2px 2px 0 0;
-  padding: 7px 4px;
-  font-size: 14px;
   color: $color5;
   display: block;
-  width: 100%;
-  outline: 0;
   font-family: inherit;
+  font-size: 14px;
+  margin-bottom: 10px;
+  outline: 0;
+  padding: 7px 4px;
   resize: vertical;
+  width: 100%;
 
   &:active, &:focus {
     border-bottom-color: $color4;
@@ -1484,6 +1954,15 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.report__submit {
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.report__submit-button {
+  float: right;
+}
+
 .empty-column-indicator {
   color: lighten($color1, 20%);
   background: $color1;
@@ -1708,28 +2187,18 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.autosuggest-status {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  strong {
-    font-weight: 500;
-  }
-}
-
 .upload-area {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  visibility: hidden;
+  align-items: center;
   background: rgba($color8, 0.8);
   display: flex;
-  align-items: center;
+  height: 100%;
   justify-content: center;
+  left: 0;
   opacity: 0;
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
   z-index: 2000;
 
   * {
@@ -1789,6 +2258,10 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.upload-progess__message {
+  flex: 1 1 auto;
+}
+
 .upload-progress__backdrop {
   width: 100%;
   height: 6px;
@@ -1902,6 +2375,10 @@ button.icon-button.active i.fa-retweet {
     box-shadow: 0 -4px 4px rgba($color8, 0.1);
   }
 
+  .privacy-dropdown__value-icon {
+    line-height: 27px;
+  }
+
   .privacy-dropdown__dropdown {
     display: block;
     box-shadow: 2px 4px 6px rgba($color8, 0.1);
@@ -2021,6 +2498,7 @@ button.icon-button.active i.fa-retweet {
   z-index: 9999;
   opacity: 0;
   background: rgba($color8, 0.7);
+  transform: translateZ(0px);
 }
 
 .modal-root__container {
@@ -2057,6 +2535,13 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.media-modal__close {
+  position: absolute;
+  right: 4;
+  top: 4;
+  z-index: 100;
+}
+
 .onboarding-modal {
   background: $color2;
   color: $color1;
@@ -2297,6 +2782,20 @@ button.icon-button.active i.fa-retweet {
   width: 480px;
   position: relative;
   flex-direction: column;
+
+  .status__display-name {
+    display: block;
+    max-width: 100%;
+    padding-right: 25px;
+  }
+
+  .status__avatar {
+    height: 28px;
+    left: 10px;
+    position: absolute;
+    top: 10px;
+    width: 48px;
+  }
 }
 
 .boost-modal__container {
@@ -2327,6 +2826,15 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.boost-modal__status-header {
+  font-size: 15px;
+}
+
+.boost-modal__status-time {
+  float: right;
+  font-size: 14px;
+}
+
 .loading-bar {
   background-color: $color4;
   height: 3px;
@@ -2415,3 +2923,116 @@ button.icon-button.active i.fa-retweet {
     }
   }
 }
+
+/* Media Gallery */
+.media-gallery {
+  box-sizing: border-box;
+  margin-top: 8px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.media-gallery__item {
+  border: none;
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  position: relative;
+}
+
+.media-gallery__item-thumbnail {
+  background-size: cover;
+  cursor: zoom-in;
+  display: block;
+  height: 100%;
+  text-decoration: none;
+  width: 100%;
+}
+
+.media-gallery__gifv {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.media-gallery__item-gifv-thumbnail {
+  cursor: zoom-in;
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  z-index: 1;
+}
+
+.media-gallery__item-thumbnail-label {
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+}
+/* End Media Gallery */
+
+/* Status Video Player */
+.status__video-player {
+  background: #000;
+  box-sizing: border-box;
+  cursor: default; /* May not be needed */
+  margin-top: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.status__video-player-video {
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  z-index: 1;
+}
+
+.status__video-player-expand,
+.status__video-player-mute {
+  color: #fff;
+  opacity: 0.8;
+  position: absolute;
+  right: 4px;
+  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+  top: 4px;
+}
+
+.status__video-player-spoiler {
+  color: #fff;
+  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+}
+
+.status__video-player-expand {
+  z-index: 100;
+}
+
+.status__video-player-mute {
+  z-index: 5;
+}
+
+.media-spoiler-video {
+  background-size: cover;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+}
+
+.media-spoiler-video-play-icon {
+  border-radius: 100px;
+  color: rgba(255, 255, 255, 0.8);
+  fontSize: 36px;
+  padding: 5px;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+/* End Video Player */