Move more inline colours to scss

app/assets/javascripts/components/components/column_collapsable.jsx

@@ -40,10 +40,11 @@ const ColumnCollapsable = React.createClass({
   render () {
     const { icon, fullHeight, children } = this.props;
     const { collapsed } = this.state;
+    const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
     
     return (
       <div style={{ position: 'relative' }}>
-        <div style={{...iconStyle, color: collapsed ? '#9baec8' : '#fff', background: collapsed ? '#2f3441' : '#373b4a' }} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
+        <div style={{...iconStyle }} className={collapsedClassName} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
 
         <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : fullHeight, collapsed ? undefined : { stiffness: 150, damping: 9 }) }}>
           {({ opacity, height }) =>

app/assets/javascripts/components/components/loading_indicator.jsx

@@ -4,12 +4,11 @@ const style = {
   textAlign: 'center',
   fontSize: '16px',
   fontWeight: '500',
-  color: '#616b86',
   paddingTop: '120px'
 };
 
 const LoadingIndicator = () => (
-  <div style={style}>
+  <div className='loading-indicator' style={style}>
     <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
   </div>
 );

app/assets/javascripts/components/components/media_gallery.jsx

@@ -16,8 +16,6 @@ const outerStyle = {
 };
 
 const spoilerStyle = {
-  background: '#000',
-  color: '#fff',
   textAlign: 'center',
   height: '100%',
   cursor: 'pointer',
@@ -84,14 +82,14 @@ const MediaGallery = React.createClass({
     if (!this.state.visible) {
       if (sensitive) {
         children = (
-          <div style={spoilerStyle} onClick={this.handleOpen}>
+          <div style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}>
             <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>
           </div>
         );
       } else {
         children = (
-          <div style={spoilerStyle} onClick={this.handleOpen}>
+          <div style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}>
             <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>
           </div>

app/assets/javascripts/components/components/video_player.jsx

@@ -28,8 +28,6 @@ const muteStyle = {
 
 const spoilerStyle = {
   marginTop: '8px',
-  background: '#000',
-  color: '#fff',
   textAlign: 'center',
   height: '100%',
   cursor: 'pointer',
@@ -122,7 +120,7 @@ const VideoPlayer = React.createClass({
     if (!this.state.visible) {
       if (sensitive) {
         return (
-          <div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleVisibility}>
+          <div style={{...spoilerStyle, 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>
@@ -130,7 +128,7 @@ const VideoPlayer = React.createClass({
         );
       } else {
         return (
-          <div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleOpen}>
+          <div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleOpen}>
             {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>

app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx

@@ -4,8 +4,7 @@ const iconStyle = {
   position: 'absolute',
   right: '48px',
   top: '0',
-  cursor: 'pointer',
-  background: '#2f3441'
+  cursor: 'pointer'
 };
 
 const ClearColumnButton = ({ onClick }) => (

app/assets/stylesheets/components.scss

@@ -34,6 +34,7 @@
 
 .column-icon {
   color: $color3;
+  background: lighten($color1, 4%);
   
   &:hover {
     color: lighten($color3, 7%);
@@ -883,6 +884,7 @@ a.status__content__spoiler-link {
 
 .autosuggest-textarea__textarea {
   height: 100px;
+  background: $color5;
 }
 
 .autosuggest-textarea__suggestions {
@@ -1020,3 +1022,23 @@ button.active i.fa-retweet {
   font-size: 14px;
   margin: 0;
 }
+
+.loading-indicator {
+    color: #616b86;
+    color: #00FF00;
+}
+
+.collapsable-collapsed {
+    color: $color3;
+    background: lighten($color1, 4%);
+}
+
+.collapsable {
+    color: $color5;    
+    background: lighten($color1, 6%);
+}
+
+.media-spoiler {
+    background: $color8;
+    color: $color5;
+}