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

11 files changed, 40 insertions, 42 deletions

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 2d21f3437..bf6a15e5d 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 086488649..275b3d5a6 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 b1e74b4de..31d82d4d2 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 b8e8ed5ef..c5ff8a5bd 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 b8acf7ada..69042d3f7 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 f4c45278c..f3329133d 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 6a80cf7a2..537871bb5 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 784f08284..442ed5a35 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 64b36a4df..80e5a0545 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 f28944ad5..a937cafb7 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 a04edb97d..8f03bb76a 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'>