Progress on moving color styles to Sass

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}