From cbb962fd77db1a7deb79128ae777c3bc647ad089 Mon Sep 17 00:00:00 2001 From: Lorenz Diener 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 b2d943c1c6f..a4f0ca76854 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 = + info = } 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 0d41d192f2e..1766655c20f 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 }) => { -
+
-
+
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 714be309bcf..3317210bf0d 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 ( -
- +
+
} /> @@ -53,7 +51,7 @@ const ColumnSettings = React.createClass({ } />
- +
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 b63c1881ac0..f1b8ef57fac 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 ( -
- +
+
@@ -49,7 +47,7 @@ const ColumnSettings = React.createClass({
- +
@@ -57,7 +55,7 @@ const ColumnSettings = React.createClass({
- +
@@ -65,7 +63,7 @@ const ColumnSettings = React.createClass({
- +
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 c2438f716ea..eae3c2be2bd 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 }) => ( ); 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 f2d6ae48a8d..6080c9ccd81 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 ( -
+
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 901a29f5c14..2bd1e1017b2 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 334e5c1991e..4c47fb8c54b 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 = () => ( -
+
); @@ -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 =
; + leftNav =
; } if (hasRight) { - rightNav =
; + rightNav =
; } return ( diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 6c2e4575576..faad9ee58f3 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; +} +