Move more inline colours to scss

signup-info-prompt
Lorenz Diener 2017-02-10 15:35:19 +00:00
parent c424df5192
commit c9f42a7b85
6 changed files with 32 additions and 15 deletions

View File

@ -40,10 +40,11 @@ const ColumnCollapsable = React.createClass({
render () { render () {
const { icon, fullHeight, children } = this.props; const { icon, fullHeight, children } = this.props;
const { collapsed } = this.state; const { collapsed } = this.state;
const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
return ( return (
<div style={{ position: 'relative' }}> <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 }) }}> <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 }) => {({ opacity, height }) =>

View File

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

View File

@ -16,8 +16,6 @@ const outerStyle = {
}; };
const spoilerStyle = { const spoilerStyle = {
background: '#000',
color: '#fff',
textAlign: 'center', textAlign: 'center',
height: '100%', height: '100%',
cursor: 'pointer', cursor: 'pointer',
@ -84,14 +82,14 @@ const MediaGallery = React.createClass({
if (!this.state.visible) { if (!this.state.visible) {
if (sensitive) { if (sensitive) {
children = ( 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={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div> </div>
); );
} else { } else {
children = ( 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={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div> </div>

View File

@ -28,8 +28,6 @@ const muteStyle = {
const spoilerStyle = { const spoilerStyle = {
marginTop: '8px', marginTop: '8px',
background: '#000',
color: '#fff',
textAlign: 'center', textAlign: 'center',
height: '100%', height: '100%',
cursor: 'pointer', cursor: 'pointer',
@ -122,7 +120,7 @@ const VideoPlayer = React.createClass({
if (!this.state.visible) { if (!this.state.visible) {
if (sensitive) { if (sensitive) {
return ( 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} {spoilerButton}
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> <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> <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@ -130,7 +128,7 @@ const VideoPlayer = React.createClass({
); );
} else { } else {
return ( 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} {spoilerButton}
<span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span> <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> <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>

View File

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

View File

@ -34,7 +34,8 @@
.column-icon { .column-icon {
color: $color3; color: $color3;
background: lighten($color1, 4%);
&:hover { &:hover {
color: lighten($color3, 7%); color: lighten($color3, 7%);
} }
@ -883,6 +884,7 @@ a.status__content__spoiler-link {
.autosuggest-textarea__textarea { .autosuggest-textarea__textarea {
height: 100px; height: 100px;
background: $color5;
} }
.autosuggest-textarea__suggestions { .autosuggest-textarea__suggestions {
@ -1020,3 +1022,23 @@ button.active i.fa-retweet {
font-size: 14px; font-size: 14px;
margin: 0; 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;
}