Progress on moving color styles to Sass

app/assets/javascripts/components/components/account.jsx

@@ -13,26 +13,6 @@ const messages = defineMessages({
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock' }
 });
 
-const outerStyle = {
-  padding: '10px',
-  borderBottom: '1px solid #363c4b'
-};
-
-const itemStyle = {
-  flex: '1 1 auto',
-  display: 'block',
-  color: '#9baec8',
-  overflow: 'hidden',
-  textDecoration: 'none',
-  fontSize: '14px'
-};
-
-const noteStyle = {
-  paddingTop: '5px',
-  fontSize: '12px',
-  color: '#616b86'
-};
-
 const buttonsStyle = {
   padding: '10px',
   height: '18px'
@@ -45,16 +25,9 @@ const Account = React.createClass({
     me: React.PropTypes.number.isRequired,
     onFollow: React.PropTypes.func.isRequired,
     onBlock: React.PropTypes.func.isRequired,
-    withNote: React.PropTypes.bool,
     intl: React.PropTypes.object.isRequired
   },
 
-  getDefaultProps () {
-    return {
-      withNote: false
-    };
-  },
-
   mixins: [PureRenderMixin],
 
   handleFollow () {
@@ -66,17 +39,13 @@ const Account = React.createClass({
   },
 
   render () {
-    const { account, me, withNote, intl } = this.props;
+    const { account, me, intl } = this.props;
 
     if (!account) {
       return <div />;
     }
 
-    let note, buttons;
-
-    if (account.get('note').length > 0 && withNote) {
-      note = <div style={noteStyle}>{account.get('note')}</div>;
-    }
+    let buttons;
 
     if (account.get('id') !== me && account.get('relationship', null) !== null) {
       const following = account.getIn(['relationship', 'following']);
@@ -93,9 +62,9 @@ const Account = React.createClass({
     }
 
     return (
-      <div style={outerStyle}>
+      <div className='account'>
         <div style={{ display: 'flex' }}>
-          <Permalink key={account.get('id')} style={itemStyle} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
+          <Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
             <div style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
             <DisplayName account={account} />
           </Permalink>
@@ -104,8 +73,6 @@ const Account = React.createClass({
             {buttons}
           </div>
         </div>
-
-        {note}
       </div>
     );
   }

app/assets/javascripts/components/components/button.jsx

@@ -35,7 +35,6 @@ const Button = React.createClass({
       boxSizing: 'border-box',
       textAlign: 'center',
       border: '10px none',
-      color: '#fff',
       fontSize: '14px',
       fontWeight: '500',
       letterSpacing: '0',

app/assets/javascripts/components/components/column_back_button.jsx

@@ -1,15 +1,6 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import { FormattedMessage } from 'react-intl';
 
-const outerStyle = {
-  padding: '15px',
-  fontSize: '16px',
-  background: '#2f3441',
-  flex: '0 0 auto',
-  cursor: 'pointer',
-  color: '#2b90d9'
-};
-
 const iconStyle = {
   display: 'inline-block',
   marginRight: '5px'
@@ -29,7 +20,7 @@ const ColumnBackButton = React.createClass({
 
   render () {
     return (
-      <div onClick={this.handleClick} style={outerStyle} className='column-back-button'>
+      <div onClick={this.handleClick} className='column-back-button'>
         <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </div>

app/assets/javascripts/components/components/column_back_button_slim.jsx

@@ -7,10 +7,8 @@ const outerStyle = {
   top: '-48px',
   padding: '15px',
   fontSize: '16px',
-  background: '#2f3441',
   flex: '0 0 auto',
-  cursor: 'pointer',
-  color: '#2b90d9'
+  cursor: 'pointer'
 };
 
 const iconStyle = {

app/assets/javascripts/components/components/load_more.jsx

@@ -1,15 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-const loadMoreStyle = {
-  display: 'block',
-  color: '#616b86',
-  textAlign: 'center',
-  padding: '15px',
-  textDecoration: 'none'
-};
-
 const LoadMore = ({ onClick }) => (
-  <a href='#' className='load-more' onClick={onClick} style={loadMoreStyle}>
+  <a href='#' className='load-more' onClick={onClick}>
     <FormattedMessage id='status.load_more' defaultMessage='Load more' />
   </a>
 );

app/assets/javascripts/components/components/missing_indicator.jsx

@@ -1,15 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-const style = {
-  textAlign: 'center',
-  fontSize: '16px',
-  fontWeight: '500',
-  color: '#616b86',
-  paddingTop: '120px'
-};
-
 const MissingIndicator = () => (
-  <div style={style}>
+  <div className='missing-indicator'>
     <FormattedMessage id='missing_indicator.label' defaultMessage='Not found' />
   </div>
 );

app/assets/javascripts/components/components/status.jsx

@@ -11,15 +11,6 @@ import { FormattedMessage } from 'react-intl';
 import emojify from '../emoji';
 import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
 
-const outerStyle = {
-  padding: '8px 10px',
-  paddingLeft: '68px',
-  position: 'relative',
-  minHeight: '48px',
-  borderBottom: '1px solid #363c4b',
-  cursor: 'default'
-};
-
 const Status = React.createClass({
 
   contextTypes: {
@@ -55,7 +46,7 @@ const Status = React.createClass({
 
   render () {
     let media = '';
-    const { status, now, ...other } = this.props;
+    const { status, ...other } = this.props;
 
     if (status === null) {
       return <div />;