Use ALF for post controls (#3400)

* alf the repost dropdown on web + import icons * alf like icon * convert other post controls * add missing padding to share button * refine buttons and use better icons * revert buttonicon changes * remove ButtonIcon and ButtonText from repost dialog * use 15px font size when not big * reduce size and use contrast_25 * add hover state to logged out view * add `userSelect: 'none'` to buttons * use width rather than height * fix quote close behaviour * prettier * Fix Esc on repost * Use new icons for placeholder * Fix placeholder --------- Co-authored-by: Dan Abramov <[email protected]>
bluesky-social · May 30, 2024 · 165feed · 165feed
1 parent 4d39ef2
commit 165feed
Show file tree

Hide file tree

Showing 17 changed files with 376 additions and 285 deletions.
diff --git a/assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg b/assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg
diff --git a/assets/icons/closeQuote_stroke2_corner0_rounded.svg b/assets/icons/closeQuote_stroke2_corner0_rounded.svg
diff --git a/assets/icons/closeQuote_stroke2_corner1_rounded.svg b/assets/icons/closeQuote_stroke2_corner1_rounded.svg
diff --git a/assets/icons/openQuote_filled_stroke2_corner0_rounded.svg b/assets/icons/openQuote_filled_stroke2_corner0_rounded.svg
diff --git a/assets/icons/openQuote_stroke2_corner0_rounded.svg b/assets/icons/openQuote_stroke2_corner0_rounded.svg
diff --git a/assets/icons/repost_stroke2_corner0_rounded.svg b/assets/icons/repost_stroke2_corner0_rounded.svg
diff --git a/assets/icons/repost_stroke2_corner3_rounded.svg b/assets/icons/repost_stroke2_corner3_rounded.svg
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
@@ -841,14 +841,23 @@ export const atoms = {
     marginRight: 'auto',
   },
   /*
-   * Pointer events
+   * Pointer events & user select
    */
   pointer_events_none: {
     pointerEvents: 'none',
   },
   pointer_events_auto: {
     pointerEvents: 'auto',
   },
+  user_select_none: {
+    userSelect: 'none',
+  },
+  user_select_text: {
+    userSelect: 'text',
+  },
+  user_select_all: {
+    userSelect: 'all',
+  },
   /*
    * Text decoration
    */

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -71,6 +71,7 @@ export type ButtonProps = Pick<
     testID?: string
     label: string
     style?: StyleProp<ViewStyle>
+    hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
   }
 
@@ -96,6 +97,7 @@ export function Button({
   label,
   disabled = false,
   style,
+  hoverStyle: hoverStyleProp,
   ...rest
 }: ButtonProps) {
   const t = useTheme()
@@ -374,7 +376,9 @@ export function Button({
         a.align_center,
         a.justify_center,
         flattenedBaseStyles,
-        ...(state.hovered || state.pressed ? hoverStyles : []),
+        ...(state.hovered || state.pressed
+          ? [hoverStyles, flatten(hoverStyleProp)]
+          : []),
         flatten(style),
       ]}
       onPressIn={onPressIn}

diff --git a/src/components/icons/Quote.tsx b/src/components/icons/Quote.tsx
@@ -0,0 +1,21 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const OpenQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M7.574 4.178a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.163 8.163 0 0 1 1.569-1.15 7.029 7.029 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588a5.99 5.99 0 0 0-.316.276C4.842 7.835 4.004 9.085 4.004 11v7h5v-6h-2a1 1 0 0 1-1-1V6.766Zm12.57-2.588a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.166 8.166 0 0 1 1.569-1.15 7.038 7.038 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588c-.105.085-.21.177-.316.276-.846.793-1.684 2.043-1.684 3.958v7h5v-6h-2a1 1 0 0 1-1-1V6.766Z',
+})
+
+export const OpenQuote_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M8.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15C3.166 6.665 2.004 8.415 2.004 11v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5ZM19.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15-1.154 1.082-2.316 2.832-2.316 5.417v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5Z',
+})
+
+export const CloseQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2.004 5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936A1 1 0 0 1 5.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234c.104-.085.21-.177.316-.276.846-.793 1.684-2.043 1.684-3.958V6h-5v6h2a1 1 0 0 1 1 1v4.234Zm6-12.234a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234V13a1 1 0 0 0-1-1h-2V6h5v7c0 1.915-.838 3.165-1.684 3.958-.106.1-.212.191-.316.276Z',
+})
+
+export const CloseQuote_Stroke2_Corner1_Rounded = createSinglePathSVG({
+  path: 'M2.003 5.999a2 2 0 0 1 2-1.999h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936a1 1 0 0 1-1.351-.935L5 14H4a2 2 0 0 1-2-2.001l.002-6Zm5 11.236L7 12.999A1 1 0 0 0 6 12H4l.003-6h5v7c0 1.915-.837 3.165-1.683 3.958-.106.1-.213.192-.317.277Zm6-11.235a2 2 0 0 1 2-2h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-1a2 2 0 0 1-2-2V6Zm7 0h-5v6h2a1 1 0 0 1 1 1v4.234c.105-.085.211-.177.317-.276.846-.793 1.684-2.043 1.684-3.958V6Z',
+})
+
+export const CloseQuote_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7ZM14.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7Z',
+})
diff --git a/src/components/icons/Repost.tsx b/src/components/icons/Repost.tsx
@@ -0,0 +1,13 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Repost_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z',
+})
+
+export const Repost_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M17.957 2.293a1 1 0 1 0-1.414 1.414L17.836 5H6a3 3 0 0 0-3 3v3a1 1 0 1 0 2 0V8a1 1 0 0 1 1-1h11.836l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.47-2.47a1.75 1.75 0 0 0 0-2.474l-2.47-2.47ZM20 12a1 1 0 0 1 1 1v3a3 3 0 0 1-3 3H6.164l1.293 1.293a1 1 0 1 1-1.414 1.414l-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47a1 1 0 0 1 1.414 1.414L6.164 17H18a1 1 0 0 0 1-1v-3a1 1 0 0 1 1-1Z',
+})
+
+export const Repost_Stroke2_Corner3_Rounded = createSinglePathSVG({
+  path: 'M16.793 2.293a1 1 0 0 1 1.414 0L20.5 4.586a2 2 0 0 1 0 2.828l-2.293 2.293a1 1 0 0 1-1.414-1.414L18.086 7H7a2 2 0 0 0-2 2v2a1 1 0 1 1-2 0V9a4 4 0 0 1 4-4h11.086l-1.293-1.293a1 1 0 0 1 0-1.414ZM20 12a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H5.914l1.293 1.293a1 1 0 1 1-1.414 1.414L3.5 19.414a2 2 0 0 1 0-2.828l2.293-2.293a1 1 0 0 1 1.414 1.414L5.914 17H17a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1Z',
+})
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
@@ -367,7 +367,7 @@ let PostThreadItemLoaded = ({
                 ) : null}
               </View>
             ) : null}
