Styled AutosuggestAccount and AutosuggestEmoji

• Styled:
- AutosuggestAccount and AutosuggestEmoji

app/javascript/gabsocial/components/autosuggest_account.js

@@ -1,18 +1,18 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { makeGetAccount } from '../selectors';
-import Avatar from './avatar';
-import DisplayName from './display_name';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { makeGetAccount } from '../selectors'
+import Avatar from './avatar'
+import DisplayName from './display_name'
 
 const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
+  const getAccount = makeGetAccount()
 
   const mapStateToProps = (state, { id }) => ({
     account: getAccount(state, id),
-  });
+  })
 
-  return mapStateToProps;
-};
+  return mapStateToProps
+}
 
 export default
 @connect(makeMapStateToProps)
@@ -23,16 +23,19 @@ class AutosuggestAccount extends ImmutablePureComponent {
   }
 
   render () {
-    const { account } = this.props;
+    const { account } = this.props
 
     return (
-      <div className='autosuggest-account' title={account.get('acct')}>
-        <div className='autosuggest-account__icon'>
-          <Avatar account={account} size={18} />
+      <div
+        className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+        title={account.get('acct')}
+      >
+        <Avatar account={account} size={26} />
+        <div className={_s.ml10}>
+          <DisplayName account={account} noRelationship noHover />
         </div>
-        <DisplayName account={account} noRelationship noHover />
       </div>
-    );
+    )
   }
 
 }

app/javascript/gabsocial/components/autosuggest_emoji.js

@@ -1,36 +1,8 @@
 import unicodeMapping from './emoji/emoji_unicode_mapping_light'
+import Text from './text'
 
 const assetHost = process.env.CDN_HOST || ''
 
-// .autosuggest-emoji {
-//   display: flex;
-//   justify-items: center;
-//   align-content: flex-start;
-//   flex-direction: row;
-
-//   @include text-sizing(14px, 400, 18px);
-
-//   img {
-//     display: block;
-//     margin-right: 8px;
-
-//     @include size(16px);
-//   }
-// }
-
-// .emojione {
-//   font-size: inherit;
-//   vertical-align: middle;
-//   object-fit: contain;
-//   margin: -.2ex .15em .2ex;
-
-//   @include size(16px);
-
-//   img {
-//     width: auto;
-//   }
-// }
-
 export default class AutosuggestEmoji extends PureComponent {
 
   static propTypes = {
@@ -52,9 +24,11 @@ export default class AutosuggestEmoji extends PureComponent {
     }
 
     return (
-      <div className='autosuggest-emoji'>
+      <div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <img className='emojione' src={url} alt={emoji.native || emoji.colons} />
-        {emoji.colons}
+        <Text className={_s.ml10}>
+          {emoji.colons}
+        </Text>
       </div>
     )
   }