Progress on moving color styles to Sass

app/assets/javascripts/components/features/compose/components/compose_form.jsx

@@ -166,30 +166,30 @@ const ComposeForm = React.createClass({
           <UploadButtonContainer style={{ paddingTop: '4px' }} />
         </div>
 
-        <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #282c37', paddingTop: '10px' }}>
+        <label className='compose-form__label with-border' style={{ marginTop: '10px' }}>
           <Toggle checked={this.props.spoiler} onChange={this.handleChangeSpoilerness} />
-          <span style={{ display: 'inline-block', verticalAlign: 'top', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.spoiler' defaultMessage='Hide text behind warning' /></span>
+          <span className='compose-form__label__text'><FormattedMessage id='compose_form.spoiler' defaultMessage='Hide text behind warning' /></span>
         </label>
 
-        <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', borderTop: '1px solid #282c37', paddingTop: '10px' }}>
+        <label className='compose-form__label with-border'>
           <Toggle checked={this.props.private} onChange={this.handleChangeVisibility} />
-          <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
+          <span className='compose-form__label__text'><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
         </label>
 
         <Motion defaultStyle={{ opacity: (this.props.private || reply_to_other) ? 0 : 100, height: (this.props.private || reply_to_other) ? 39.5 : 0 }} style={{ opacity: spring((this.props.private || reply_to_other) ? 0 : 100), height: spring((this.props.private || reply_to_other) ? 0 : 39.5) }}>
           {({ opacity, height }) =>
-            <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
+            <label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
               <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} />
-              <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
+              <span className='compose-form__label__text'><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
             </label>
           }
         </Motion>
 
         <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}>
           {({ opacity, height }) =>
-            <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
+            <label className='compose-form__label' style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
               <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
-              <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark media as sensitive' /></span>
+              <span className='compose-form__label__text'><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark media as sensitive' /></span>
             </label>
           }
         </Motion>

app/assets/javascripts/components/features/compose/components/drawer.jsx

@@ -8,58 +8,25 @@ const messages = defineMessages({
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }
 });
 
-const outerStyle = {
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'hidden'
-};
-
-const innerStyle = {
-  boxSizing: 'border-box',
-  padding: '0',
-  display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'auto',
-  flexGrow: '1'
-};
-
-const tabStyle = {
-  display: 'block',
-  flex: '1 1 auto',
-  padding: '15px',
-  paddingBottom: '13px',
-  color: '#9baec8',
-  textDecoration: 'none',
-  textAlign: 'center',
-  fontSize: '16px',
-  borderBottom: '2px solid transparent'
-};
-
-const tabActiveStyle = {
-  color: '#2b90d9',
-  borderBottom: '2px solid #2b90d9'
-};
-
 const Drawer = ({ children, withHeader, intl }) => {
   let header = '';
 
   if (withHeader) {
     header = (
       <div className='drawer__header'>
-        <Link title={intl.formatMessage(messages.start)} style={tabStyle} to='/getting-started'><i className='fa fa-fw fa-asterisk' /></Link>
-        <Link title={intl.formatMessage(messages.public)} style={tabStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /></Link>
-        <a title={intl.formatMessage(messages.preferences)} style={tabStyle} href='/settings/preferences'><i className='fa fa-fw fa-cog' /></a>
-        <a title={intl.formatMessage(messages.logout)} style={tabStyle} href='/auth/sign_out' data-method='delete'><i className='fa fa-fw fa-sign-out' /></a>
+        <Link title={intl.formatMessage(messages.start)} className='drawer__tab' to='/getting-started'><i className='fa fa-fw fa-asterisk' /></Link>
+        <Link title={intl.formatMessage(messages.public)} className='drawer__tab' to='/timelines/public'><i className='fa fa-fw fa-globe' /></Link>
+        <a title={intl.formatMessage(messages.preferences)} className='drawer__tab' href='/settings/preferences'><i className='fa fa-fw fa-cog' /></a>
+        <a title={intl.formatMessage(messages.logout)} className='drawer__tab' href='/auth/sign_out' data-method='delete'><i className='fa fa-fw fa-sign-out' /></a>
       </div>
     );
   }
 
   return (
-    <div className='drawer' style={outerStyle}>
+    <div className='drawer'>
       {header}
 
-      <div className='drawer__inner' style={innerStyle}>
+      <div className='drawer__inner'>
         {children}
       </div>
     </div>

app/assets/javascripts/components/features/compose/components/navigation_bar.jsx

@@ -16,11 +16,11 @@ const NavigationBar = React.createClass({
 
   render () {
     return (
-      <div style={{ padding: '10px', display: 'flex', flexShrink: '0', cursor: 'default' }}>
+      <div className='navigation-bar'>
         <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} size={40} /></Permalink>
 
-        <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
-          <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong>
+        <div style={{ flex: '1 1 auto', marginLeft: '8px' }}>
+          <strong style={{ fontWeight: '500', display: 'block' }}>{this.props.account.get('acct')}</strong>
           <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
         </div>
       </div>

app/assets/javascripts/components/features/compose/components/reply_indicator.jsx

@@ -18,7 +18,8 @@ const ReplyIndicator = React.createClass({
 
   propTypes: {
     status: ImmutablePropTypes.map.isRequired,
-    onCancel: React.PropTypes.func.isRequired
+    onCancel: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -39,11 +40,11 @@ const ReplyIndicator = React.createClass({
     const content  = { __html: emojify(this.props.status.get('content')) };
 
     return (
-      <div style={{ background: '#9baec8', padding: '10px' }}>
+      <div className='reply-indicator'>
         <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
           <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div>
 
-          <a href={this.props.status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
+          <a href={this.props.status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
             <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>
             <DisplayName account={this.props.status.get('account')} />
           </a>

app/assets/javascripts/components/features/compose/components/search.jsx

@@ -31,25 +31,10 @@ const outerStyle = {
   position: 'relative'
 };
 
-const inputStyle = {
-  boxSizing: 'border-box',
-  display: 'block',
-  width: '100%',
-  border: 'none',
-  padding: '10px',
-  paddingRight: '30px',
-  fontFamily: 'inherit',
-  background: '#282c37',
-  color: '#9baec8',
-  fontSize: '14px',
-  margin: '0'
-};
-
 const iconStyle = {
   position: 'absolute',
   top: '18px',
   right: '20px',
-  color: '#9baec8',
   fontSize: '18px',
   pointerEvents: 'none'
 };
@@ -66,7 +51,8 @@ const Search = React.createClass({
     onChange: React.PropTypes.func.isRequired,
     onClear: React.PropTypes.func.isRequired,
     onFetch: React.PropTypes.func.isRequired,
-    onReset: React.PropTypes.func.isRequired
+    onReset: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -102,11 +88,11 @@ const Search = React.createClass({
       placeholder: this.props.intl.formatMessage(messages.placeholder),
       value: this.props.value,
       onChange: this.onChange,
-      style: inputStyle
+      className: 'search__input'
     };
 
     return (
-      <div style={outerStyle}>
+      <div className='search' style={outerStyle}>
         <Autosuggest
           multiSection={true}
           suggestions={this.props.suggestions}