Header

assets/icons/dotGrid1x3Horizontal_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm-6-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" clip-rule="evenodd"/></svg>

src/alf/atoms.ts

@@ -122,6 +122,9 @@ export const atoms = {
   flex_shrink: {
     flexShrink: 1,
   },
+  justify_start: {
+    justifyContent: 'flex-start',
+  },
   justify_center: {
     justifyContent: 'center',
   },
@@ -140,6 +143,24 @@ export const atoms = {
   align_end: {
     alignItems: 'flex-end',
   },
+  self_auto: {
+    alignSelf: 'auto',
+  },
+  self_start: {
+    alignSelf: 'flex-start',
+  },
+  self_end: {
+    alignSelf: 'flex-end',
+  },
+  self_center: {
+    alignSelf: 'center',
+  },
+  self_stretch: {
+    alignSelf: 'stretch',
+  },
+  self_baseline: {
+    alignSelf: 'baseline',
+  },
 
   /*
    * Text

src/components/Button.tsx

@@ -361,7 +361,6 @@ export function Button({
         disabled: disabled || false,
       }}
       style={[
-        flatten(style),
         a.flex_row,
         a.align_center,
         a.justify_center,
@@ -370,6 +369,7 @@ export function Button({
         ...baseStyles,
         ...(state.hovered || state.pressed ? hoverStyles : []),
         ...(state.focused ? focusStyles : []),
+        flatten(style),
       ]}
       onPressIn={onPressIn}
       onPressOut={onPressOut}

src/components/Link.tsx

@@ -13,7 +13,7 @@ import {sanitizeUrl} from '@braintree/sanitize-url'
 
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {isWeb} from '#/platform/detection'
-import {useTheme, web, flatten, TextStyleProp} from '#/alf'
+import {useTheme, web, flatten, TextStyleProp, atoms as a} from '#/alf'
 import {Button, ButtonProps} from '#/components/Button'
 import {AllNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {
@@ -35,6 +35,8 @@ type BaseLinkProps = Pick<
   Parameters<typeof useLinkProps<AllNavigatorParams>>[0],
   'to'
 > & {
+  testID?: string
+
   /**
    * The React Navigation `StackAction` to perform when the link is pressed.
    */
@@ -46,6 +48,13 @@ type BaseLinkProps = Pick<
    * Note: atm this only works for `InlineLink`s with a string child.
    */
   warnOnMismatchingTextChild?: boolean
+
+  /**
+   * Callback for when the link is pressed.
+   *
+   * DO NOT use this for navigation, that's what the `to` prop is for.
+   */
+  onPress?: (e: GestureResponderEvent) => void
 }
 
 export function useLink({
@@ -53,6 +62,7 @@ export function useLink({
   displayText,
   action = 'push',
   warnOnMismatchingTextChild,
+  onPress: outerOnPress,
 }: BaseLinkProps & {
   displayText: string
 }) {
@@ -66,6 +76,8 @@ export function useLink({
 
   const onPress = React.useCallback(
     (e: GestureResponderEvent) => {
+      outerOnPress?.(e)
+
       const requiresWarning = Boolean(
         warnOnMismatchingTextChild &&
           displayText &&
@@ -143,7 +155,7 @@ export function useLink({
 }
 
 export type LinkProps = Omit<BaseLinkProps, 'warnOnMismatchingTextChild'> &
-  Omit<ButtonProps, 'style' | 'onPress' | 'disabled' | 'label'> & {
+  Omit<ButtonProps, 'onPress' | 'disabled' | 'label'> & {
     /**
      * Label for a11y. Defaults to the href.
      */
@@ -169,6 +181,10 @@ export function Link({children, to, action = 'push', ...rest}: LinkProps) {
     <Button
       label={href}
       {...rest}
+      style={[
+        a.justify_start,
+        flatten(rest.style),
+      ]}
       role="link"
       accessibilityRole="link"
       href={href}

src/components/icons/DotGrid.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const DotGrid1x3Horizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm-6-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z',
+})

src/screens/ProfileModerationService/Header.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -25,16 +26,21 @@ import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
 import {useSession} from '#/state/session'
 import {useModalControls} from '#/state/modals'
 
-import { useTheme, atoms as a } from '#/alf'
+import {useTheme, atoms as a, tokens} from '#/alf'
 import {Text} from '#/components/Typography'
 import {Button, ButtonText} from '#/components/Button'
 import {RaisingHande4Finger_Stroke2_Corner0_Rounded as RaisingHand} from '#/components/icons/RaisingHand'
+import {InlineLink} from '#/components/Link'
+import {DotGrid1x3Horizontal_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
+import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
+import {Divider} from '#/components/Divider'
 
 export function Header({
   info,
 }: {
   info: AppBskyModerationDefs.ModServiceViewDetailed
 }) {
+  const t = useTheme()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
@@ -55,86 +61,87 @@ export function Header({
   }, [setDrawerOpen])
 
   return (
-    <CenteredView style={pal.view}>
+    <View style={[a.pb_xl]}>
       {isMobile && (
-        <View
-          style={[
-            {
-              flexDirection: 'row',
-              alignItems: 'center',
-              borderBottomWidth: 1,
-              paddingTop: isNative ? 0 : 8,
-              paddingBottom: 8,
-              paddingHorizontal: isMobile ? 12 : 14,
-            },
-            pal.border,
-          ]}>
-          <Pressable
-            testID="headerDrawerBtn"
-            onPress={canGoBack ? onPressBack : onPressMenu}
-            hitSlop={BACK_HITSLOP}
-            style={canGoBack ? styles.backBtn : styles.backBtnWide}
-            accessibilityRole="button"
-            accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
-            accessibilityHint="">
-            {canGoBack ? (
-              <FontAwesomeIcon
-                size={18}
-                icon="angle-left"
-                style={[styles.backIcon, pal.text]}
-              />
-            ) : (
-              <FontAwesomeIcon
-                size={18}
-                icon="bars"
-                style={[styles.backIcon, pal.textLight]}
-              />
-            )}
-          </Pressable>
-          <View style={{flex: 1}} />
-          <CommonControls info={info} />
+        <View style={[a.mb_xl]}>
+          <View
+            style={[a.flex_row, a.justify_between, a.align_center, a.pb_md]}>
+            <Button
+              testID="headerDrawerBtn"
+              size="small"
+              color="secondary"
+              variant="ghost"
+              shape="round"
+              onPress={canGoBack ? onPressBack : onPressMenu}
+              label={canGoBack ? 'Back' : 'Menu'}>
+              {canGoBack ? (
+                <ChevronLeft width={18} style={[t.atoms.text]} />
+              ) : (
+                <FontAwesomeIcon
+                  size={18}
+                  icon="bars"
+                  style={[styles.backIcon, pal.textLight]}
+                />
+              )}
+            </Button>
+
+            <CommonControls info={info} />
+          </View>
+
+          <Divider />
         </View>
       )}
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          gap: 10,
-          paddingTop: 14,
-          paddingBottom: 14,
-          paddingHorizontal: isMobile ? 12 : 14,
-        }}>
-        <View style={{alignSelf: 'center'}}>
-          <HandIcon style={pal.text} size={32} strokeWidth={5.5} />
-        </View>
-        <View style={{flex: 1}}>
-          <TextLink
-            testID="headerTitle"
-            type="title-xl"
-            href={makeProfileLink(info.creator, 'modservice')}
-            style={[pal.text, {fontWeight: 'bold'}]}
-            text={
-              info.creator.displayName
-                ? sanitizeDisplayName(info.creator.displayName)
-                : sanitizeHandle(info.creator.handle, '@')
-            }
-            onPress={emitSoftReset}
-            numberOfLines={4}
-          />
-          <OldText type="xl" style={[pal.textLight]} numberOfLines={1}>
-            <Trans>Moderation service</Trans>
-          </OldText>
-        </View>
+
+      <View style={[a.flex_row, a.gap_lg, a.align_start]}>
         <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}>
-          <OldButton type="primary" label={_(msg`Subscribe`)} />
+          style={[
+            a.p_md,
+            t.atoms.bg_contrast_50,
+            a.rounded_md,
+            a.overflow_hidden,
+          ]}>
+          <LinearGradient
+            colors={tokens.gradients.sky.values.map(c => c[1])}
+            locations={tokens.gradients.bonfire.values.map(c => c[0])}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            style={[a.absolute, a.inset_0]}
+          />
+          <RaisingHand width={32} fill={t.atoms.text.color} style={[a.z_10]} />
+        </View>
+
+        <View style={[a.flex_1, a.gap_xs]}>
+          <InlineLink
+            testID="headerTitle"
+            to={makeProfileLink(info.creator, 'modservice')}
+            onPress={emitSoftReset}
+            style={[a.text_4xl, a.font_bold, t.atoms.text]}>
+            {/* A really long and complex title for a moderation service */}
+            {info.creator.displayName
+              ? sanitizeDisplayName(info.creator.displayName)
+              : sanitizeHandle(info.creator.handle, '@')}
+          </InlineLink>
+
+          <Text style={[a.text_md, t.atoms.text_contrast_700]}>
+            <Trans>Moderation service</Trans>
+          </Text>
+        </View>
+
+        <View style={[a.flex_row, a.align_center, a.gap_md]}>
+          <Button
+            size="small"
+            variant="solid"
+            color="primary"
+            label={_(msg`Subscribe to moderation service`)}>
+            <ButtonText>
+              <Trans>Subscribe</Trans>
+            </ButtonText>
+          </Button>
+
           {!isMobile && <CommonControls info={info} />}
         </View>
       </View>
-    </CenteredView>
+    </View>
   )
 }
 
@@ -143,7 +150,7 @@ function CommonControls({
 }: {
   info: AppBskyModerationDefs.ModServiceViewDetailed
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {hasSession} = useSession()
   const {openModal} = useModalControls()
   const {_} = useLingui()
@@ -199,8 +206,8 @@ function CommonControls({
         items={dropdownItems}
         accessibilityLabel={_(msg`More options`)}
         accessibilityHint="">
-        <View style={[pal.viewLight, styles.btn, {marginLeft: 6}]}>
-          <FontAwesomeIcon icon="ellipsis" size={20} color={pal.colors.text} />
+        <View style={[a.rounded_full, a.p_sm, t.atoms.bg_contrast_50]}>
+          <Ellipsis width={20} fill={t.atoms.text_contrast_700.color} />
         </View>
       </NativeDropdown>
     </>
@@ -229,4 +236,3 @@ const styles = StyleSheet.create({
     borderRadius: 50,
   },
 })
-