-            <View style={[s.pl10, s.pr10, s.pb5]}>
+            <View style={[s.pl10, s.pr10]}>
               <PostCtrls
                 big
                 post={post}
@@ -733,7 +733,7 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderBottomWidth: 1,
     marginTop: 5,
-    marginBottom: 15,
+    marginBottom: 10,
   },
   expandedInfoItem: {
     marginRight: 10,

diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
@@ -1,20 +1,20 @@
 import React from 'react'
 import {
-  StyleSheet,
+  DimensionValue,
   StyleProp,
+  StyleSheet,
   View,
   ViewStyle,
-  DimensionValue,
 } from 'react-native'
-import {
-  HeartIcon,
-  HeartIconSolid,
-  CommentBottomArrow,
-  RepostIcon,
-} from 'lib/icons'
+
+import {usePalette} from 'lib/hooks/usePalette'
+import {HeartIconSolid} from 'lib/icons'
 import {s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme as useTheme_NEW} from '#/alf'
+import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
+import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2'
+import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 
 export function LoadingPlaceholder({
   width,
@@ -46,7 +46,7 @@ export function PostLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const theme = useTheme()
+  const t = useTheme_NEW()
   const pal = usePalette('default')
   return (
     <View style={[styles.post, pal.view, style]}>
@@ -67,35 +67,47 @@ export function PostLoadingPlaceholder({
         <LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
         <LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
         <View style={styles.postCtrls}>
-          <View style={styles.postCtrl}>
-            <View style={[styles.postBtn, {paddingLeft: 0}]}>
-              <CommentBottomArrow
-                style={[{color: theme.palette.default.icon, marginTop: 1}]}
-                strokeWidth={3}
-                size={15}
+          <View style={[styles.postCtrl, {marginLeft: -5}]}>
+            <View style={styles.postBtn}>
+              <Bubble
+                style={[
+                  {
+                    color: t.palette.contrast_500,
+                  },
+                  {pointerEvents: 'none'},
+                ]}
+                width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
             <View style={styles.postBtn}>
-              <RepostIcon
-                style={{color: theme.palette.default.icon}}
-                strokeWidth={3}
-                size={20}
+              <Repost
+                style={[
+                  {
+                    color: t.palette.contrast_500,
+                  },
+                  {pointerEvents: 'none'},
+                ]}
+                width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
             <View style={styles.postBtn}>
-              <HeartIcon
-                style={{color: theme.palette.default.icon} as ViewStyle}
-                size={16}
-                strokeWidth={3}
+              <HeartIconOutline
+                style={[
+                  {
+                    color: t.palette.contrast_500,
+                  },
+                  {pointerEvents: 'none'},
+                ]}
+                width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
-            <View style={styles.postBtn} />
+            <View style={[styles.postBtn, {minHeight: 30}]} />
           </View>
         </View>
       </View>
@@ -290,10 +302,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   postBtn: {
-    padding: 5,
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
+    padding: 5,
   },
   avatar: {
     borderRadius: 26,

diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -1,13 +1,17 @@
 import React, {memo} from 'react'
-import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import {
   AppBskyActorDefs,
   AppBskyFeedPost,
   AtUri,
   RichText as RichTextAPI,
 } from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -37,6 +41,7 @@ import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons
 import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets'
+import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
 import {
   EmojiSad_Stroke2_Corner0_Rounded as EmojiSad,
   EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile,
@@ -68,6 +73,7 @@ let PostDropdownBtn = ({
   richText,
   style,
   hitSlop,
+  size,
   timestamp,
 }: {
   testID: string
@@ -79,6 +85,7 @@ let PostDropdownBtn = ({
   richText: RichTextAPI
   style?: StyleProp<ViewStyle>
   hitSlop?: PressableProps['hitSlop']
+  size?: 'lg' | 'md' | 'sm'
   timestamp: string
 }): React.ReactNode => {
   const {hasSession, currentAccount} = useSession()
@@ -238,14 +245,13 @@ let PostDropdownBtn = ({
                   style,
                   a.rounded_full,
                   (state.hovered || state.pressed) && [
-                    alf.atoms.bg_contrast_50,
+                    alf.atoms.bg_contrast_25,
                   ],
                 ]}>
-                <FontAwesomeIcon
-                  icon="ellipsis"
-                  size={20}
-                  color={defaultCtrlColor}
+                <DotsHorizontal
+                  fill={defaultCtrlColor}
                   style={{pointerEvents: 'none'}}
+                  size={size}
                 />
               </Pressable>
             )