gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(night-mode): Add css classes to unsubscribe button

Browse Source 
Add class btn-toggle and remove bg-color from inactive buttons in night mode
This commit is contained in:
Markus Török
2016-12-21 09:16:45 +01:00
committed by Mrugesh Mohapatra
parent c464600867
commit e1261526d8
3 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/less/main.less
View File

@ -1151,6 +1151,12 @@ code {
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
border-color: @night-text-color; border-color: @night-text-color;
} }
.btn-toggle {
background-color: transparent;
}
.btn-toggle.active {
background-color: @brand-primary;
}
} }
//make about page contact table reponsive on small screens //make about page contact table reponsive on small screens

18
common/app/routes/settings/components/Email-Setting.jsx
View File

@ -70,7 +70,11 @@ export default function EmailSettings({
bsSize='lg' bsSize='lg'
bsStyle='primary' bsStyle='primary'
className={ className={
classnames('positive-20', { active: sendMonthlyEmail }) classnames(
'positive-20',
{ active: sendMonthlyEmail },
'btn-toggle'
)
} }
onClick={ toggleMonthlyEmail } onClick={ toggleMonthlyEmail }
> >
@ -92,7 +96,11 @@ export default function EmailSettings({
bsSize='lg' bsSize='lg'
bsStyle='primary' bsStyle='primary'
className={ className={
classnames('positive-20', { active: sendNotificationEmail }) classnames(
'positive-20',
{ active: sendNotificationEmail },
'btn-toggle'
)
} }
onClick={ toggleNotificationEmail } onClick={ toggleNotificationEmail }
> >
@ -114,7 +122,11 @@ export default function EmailSettings({
bsSize='lg' bsSize='lg'
bsStyle='primary' bsStyle='primary'
className={ className={
classnames('positive-20', { active: sendQuincyEmail }) classnames(
'positive-20',
{ active: sendQuincyEmail },
'btn-toggle'
)
} }
onClick={ toggleQuincyEmail } onClick={ toggleQuincyEmail }
> >

63
common/app/routes/settings/components/Locked-Settings.jsx
View File

@ -1,37 +1,38 @@
import React, { PropTypes } from 'react'; import React, {PropTypes} from 'react';
import { Button, Row, Col } from 'react-bootstrap'; import {Button, Row, Col} from 'react-bootstrap';
import classnames from 'classnames'; import classnames from 'classnames';
export default function LockSettings({ isLocked, toggle }) { export default function LockSettings({isLocked, toggle}) {
const className = classnames({ const className = classnames({
'positive-20': true, 'positive-20': true,
active: isLocked active: isLocked,
}); 'btn-toggle': true
return ( });
<Row> return (
<Col xs={ 9 }> <Row>
<p className='large-p'> <Col xs={ 9 }>
Make all of my solutions private <p className='large-p'>
<br /> Make all of my solutions private
(this disables your certificates) <br />
</p> (this disables your certificates)
</Col> </p>
<Col xs={ 3 }> </Col>
<Button <Col xs={ 3 }>
block={ true } <Button
bsSize='lg' block={ true }
bsStyle='primary' bsSize='lg'
className={ className } bsStyle='primary'
onClick={ toggle } className={ className }
> onClick={ toggle }
{ isLocked ? 'On' : 'Off' } >
</Button> { isLocked ? 'On' : 'Off' }
</Col> </Button>
</Row> </Col>
); </Row>
);
} }
LockSettings.propTypes = { LockSettings.propTypes = {
isLocked: PropTypes.bool, isLocked: PropTypes.bool,
toggle: PropTypes.func.isRequired toggle: PropTypes.func.isRequired
}; };