Finish up moving colors from JSX to Sass (#584, #348)

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

@@ -1,18 +1,6 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-const outerStyle = {
-  display: 'flex',
-  cursor: 'pointer',
-  fontSize: '14px',
-  border: '1px solid #363c4b',
-  borderRadius: '4px',
-  color: '#616b86',
-  marginTop: '14px',
-  textDecoration: 'none',
-  overflow: 'hidden'
-};
-
 const contentStyle = {
   flex: '1 1 auto',
   padding: '8px',
@@ -20,25 +8,6 @@ const contentStyle = {
   overflow: 'hidden'
 };
 
-const titleStyle = {
-  display: 'block',
-  fontWeight: '500',
-  marginBottom: '5px',
-  color: '#d9e1e8',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-};
-
-const descriptionStyle = {
-  color: '#d9e1e8'
-};
-
-const imageOuterStyle = {
-  flex: '0 0 100px',
-  background: '#373b4a'
-};
-
 const imageStyle = {
   display: 'block',
   width: '100%',
@@ -77,20 +46,20 @@ const Card = React.createClass({
 
     if (card.get('image')) {
       image = (
-        <div style={imageOuterStyle}>
+        <div className='status-card__image'>
           <img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
         </div>
       );
     }
 
     return (
-      <a style={outerStyle} href={card.get('url')} className='status-card'>
+      <a href={card.get('url')} className='status-card'>
         {image}
 
-        <div style={contentStyle}>
-          <strong style={titleStyle} title={card.get('title')}>{card.get('title')}</strong>
-          <p style={descriptionStyle}>{card.get('description').substring(0, 50)}</p>
-          <span style={hostStyle}>{getHostname(card.get('url'))}</span>
+        <div className='status-card__content' style={contentStyle}>
+          <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
+          <p className='status-card__description'>{card.get('description').substring(0, 50)}</p>
+          <span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span>
         </div>
       </a>
     );

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

@@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({
 
         {media}
 
-        <div style={{ marginTop: '15px', color: '#616b86', fontSize: '14px', lineHeight: '18px' }}>
+        <div className='detailed-status__meta'>
           <a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
         </div>
       </div>