WIP <Compose> Refactor; SCSS ed.

app/javascript/flavours/glitch/features/composer/options/index.js

@@ -236,7 +236,12 @@ export default class ComposerOptions extends React.PureComponent {
           }}
         >
           {({ scale }) => (
-            <div style={{ transform: `scale(${scale})` }}>
+            <div
+              style={{
+                display: hasMedia ? null : 'none',
+                transform: `scale(${scale})`,
+              }}
+            >
               <IconButton
                 active={sensitive}
                 className='sensitive'

app/javascript/flavours/glitch/features/composer/publisher/index.js

@@ -49,6 +49,7 @@ export default function ComposerPublisher ({
       <span class='count'>{diff}</span>
       {sideArm && sideArm !== 'none' ? (
         <Button
+          className='side_arm'
           text={
             <span>
               <Icon
@@ -67,7 +68,7 @@ export default function ComposerPublisher ({
         />
       ) : null}
       <Button
-        className='compose-form__publish__primary'
+        className='primary'
         text={function () {
           switch (true) {
           case !!sideArm && sideArm !== 'none':

app/javascript/flavours/glitch/features/composer/reply/index.js

@@ -70,24 +70,31 @@ export default class ComposerReply extends React.PureComponent {
       <article className='composer--reply'>
         <header>
           <IconButton
+            className='cancel'
             icon='times'
             onClick={click}
             title={intl.formatMessage(messages.cancel)}
           />
           {account ? (
             <a
+              className='account'
               href={account.get('url')}
               onClick={clickAccount}
             >
               <Avatar
                 account={account}
+                className='avatar'
                 size={24}
               />
-              <DisplayName account={account} />
+              <DisplayName
+                account={account}
+                className='display_name'
+              />
             </a>
           ) : null}
         </header>
         <div
+          className='content'
           dangerouslySetInnerHTML={{ __html: content || '' }}
           style={{ direction: isRtl(content) ? 'rtl' : 'ltr' }}
         />

app/javascript/flavours/glitch/features/composer/textarea/index.js

@@ -246,12 +246,13 @@ export default class ComposerTextarea extends React.Component {
 
     //  The result.
     return (
-      <div className='autosuggest-textarea'>
+      <div className='composer--textarea'>
         <label>
           <span {...hiddenComponent}><FormattedMessage {...messages.placeholder} /></span>
           <Textarea
             aria-autocomplete='list'
             autoFocus={autoFocus}
+            className='textarea'
             disabled={disabled}
             inputRef={refTextarea}
             onBlur={blur}

app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js

@@ -1,5 +1,4 @@
 //  Package imports.
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -14,10 +13,13 @@ export default function ComposerTextareaSuggestions ({
   suggestions,
   value,
 }) {
-  const computedClass = classNames('comoser--textarea--suggestions', { hidden: hidden || suggestions.isEmpty() });
 
+  //  The result.
   return (
-    <div className={computedClass}>
+    <div
+      className='composer--textarea--suggestions'
+      hidden={hidden || suggestions.isEmpty()}
+    >
       {!hidden ? suggestions.map(
         (suggestion, index) => (
           <ComposerTextareaSuggestionsItem

app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js

@@ -50,10 +50,10 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
     //  The result.
     return (
       <div
-        role='button'
-        tabIndex='0'
         className={computedClass}
         onMouseDown={click}
+        role='button'
+        tabIndex='0'
       >
         { //  If the suggestion is an object, then we render an emoji.
           //  Otherwise, we render an account.

app/javascript/flavours/glitch/features/composer/upload_form/item/index.js

@@ -139,6 +139,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
               }}
             >
               <IconButton
+                className='close'
                 icon='times'
                 onClick={remove}
                 size={36}