🎨 big answering buttons for conversations in direct messages

app/javascript/mastodon/actions/conversations.js

@@ -1,9 +1,5 @@
 import api, { getLinks } from '../api';
-import {
-  importFetchedAccounts,
-  importFetchedStatuses,
-  importFetchedStatus,
-} from './importer';
+import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer';
 
 export const CONVERSATIONS_MOUNT = 'CONVERSATIONS_MOUNT';
 export const CONVERSATIONS_UNMOUNT = 'CONVERSATIONS_UNMOUNT';

app/javascript/mastodon/components/icon_button.js

@@ -38,7 +38,7 @@ export default class IconButton extends React.PureComponent {
   state = {
     activate  : false,
     deactivate: false,
-  }
+  };
 
   componentWillReceiveProps(nextProps) {
     if (!nextProps.animate) return;
@@ -56,32 +56,32 @@ export default class IconButton extends React.PureComponent {
     if (!this.props.disabled) {
       this.props.onClick(e);
     }
-  }
+  };
 
   handleKeyPress = (e) => {
     if (this.props.onKeyPress && !this.props.disabled) {
       this.props.onKeyPress(e);
     }
-  }
+  };
 
   handleMouseDown = (e) => {
     if (!this.props.disabled && this.props.onMouseDown) {
       this.props.onMouseDown(e);
     }
-  }
+  };
 
   handleKeyDown = (e) => {
     if (!this.props.disabled && this.props.onKeyDown) {
       this.props.onKeyDown(e);
     }
-  }
+  };
 
   render() {
     const style = {
-      fontSize: `${this.props.size}px`,
-      width: `${this.props.size * 1.28571429}px`,
-      height: `${this.props.size * 1.28571429}px`,
-      lineHeight: `${this.props.size}px`,
+      // fontSize: `${this.props.size}px`,
+      // width: `${this.props.size * 1.28571429}px`,
+      // height: `${this.props.size * 1.28571429}px`,
+      // lineHeight: `${this.props.size}px`,
       ...this.props.style,
       ...(this.props.active ? this.props.activeStyle : {}),
     };
@@ -128,7 +128,11 @@ export default class IconButton extends React.PureComponent {
         tabIndex={tabIndex}
         disabled={disabled}
       >
-        <Icon id={icon} fixedWidth aria-hidden='true' />
+        <Icon
+          id={icon}
+          fixedWidth
+          aria-hidden='true'
+        />
       </button >
     );
   }

app/javascript/mastodon/features/direct_timeline/components/conversation.js

@@ -227,6 +227,8 @@ class Conversation extends ImmutablePureComponent {
                   items={menu}
                   icon='ellipsis-h'
                   direction='right'
+                  style={{ width: '15em' }}
+                  size={18}
                   title={intl.formatMessage(messages.more)}
                 />
               </div >

app/javascript/styles/bliss/components.scss

@@ -406,6 +406,10 @@
     }
   }
 
+  .autosuggest-textarea__textarea {
+    margin-bottom: 5px;
+  }
+
   .autosuggest-textarea__textarea,
   .spoiler-input__input {
     display: block;

app/javascript/styles/bliss/messaging.scss

@@ -33,31 +33,28 @@ $messagingBoxHeight: 20em;
 }
 
 .conversation {
-  &.focusable {
+
+
+  .conversation__content {
+    padding-right: 0;
+  }
+
+  .conversation_reply,
+  .icon-button {
     &:hover {
+      color: $ui-highlight-color;
       background: mix($ui-base-color, $ui-secondary-color);
     }
-
-  }
-
-  .conversation_reply {
-    display: inline-block;
-    padding: 1em;
-    width: 15em;
-
-    &:hover {
-      color: $ui-highlight-color;
-    }
   }
 
+  .conversation_reply,
+  .icon-button,
   .status__action-bar-dropdown {
     display: inline-block;
-    padding: 1em;
-    width: 10em;
-
-    &:hover {
-      color: $ui-highlight-color;
-    }
+    float: right;
+    width: 18em;
+    height: 3.2em;
+    text-align: center;
   }
 }