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 />;
@@ -72,9 +63,9 @@ const Status = React.createClass({
 
       return (
         <div style={{ cursor: 'default' }}>
-          <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}>
+          <div className='status__prepend'>
             <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet' /></div>
-            <FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong style={{ color: '#616b86'}} dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
+            <FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
           </div>
 
           <Status {...other} wrapped={true} status={status.get('reblog')} />
@@ -91,13 +82,13 @@ const Status = React.createClass({
     }
 
     return (
-      <div className={this.props.muted ? 'muted' : ''} style={outerStyle}>
+      <div className={this.props.muted ? 'status muted' : 'status'}>
         <div style={{ fontSize: '15px' }}>
           <div style={{ float: 'right', fontSize: '14px' }}>
-            <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }} target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} now={now} /></a>
+            <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
           </div>
 
-          <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#616b86' }}>
+          <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
             <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
               <Avatar src={status.getIn(['account', 'avatar'])} size={48} />
             </div>

app/assets/javascripts/components/components/status_content.jsx

@@ -5,17 +5,6 @@ import emojify from '../emoji';
 import { FormattedMessage } from 'react-intl';
 import Permalink from './permalink';
 
-const spoilerStyle = {
-  display: 'inline-block',
-  borderRadius: '2px',
-  color: '#363c4b',
-  fontWeight: '500',
-  fontSize: '11px',
-  padding: '0px 6px',
-  textTransform: 'uppercase',
-  lineHeight: 'inherit'
-};
-
 const StatusContent = React.createClass({
 
   contextTypes: {
@@ -42,7 +31,7 @@ const StatusContent = React.createClass({
     for (var i = 0; i < links.length; ++i) {
       let link    = links[i];
       let mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
-      let media   = this.props.status.get('media_attachments').find(item => link.href === item.get('text_url') || link.href === item.get('remote_url'));
+      let media   = this.props.status.get('media_attachments').find(item => link.href === item.get('text_url') || (item.get('remote_url').length > 0 && link.href === item.get('remote_url')));
 
       if (mention) {
         link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
@@ -92,7 +81,8 @@ const StatusContent = React.createClass({
     this.startXY = null;
   },
 
-  handleSpoilerClick () {
+  handleSpoilerClick (e) {
+    e.preventDefault();
     this.setState({ hidden: !this.state.hidden });
   },
 
@@ -121,7 +111,7 @@ const StatusContent = React.createClass({
       return (
         <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden && status.get('mentions').size === 0 ? '0px' : '' }} >
-            <span dangerouslySetInnerHTML={spoilerContent} />  <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a>
+            <span dangerouslySetInnerHTML={spoilerContent} />  <a className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>{toggleText}</a>
           </p>
 
           {mentionsPlaceholder}