Floating "Load more" makeover (#8420)

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -1,19 +1,20 @@
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useMediaQuery} from 'react-responsive'
 
 import {HITSLOP_20} from '#/lib/constants'
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {useGate} from '#/lib/statsig/statsig'
-import {colors} from '#/lib/styles'
 import {useSession} from '#/state/session'
-import {atoms as a, useLayoutBreakpoints} from '#/alf'
+import {atoms as a, useLayoutBreakpoints, useTheme, web} from '#/alf'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {ArrowTop_Stroke2_Corner0_Rounded as ArrowIcon} from '#/components/icons/Arrow'
+import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
+import {SubtleWebHover} from '#/components/SubtleWebHover'
 
 export function LoadLatestBtn({
   onPress,
@@ -24,12 +25,17 @@ export function LoadLatestBtn({
   label: string
   showIndicator: boolean
 }) {
-  const pal = usePalette('default')
   const {hasSession} = useSession()
   const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
   const {centerColumnOffset} = useLayoutBreakpoints()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
   const insets = useSafeAreaInsets()
+  const t = useTheme()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
 
   // move button inline if it starts overlapping the left nav
   const isTallViewport = useMediaQuery({minHeight: 700})
@@ -48,67 +54,66 @@ export function LoadLatestBtn({
     : {bottom: clamp(insets.bottom, 15, 60) + 15}
 
   return (
-    <Animated.View style={[showBottomBar && fabMinimalShellTransform]}>
+    <Animated.View
+      testID="loadLatestBtn"
+      style={[
+        a.fixed,
+        a.z_20,
+        {left: 18},
+        isDesktop &&
+          (isTallViewport
+            ? styles.loadLatestOutOfLine
+            : styles.loadLatestInline),
+        isTablet &&
+          (centerColumnOffset
+            ? styles.loadLatestInlineOffset
+            : styles.loadLatestInline),
+        bottomPosition,
+        showBottomBar && fabMinimalShellTransform,
+      ]}>
       <PressableScale
         style={[
-          styles.loadLatest,
-          isDesktop &&
-            (isTallViewport
-              ? styles.loadLatestOutOfLine
-              : styles.loadLatestInline),
-          isTablet &&
-            (centerColumnOffset
-              ? styles.loadLatestInlineOffset
-              : styles.loadLatestInline),
-          pal.borderDark,
-          pal.view,
-          bottomPosition,
+          {
+            width: 42,
+            height: 42,
+          },
+          a.rounded_full,
+          a.align_center,
+          a.justify_center,
+          a.border,
+          t.atoms.border_contrast_low,
+          showIndicator ? {backgroundColor: t.palette.primary_50} : t.atoms.bg,
         ]}
         onPress={onPress}
         hitSlop={HITSLOP_20}
         accessibilityLabel={label}
         accessibilityHint=""
-        targetScale={0.9}>
-        <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
-        {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
+        targetScale={0.9}
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}>
+        <SubtleWebHover hover={hovered} style={[a.rounded_full]} />
+        <ArrowIcon
+          size="md"
+          style={[
+            a.z_10,
+            showIndicator
+              ? {color: t.palette.primary_500}
+              : t.atoms.text_contrast_medium,
+          ]}
+        />
       </PressableScale>
     </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
-  loadLatest: {
-    zIndex: 20,
-    ...a.fixed,
-    left: 18,
-    borderWidth: StyleSheet.hairlineWidth,
-    width: 52,
-    height: 52,
-    borderRadius: 26,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   loadLatestInline: {
-    // @ts-expect-error web only
-    left: 'calc(50vw - 282px)',
+    left: web('calc(50vw - 282px)'),
   },
   loadLatestInlineOffset: {
-    // @ts-expect-error web only
-    left: 'calc(50vw - 432px)',
+    left: web(`calc(50vw - 282px + ${CENTER_COLUMN_OFFSET}px)`),
   },
   loadLatestOutOfLine: {
-    // @ts-expect-error web only
-    left: 'calc(50vw - 382px)',
-  },
-  indicator: {
-    position: 'absolute',
-    top: 3,
-    right: 3,
-    backgroundColor: colors.blue3,
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    borderWidth: 1,
+    left: web('calc(50vw - 382px)'),
   },
 })