From a816f9f297587152f0d68a950d2f10c50ee2e2d9 Mon Sep 17 00:00:00 2001
From: Stephen Burgess <stephenburgess8@gmail.com>
Date: Sun, 23 Apr 2017 07:18:58 -0500
Subject: [PATCH] fix(style): Fix regressions introduced by #2338 (#2345)

Put Column Slim Back Button classnames in order so it is positioned right and top. Add icon button style back to privacy dropdown and upload buttons so they are positioned correctly and do not wiggle. Remove abstracted style from CSS. Add missed class for the upload form thumbnail. Add the missed styles for upload form thumnail. Alphabetize styles for column-back-button. Fix fontSize typo for media-spoiler-video-play-icon.
---
 .../components/column_back_button_slim.jsx    |  2 +-
 .../compose/components/privacy_dropdown.jsx   |  7 ++++++-
 .../compose/components/upload_button.jsx      |  9 ++++++++-
 .../compose/components/upload_form.jsx        |  2 +-
 app/assets/stylesheets/components.scss        | 20 ++++++++++---------
 5 files changed, 27 insertions(+), 13 deletions(-)

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 f739b3f83d..7196900971 100644
--- a/app/assets/javascripts/components/components/column_back_button_slim.jsx
+++ b/app/assets/javascripts/components/components/column_back_button_slim.jsx
@@ -15,7 +15,7 @@ class ColumnBackButtonSlim extends React.PureComponent {
   render () {
     return (
       <div className='column-back-button--slim'>
-        <div className='column-back-button--slim-button' role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
+        <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
           <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/features/compose/components/privacy_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
index 537871bb5f..507fe7b580 100644
--- a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
+++ b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
@@ -14,6 +14,11 @@ const messages = defineMessages({
   change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' }
 });
 
+const iconStyle = {
+  height: null,
+  lineHeight: '27px'
+}
+
 class PrivacyDropdown extends React.PureComponent {
 
   constructor (props, context) {
@@ -72,7 +77,7 @@ class PrivacyDropdown extends React.PureComponent {
 
     return (
       <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
-        <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__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle}/></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/upload_button.jsx b/app/assets/javascripts/components/features/compose/components/upload_button.jsx
index 80e5a0545c..9b2de0332f 100644
--- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx
@@ -6,6 +6,12 @@ const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
 });
 
+
+const iconStyle = {
+  height: null,
+  lineHeight: '27px'
+}
+
 class UploadButton extends React.PureComponent {
 
   constructor (props, context) {
@@ -30,11 +36,12 @@ class UploadButton extends React.PureComponent {
   }
 
   render () {
+
     const { intl, resetFileKey, disabled } = this.props;
 
     return (
       <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 />
+        <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle}/>
         <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 a937cafb76..4aafe698e8 100644
--- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
@@ -18,7 +18,7 @@ class UploadForm extends React.PureComponent {
       <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})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}>
+            <div className='compose-form__upload-thumbnail' 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>
           }
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index ac9a264ee5..228c2f8ceb 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -261,6 +261,12 @@
   margin: 5px;
 }
 
+.compose-form__upload-thumbnail {
+  border-radius: 4px;
+  height: 100px;
+  width: 100%;
+}
+
 .compose-form__upload-cancel {
   background-size: cover;
   border-radius: 4px;
@@ -1347,12 +1353,12 @@ a.status__content__spoiler-link {
 }
 
 .column-back-button {
-  padding: 15px;
-  font-size: 16px;
   background: lighten($color1, 4%);
-  flex: 0 0 auto;
-  cursor: pointer;
   color: $color4;
+  cursor: pointer;
+  flex: 0 0 auto;
+  font-size: 16px;
+  padding: 15px;
   z-index: 3;
 
   &:hover {
@@ -2375,10 +2381,6 @@ 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);
@@ -3061,7 +3063,7 @@ button.icon-button.active i.fa-retweet {
 .media-spoiler-video-play-icon {
   border-radius: 100px;
   color: rgba(255, 255, 255, 0.8);
-  fontSize: 36px;
+  font-size: 36px;
   padding: 5px;
   position: absolute;
   top: 50%;