Merge branch 'next-emoji-reacts' into 'next'

Next: emoji reacts fixes

See merge request soapbox-pub/soapbox-fe!1247

app/soapbox/components/emoji-button-wrapper.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { useDispatch } from 'react-redux';
 
@@ -25,12 +25,13 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
   const [visible, setVisible] = useState(false);
   // const [focused, setFocused] = useState(false);
 
-  const ref = useRef<HTMLDivElement>(null);
+  // `useRef` won't trigger a re-render, while `useState` does.
-  const popperRef = useRef<HTMLDivElement>(null);
+  // https://popper.js.org/react-popper/v2/
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const { styles, attributes } = usePopper(ref.current, popperRef.current, {
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: 'top-start',
-    strategy: 'fixed',
     modifiers: [
       {
         name: 'offset',
@@ -53,10 +54,6 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
     setVisible(false);
   };
 
-  const handleUnfocus = () => {
-    setVisible(false);
-  };
-
   const handleReact = (emoji: string): void => {
     if (ownAccount) {
       dispatch(simpleEmojiReact(status, emoji));
@@ -93,10 +90,10 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
 
   const selector = (
     <div
-      className={classNames('fixed z-50 transition-opacity duration-100', {
+      className={classNames('z-50 transition-opacity duration-100', {
         'opacity-0 pointer-events-none': !visible,
       })}
-      ref={popperRef}
+      ref={setPopperElement}
       style={styles.popper}
       {...attributes.popper}
     >
@@ -113,8 +110,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
     <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       {React.cloneElement(children, {
         onClick: handleClick,
-        onBlur: handleUnfocus,
+        ref: setReferenceElement,
-        ref,
       })}
 
       {selector}

app/soapbox/components/status-action-button.tsx

@@ -41,9 +41,10 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
       ref={ref}
       type='button'
       className={classNames(
-        'group flex items-center p-1 space-x-0.5 rounded-full',
+        'flex items-center p-1 space-x-0.5 rounded-full',
         'text-gray-400 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
+        'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
         {
           'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
           'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && color === COLORS.success,
@@ -56,7 +57,6 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
         src={icon}
         className={classNames(
           'rounded-full',
-          'group-focus:outline-none group-focus:ring-2 group-focus:ring-offset-2 dark:ring-offset-0 group-focus:ring-primary-500',
           {
             'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
           },

app/soapbox/components/status_action_bar.tsx

@@ -643,7 +643,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           <EmojiButtonWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/icons/thumb-up.svg')}
+              icon={require('@tabler/icons/icons/heart.svg')}
+              filled
               color='accent'
               active={Boolean(meEmojiReact)}
               count={emojiReactCount}