From c4e3be68d15c89a8ee7408e2b85d9e5549980e96 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        | 777 ++++++++++++++++--
 58 files changed, 902 insertions(+), 607 deletions(-)

diff --git a/app/assets/javascripts/components/components/account.jsx b/app/assets/javascripts/components/components/account.jsx
index 18197380ec..57c631d29c 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 90eb5b6a13..d548eeeca9 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 54f96b3a78..d1a00ac396 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 8d0e49aeed..00d80b1fd0 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 d891b6829a..70110f0aa7 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 0c753436bb..f739b3f83d 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 62b6457835..2cb4408621 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 9a6e7a9a53..d7257e0928 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 2b0929e052..fc05fcd2ad 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 e2059fc4fd..67c6513fd0 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 913a4bf997..61e0a0f153 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 ebc6e709d0..6101c2eef9 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 0ad477db7a..ccbe4944f1 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 c57ee5c893..823c7b5375 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 b452cb8cf1..7b9d7a3760 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 08370b1896..714c00951a 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 7ba8bad1d1..dc2a9509d1 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 50a69a7595..09c8ed8759 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 3aefee027c..772ea3a380 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 3ebfb7df3d..958a5206b5 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 fb8b8b287d..fd66c13e0c 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 2d21f3437e..bf6a15e5d7 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 086488649d..275b3d5a6f 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 b1e74b4de6..31d82d4d2f 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 b8e8ed5efc..c5ff8a5bdc 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 b8acf7ada6..69042d3f71 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 f4c45278ce..f3329133de 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 6a80cf7a2f..537871bb5f 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 784f082845..442ed5a35b 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 64b36a4dfe..80e5a0545c 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 f28944ad51..a937cafb76 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 a04edb97dd..8f03bb76ab 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 a194d2b274..d35a54c12b 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 3ba4c28854..2b1e3719e5 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 0e3c440a52..30b3209170 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 3fc4a683cb..f9561b937a 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 b209a9f907..81a1a0e5ba 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 44f8658e12..90b4aeb949 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 6bd5e6735c..0310fa7f24 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 41c2e7d368..30063010c7 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 dadc6696a2..34dd76bb7a 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 1c39576514..e9bca5928d 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 e4826b078c..5e56714223 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 4268e5f3d0..bc866616a3 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 7b9b202a87..6e3cfcb2ab 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 4bd3352d8d..130c3b92d6 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 8feb3b350e..1b5722b6ae 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 566eb3974a..c2fa1a3258 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 ba7c8d3edb..60f5415d60 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 e33239be76..3bd82ceeec 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 c4e6b4afa2..7ccd72e0b0 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 32fd329d41..77a9b3bd8e 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 06f6427ab4..360a759aef 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 8ed6afa6ca..02a5775005 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 7b84ef3c87..f9e173222a 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 adbab0494c..d98b42882e 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 0a3d1d148d..e1f9ff50cd 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 425f44d956..4e7309a02a 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;
-  }
+.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 {
+.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;
+}
+
+.account--panel__button,
+.detailed-status__button {
+  flex: 1 1 auto;
+  text-align: center;
 }
 
-.column-settings--outer {
+.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 */