diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-02-09 01:20:09 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-02-09 01:20:09 +0100 |
commit | c424df5192f346dba5332a4b3a2de43b2f028e0c (patch) | |
tree | cb31ddfb5709f9b4fbdb150b0b48681e0372ec36 /app/assets/javascripts/components/features/ui | |
parent | 942a2e7d68fc4909f3ea953e89c1b2647242b3ad (diff) |
Progress on moving color styles to Sass
Diffstat (limited to 'app/assets/javascripts/components/features/ui')
4 files changed, 8 insertions, 38 deletions
diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index 2eafe5a8f..5b0603ee9 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -29,13 +29,6 @@ const scrollTop = (node) => { }; }; -const style = { - boxSizing: 'border-box', - background: '#282c37', - display: 'flex', - flexDirection: 'column' -}; - const Column = React.createClass({ propTypes: { @@ -67,7 +60,7 @@ const Column = React.createClass({ } return ( - <div className='column' style={style} onWheel={this.handleWheel}> + <div className='column' onWheel={this.handleWheel}> {header} {children} </div> diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx index 21def69c7..8b072d723 100644 --- a/app/assets/javascripts/components/features/ui/components/column_header.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx @@ -22,7 +22,7 @@ const ColumnHeader = React.createClass({ } return ( - <div onClick={this.handleClick} style={{ padding: '15px', fontSize: '16px', background: '#2f3441', flex: '0 0 auto', cursor: 'pointer' }}> + <div className='column-header' onClick={this.handleClick}> {icon} {this.props.type} </div> diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx index 2f8a28fad..225a6a5fc 100644 --- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx +++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx @@ -1,36 +1,13 @@ import { Link } from 'react-router'; import { FormattedMessage } from 'react-intl'; -const outerStyle = { - background: '#373b4a', - flex: '0 0 auto', - overflowY: 'auto' -}; - -const tabStyle = { - display: 'block', - flex: '1 1 auto', - padding: '10px 5px', - color: '#fff', - textDecoration: 'none', - textAlign: 'center', - fontSize: '12px', - fontWeight: '500', - borderBottom: '2px solid #373b4a' -}; - -const tabActiveStyle = { - borderBottom: '2px solid #2b90d9', - color: '#2b90d9' -}; - const TabsBar = () => { return ( - <div className='tabs-bar' style={outerStyle}> - <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link> - <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link> - <Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link> - <Link style={{ ...tabStyle, flexGrow: '0', flexBasis: '30px' }} activeStyle={tabActiveStyle} to='/getting-started'><i className='fa fa-fw fa-bars' /></Link> + <div className='tabs-bar'> + <Link className='tabs-bar__link' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link> + <Link className='tabs-bar__link' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link> + <Link className='tabs-bar__link' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link> + <Link className='tabs-bar__link' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-bars' /></Link> </div> ); }; diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index da44434b1..900d83dba 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -89,7 +89,7 @@ const UI = React.createClass({ } return ( - <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}> + <div className='ui'> <TabsBar /> {mountedColumns} |