Some design tweaks to web emoji picker (#8076)

* Tighten up and reverse action items on web

* Tweak web styles for emoji bar

* Might as well make disabled more obvious

* Format

src/components/dms/ActionsWrapper.web.tsx

@@ -85,10 +85,9 @@ export function ActionsWrapper({
           a.justify_center,
           a.flex_row,
           a.align_center,
-          a.gap_xs,
           isFromSelf
-            ? [a.mr_md, {marginLeft: 'auto'}]
-            : [a.ml_md, {marginRight: 'auto'}],
+            ? [a.mr_xs, {marginLeft: 'auto'}, a.flex_row_reverse]
+            : [a.ml_xs, {marginRight: 'auto'}],
         ]}>
         <EmojiReactionPicker message={message} onEmojiSelect={onEmojiSelect}>
           {({props, state, isNative, control}) => {

src/components/dms/EmojiReactionPicker.web.tsx

@@ -1,15 +1,14 @@
 import {useState} from 'react'
-import {View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {type ChatBskyConvoDefs} from '@atproto/api'
 import EmojiPicker from '@emoji-mart/react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import {useSession} from '#/state/session'
 import {type Emoji} from '#/view/com/composer/text-input/web/EmojiPicker.web'
-import {PressableWithHover} from '#/view/com/util/PressableWithHover'
-import {atoms as a} from '#/alf'
-import {useTheme} from '#/alf'
+import {atoms as a, flatten, useTheme} from '#/alf'
 import {DotGrid_Stroke2_Corner0_Rounded as DotGridIcon} from '#/components/icons/DotGrid'
 import * as Menu from '#/components/Menu'
 import {type TriggerProps} from '#/components/Menu/types'
@@ -67,48 +66,63 @@ function MenuInner({
   return expanded ? (
     <EmojiPicker onEmojiSelect={handleEmojiPickerResponse} autoFocus={true} />
   ) : (
-    <View style={[a.flex_row, a.gap_xs]}>
-      {['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
-        const alreadyReacted = hasAlreadyReacted(
-          message,
-          currentAccount?.did,
-          emoji,
-        )
-        return (
-          <PressableWithHover
-            key={emoji}
-            onPress={() => handleEmojiSelect(emoji)}
-            hoverStyle={{
-              backgroundColor: alreadyReacted
-                ? t.palette.negative_200
-                : !limitReacted
-                ? t.palette.primary_300
-                : undefined,
-            }}
-            style={[
-              a.rounded_xs,
-              {height: 40, width: 40},
+    <Menu.Outer style={[a.rounded_full]}>
+      <View style={[a.flex_row, a.gap_xs]}>
+        {['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
+          const alreadyReacted = hasAlreadyReacted(
+            message,
+            currentAccount?.did,
+            emoji,
+          )
+          return (
+            <DropdownMenu.Item
+              key={emoji}
+              className={[
+                'EmojiReactionPicker__Pressable',
+                alreadyReacted && '__selected',
+                limitReacted && '__disabled',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              onSelect={() => handleEmojiSelect(emoji)}
+              style={flatten([
+                a.flex,
+                a.flex_col,
+                a.rounded_full,
+                a.justify_center,
+                a.align_center,
+                a.transition_transform,
+                {
+                  width: 34,
+                  height: 34,
+                },
+                alreadyReacted && {
+                  backgroundColor: t.atoms.bg_contrast_100.backgroundColor,
+                },
+              ])}>
+              <Text style={[a.text_center, {fontSize: 28}]} emoji>
+                {emoji}
+              </Text>
+            </DropdownMenu.Item>
+          )
+        })}
+        <DropdownMenu.Item
+          asChild
+          className="EmojiReactionPicker__PickerButton">
+          <Pressable
+            accessibilityRole="button"
+            role="button"
+            onPress={() => setExpanded(true)}
+            style={flatten([
+              a.rounded_full,
+              {height: 34, width: 34},
               a.justify_center,
               a.align_center,
-              alreadyReacted && {backgroundColor: t.palette.primary_100},
-            ]}>
-            <Text style={[a.text_center, {fontSize: 30}]} emoji>
-              {emoji}
-            </Text>
-          </PressableWithHover>
-        )
-      })}
-      <PressableWithHover
-        onPress={() => setExpanded(true)}
-        hoverStyle={{backgroundColor: t.palette.primary_100}}
-        style={[
-          a.rounded_xs,
-          {height: 40, width: 40},
-          a.justify_center,
-          a.align_center,
-        ]}>
-        <DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
-      </PressableWithHover>
-    </View>
+            ])}>
+            <DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
+          </Pressable>
+        </DropdownMenu.Item>
+      </View>
+    </Menu.Outer>
   )
 }

src/style.css

@@ -290,3 +290,38 @@ input[type='range'][orient='vertical']::-moz-range-thumb {
   width: 16px;
   margin-left: -6px;
 }
+
+/*
+ * EmojiReactionPicker dropdown elements, within Radix components
+ */
+.EmojiReactionPicker__Pressable {
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.EmojiReactionPicker__Pressable:focus {
+  outline: none;
+  border-color: var(--text);
+}
+.EmojiReactionPicker__Pressable:hover {
+  outline: none;
+  transform: scale(1.1);
+  border-color: transparent;
+}
+.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
+  transform: scale(1) !important;
+  border-color: transparent !important;
+  opacity: 0.7;
+}
+.EmojiReactionPicker__Pressable ~ button {
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.EmojiReactionPicker__Pressable ~ button:focus {
+  outline: none;
+  border-color: var(--text);
+}
+.EmojiReactionPicker__Pressable ~ button:hover {
+  outline: none;
+  background-color: var(--backgroundLight);
+  border-color: transparent;
+}