🎨 big answering buttons for conversations in direct messages

app/javascript/mastodon/actions/conversations.js

@@ -1,23 +1,19 @@
 import api, { getLinks } from '../api';
-import {
+import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer';
-  importFetchedAccounts,
-  importFetchedStatuses,
-  importFetchedStatus,
-} from './importer';
 
-export const CONVERSATIONS_MOUNT   = 'CONVERSATIONS_MOUNT';
+export const CONVERSATIONS_MOUNT = 'CONVERSATIONS_MOUNT';
 export const CONVERSATIONS_UNMOUNT = 'CONVERSATIONS_UNMOUNT';
 
 export const CONVERSATIONS_FETCH_REQUEST = 'CONVERSATIONS_FETCH_REQUEST';
 export const CONVERSATIONS_FETCH_SUCCESS = 'CONVERSATIONS_FETCH_SUCCESS';
-export const CONVERSATIONS_FETCH_FAIL    = 'CONVERSATIONS_FETCH_FAIL';
+export const CONVERSATIONS_FETCH_FAIL = 'CONVERSATIONS_FETCH_FAIL';
-export const CONVERSATIONS_UPDATE        = 'CONVERSATIONS_UPDATE';
+export const CONVERSATIONS_UPDATE = 'CONVERSATIONS_UPDATE';
 
 export const CONVERSATIONS_READ = 'CONVERSATIONS_READ';
 
 export const CONVERSATIONS_DELETE_REQUEST = 'CONVERSATIONS_DELETE_REQUEST';
 export const CONVERSATIONS_DELETE_SUCCESS = 'CONVERSATIONS_DELETE_SUCCESS';
-export const CONVERSATIONS_DELETE_FAIL    = 'CONVERSATIONS_DELETE_FAIL';
+export const CONVERSATIONS_DELETE_FAIL = 'CONVERSATIONS_DELETE_FAIL';
 
 export const mountConversations = () => ({
   type: CONVERSATIONS_MOUNT,
@@ -30,7 +26,7 @@ export const unmountConversations = () => ({
 export const markConversationRead = conversationId => (dispatch, getState) => {
   dispatch({
     type: CONVERSATIONS_READ,
-    id: conversationId,
+    id  : conversationId,
   });
 
   api(getState).post(`/api/v1/conversations/${conversationId}/read`);

app/javascript/mastodon/components/icon_button.js

@@ -6,41 +6,41 @@ import Icon from 'mastodon/components/icon';
 export default class IconButton extends React.PureComponent {
 
   static propTypes = {
-    className: PropTypes.string,
+    className  : PropTypes.string,
-    title: PropTypes.string.isRequired,
+    title      : PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired,
+    icon       : PropTypes.string.isRequired,
-    onClick: PropTypes.func,
+    onClick    : PropTypes.func,
     onMouseDown: PropTypes.func,
-    onKeyDown: PropTypes.func,
+    onKeyDown  : PropTypes.func,
-    onKeyPress: PropTypes.func,
+    onKeyPress : PropTypes.func,
-    size: PropTypes.number,
+    size       : PropTypes.number,
-    active: PropTypes.bool,
+    active     : PropTypes.bool,
-    pressed: PropTypes.bool,
+    pressed    : PropTypes.bool,
-    expanded: PropTypes.bool,
+    expanded   : PropTypes.bool,
-    style: PropTypes.object,
+    style      : PropTypes.object,
     activeStyle: PropTypes.object,
-    disabled: PropTypes.bool,
+    disabled   : PropTypes.bool,
-    inverted: PropTypes.bool,
+    inverted   : PropTypes.bool,
-    animate: PropTypes.bool,
+    animate    : PropTypes.bool,
-    overlay: PropTypes.bool,
+    overlay    : PropTypes.bool,
-    tabIndex: PropTypes.string,
+    tabIndex   : PropTypes.string,
   };
 
   static defaultProps = {
-    size: 18,
+    size    : 18,
-    active: false,
+    active  : false,
     disabled: false,
-    animate: false,
+    animate : false,
-    overlay: false,
+    overlay : false,
     tabIndex: '0',
   };
 
   state = {
-    activate: false,
+    activate  : false,
     deactivate: false,
-  }
+  };
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (!nextProps.animate) return;
 
     if (this.props.active && !nextProps.active) {
@@ -50,38 +50,38 @@ export default class IconButton extends React.PureComponent {
     }
   }
 
-  handleClick = (e) =>  {
+  handleClick = (e) => {
     e.preventDefault();
 
     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 () {
+  render() {
     const style = {
-      fontSize: `${this.props.size}px`,
+      // fontSize: `${this.props.size}px`,
-      width: `${this.props.size * 1.28571429}px`,
+      // width: `${this.props.size * 1.28571429}px`,
-      height: `${this.props.size * 1.28571429}px`,
+      // height: `${this.props.size * 1.28571429}px`,
-      lineHeight: `${this.props.size}px`,
+      // lineHeight: `${this.props.size}px`,
       ...this.props.style,
       ...(this.props.active ? this.props.activeStyle : {}),
     };
@@ -128,8 +128,12 @@ export default class IconButton extends React.PureComponent {
         tabIndex={tabIndex}
         disabled={disabled}
       >
-        <Icon id={icon} fixedWidth aria-hidden='true' />
+        <Icon
-      </button>
+          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;
+    float: right;
-    width: 10em;
+    width: 18em;
-
+    height: 3.2em;
-    &:hover {
+    text-align: center;
-      color: $ui-highlight-color;
-    }
   }
 }