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.mr_xs, {marginLeft: 'auto'}, a.flex_row_reverse]
-            : [a.ml_md, {marginRight: 'auto'}],
+            : [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, flatten, useTheme} from '#/alf'
-import {atoms as a} from '#/alf'
-import {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]}>
+    <Menu.Outer style={[a.rounded_full]}>
-      {['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
+      <View style={[a.flex_row, a.gap_xs]}>
-        const alreadyReacted = hasAlreadyReacted(
+        {['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
-          message,
+          const alreadyReacted = hasAlreadyReacted(
-          currentAccount?.did,
+            message,
-          emoji,
+            currentAccount?.did,
-        )
+            emoji,
-        return (
+          )
-          <PressableWithHover
+          return (
-            key={emoji}
+            <DropdownMenu.Item
-            onPress={() => handleEmojiSelect(emoji)}
+              key={emoji}
-            hoverStyle={{
+              className={[
-              backgroundColor: alreadyReacted
+                'EmojiReactionPicker__Pressable',
-                ? t.palette.negative_200
+                alreadyReacted && '__selected',
-                : !limitReacted
+                limitReacted && '__disabled',
-                ? t.palette.primary_300
+              ]
-                : undefined,
+                .filter(Boolean)
-            }}
+                .join(' ')}
-            style={[
+              onSelect={() => handleEmojiSelect(emoji)}
-              a.rounded_xs,
+              style={flatten([
-              {height: 40, width: 40},
+                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},
+            ])}>
-            ]}>
+            <DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
-            <Text style={[a.text_center, {fontSize: 30}]} emoji>
+          </Pressable>
-              {emoji}
+        </DropdownMenu.Item>
-            </Text>
+      </View>
-          </PressableWithHover>
+    </Menu.Outer>
-        )
-      })}
-      <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>
   )
 }

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;
+}