Fix discrepancy for autosuggest-emoji class

ClearlyClaire · Nov 15, 2023 · 1c73201 · 1c73201
1 parent f69f1e9
commit 1c73201
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/app/javascript/flavours/glitch/components/autosuggest_emoji.jsx b/app/javascript/flavours/glitch/components/autosuggest_emoji.jsx
@@ -28,7 +28,7 @@ export default class AutosuggestEmoji extends PureComponent {
     }
 
     return (
-      <div className='emoji'>
+      <div className='autosuggest-emoji'>
         <img
           className='emojione'
           src={url}

diff --git a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
@@ -14,8 +14,8 @@ export default class AutosuggestAccount extends ImmutablePureComponent {
     const { account } = this.props;
 
     return (
-      <div className='account small' title={account.get('acct')}>
-        <div className='account__avatar-wrapper'><Avatar account={account} size={24} /></div>
+      <div className='autosuggest-account' title={account.get('acct')}>
+        <div className='autosuggest-account-icon'><Avatar account={account} size={24} /></div>
         <DisplayName account={account} inline />
       </div>
     );

diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -308,9 +308,9 @@
     background: darken($ui-secondary-color, 10%);
   }
 
-  > .account,
-  > .emoji,
-  > .autosuggest-hashtag {
+  .autosuggest-account,
+  .autosuggest-emoji,
+  .autosuggest-hashtag {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -342,12 +342,16 @@
     }
   }
 
-  & > .account.small {
-    .display-name {
-      & > span {
-        color: $lighter-text-color;
-      }
-    }
+  .autosuggest-account-icon,
+  .autosuggest-emoji img {
+    display: block;
+    margin-inline-end: 8px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .autosuggest-account .display-name > span {
+    color: $lighter-text-color;
   }
 }