From cbb962fd77db1a7deb79128ae777c3bc647ad089 Mon Sep 17 00:00:00 2001
From: Lorenz Diener <halcyon@icosahedron.website>
Date: Fri, 10 Feb 2017 16:30:06 +0000
Subject: [PATCH] Move more colours to scss

---
 .../features/account/components/header.jsx    |  2 +-
 .../components/account_authorize.jsx          |  7 +--
 .../components/column_settings.jsx            |  8 ++-
 .../components/column_settings.jsx            | 12 ++---
 .../components/setting_toggle.jsx             |  5 +-
 .../status/components/detailed_status.jsx     |  2 +-
 .../features/ui/components/column_link.jsx    |  1 -
 .../ui/containers/modal_container.jsx         |  9 ++--
 app/assets/stylesheets/components.scss        | 54 +++++++++++++++----
 9 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx
index b2d943c1c..a4f0ca768 100644
--- a/app/assets/javascripts/components/features/account/components/header.jsx
+++ b/app/assets/javascripts/components/features/account/components/header.jsx
@@ -35,7 +35,7 @@ const Header = React.createClass({
     }
 
     if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
-      info = <span style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', color: '#fff', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>
+      info = <span className='account--follows-info' style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>
     }
 
     if (me !== account.get('id')) {
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 0d41d192f..1766655c2 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
@@ -16,11 +16,8 @@ const outerStyle = {
 };
 
 const panelStyle = {
-  background: '#2f3441',
   display: 'flex',
   flexDirection: 'row',
-  borderTop: '1px solid #363c4b',
-  borderBottom: '1px solid #363c4b',
   padding: '10px 0'
 };
 
@@ -40,10 +37,10 @@ const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => {
           <DisplayName account={account} />
         </Permalink>
 
-        <div style={{ color: '#616b86', fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
+        <div style={{ fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
       </div>
 
-      <div style={panelStyle}>
+      <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>
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 714be309b..3317210bf 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,7 +10,6 @@ const messages = defineMessages({
 });
 
 const outerStyle = {
-  background: '#373b4a',
   padding: '15px'
 };
 
@@ -18,7 +17,6 @@ const sectionStyle = {
   cursor: 'default',
   display: 'block',
   fontWeight: '500',
-  color: '#9baec8',
   marginBottom: '10px'
 };
 
@@ -42,8 +40,8 @@ const ColumnSettings = React.createClass({
 
     return (
       <ColumnCollapsable icon='sliders' fullHeight={209} onCollapse={onSave}>
-        <div style={outerStyle}>
-          <span style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
+        <div className='column-settings--outer' style={outerStyle}>
+          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
 
           <div style={rowStyle}>
             <SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reblogs' />} />
@@ -53,7 +51,7 @@ const ColumnSettings = React.createClass({
             <SettingToggle settings={settings} settingKey={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
           </div>
 
-          <span style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
+          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
 
           <div style={rowStyle}>
             <SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />
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 b63c1881a..f1b8ef57f 100644
--- a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
+++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
@@ -5,7 +5,6 @@ import ColumnCollapsable from '../../../components/column_collapsable';
 import SettingToggle from './setting_toggle';
 
 const outerStyle = {
-  background: '#373b4a',
   padding: '15px'
 };
 
@@ -13,7 +12,6 @@ const sectionStyle = {
   cursor: 'default',
   display: 'block',
   fontWeight: '500',
-  color: '#9baec8',
   marginBottom: '10px'
 };
 
@@ -40,8 +38,8 @@ const ColumnSettings = React.createClass({
 
     return (
       <ColumnCollapsable icon='sliders' fullHeight={616} onCollapse={onSave}>
-        <div style={outerStyle}>
-          <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
+        <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 style={rowStyle}>
             <SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} />
@@ -49,7 +47,7 @@ const ColumnSettings = React.createClass({
             <SettingToggle settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} />
           </div>
 
-          <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
+          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
 
           <div style={rowStyle}>
             <SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
@@ -57,7 +55,7 @@ const ColumnSettings = React.createClass({
             <SettingToggle settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
           </div>
 
-          <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
+          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
 
           <div style={rowStyle}>
             <SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} />
@@ -65,7 +63,7 @@ const ColumnSettings = React.createClass({
             <SettingToggle settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} />
           </div>
 
-          <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
+          <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
 
           <div style={rowStyle}>
             <SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
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 c2438f716..eae3c2be2 100644
--- a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
+++ b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
@@ -11,14 +11,13 @@ const labelSpanStyle = {
   display: 'inline-block',
   verticalAlign: 'middle',
   marginBottom: '14px',
-  marginLeft: '8px',
-  color: '#9baec8'
+  marginLeft: '8px'
 };
 
 const SettingToggle = ({ settings, settingKey, label, onChange }) => (
   <label style={labelStyle}>
     <Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
-    <span style={labelSpanStyle}>{label}</span>
+    <span className='setting-toggle' style={labelSpanStyle}>{label}</span>
   </label>
 );
 
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 f2d6ae48a..6080c9ccd 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
@@ -52,7 +52,7 @@ const DetailedStatus = React.createClass({
     }
 
     return (
-      <div style={{ background: '#2f3441', padding: '14px 10px' }} className='detailed-status'>
+      <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'])} size={48} /></div>
           <DisplayName account={status.get('account')} />
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 901a29f5c..2bd1e1017 100644
--- a/app/assets/javascripts/components/features/ui/components/column_link.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx
@@ -4,7 +4,6 @@ const outerStyle = {
   display: 'block',
   padding: '15px',
   fontSize: '16px',
-  color: '#fff',
   textDecoration: 'none'
 };
 
diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
index 334e5c199..4c47fb8c5 100644
--- a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
@@ -41,13 +41,12 @@ const imageStyle = {
 };
 
 const loadingStyle = {
-  background: '#373b4a',
   width: '400px',
   paddingBottom: '120px'
 };
 
 const preloader = () => (
-  <div style={loadingStyle}>
+  <div className='modal-container--preloader' style={loadingStyle}>
     <LoadingIndicator />
   </div>
 );
@@ -57,7 +56,6 @@ const leftNavStyle = {
   background: 'rgba(0, 0, 0, 0.5)',
   padding: '30px 15px',
   cursor: 'pointer',
-  color: '#fff',
   fontSize: '24px',
   top: '0',
   left: '-61px',
@@ -72,7 +70,6 @@ const rightNavStyle = {
   background: 'rgba(0, 0, 0, 0.5)',
   padding: '30px 15px',
   cursor: 'pointer',
-  color: '#fff',
   fontSize: '24px',
   top: '0',
   right: '-61px',
@@ -143,11 +140,11 @@ const Modal = React.createClass({
     leftNav = rightNav = '';
 
     if (hasLeft) {
-      leftNav = <div style={leftNavStyle} onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
+      leftNav = <div style={leftNavStyle} className='modal-container--nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
     }
 
     if (hasRight) {
-      rightNav = <div style={rightNavStyle} onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
+      rightNav = <div style={rightNavStyle} className='modal-container--nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
     }
 
     return (
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 6c2e45755..faad9ee58 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -227,6 +227,8 @@ a.status__content__spoiler-link {
 }
 
 .detailed-status {
+  background: lighten($color1, 4%);
+  
   .status__content {
     font-size: 19px;
     line-height: 24px;
@@ -299,7 +301,8 @@ a.status__content__spoiler-link {
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
-
+  color: $color3;
+  
   p {
     margin-bottom: 20px;
 
@@ -852,7 +855,8 @@ a.status__content__spoiler-link {
 
 .column-link {
   background: lighten($color1, 6%);
-
+  color: $color5;
+  
   &:hover {
     background: lighten($color1, 11%);
   }
@@ -1024,21 +1028,51 @@ button.active i.fa-retweet {
 }
 
 .loading-indicator {
-    color: #616b86;
-    color: #00FF00;
+  color: $color2;
 }
 
 .collapsable-collapsed {
-    color: $color3;
-    background: lighten($color1, 4%);
+  color: $color3;
+  background: lighten($color1, 4%);
 }
 
 .collapsable {
-    color: $color5;    
-    background: lighten($color1, 6%);
+  color: $color5;    
+  background: lighten($color1, 6%);
 }
 
 .media-spoiler {
-    background: $color8;
-    color: $color5;
+  background: $color8;
+  color: $color5;
+}
+
+.modal-container--preloader {
+  background: lighten($color1, 6%);
+}
+
+.account--panel {
+  background: lighten($color1, 4%);
+  border-top: 1px solid lighten($color1, 6%);
+  border-bottom: 1px solid lighten($color1, 6%);
+}
+
+.column-settings--outer {
+  background: lighten($color1, 6%);
+}
+
+.column-settings--section {
+  color: $color3;
 }
+
+.modal-container--nav {
+  color: $color5;
+}
+
+.account--follows-info {
+  color: $color5;
+}
+
+.setting-toggle {
+  color: $color3;
+}
+