Complete header

assets/icons/bars3_stroke2_corner0_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="M3 5a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 7a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

src/components/icons/Bars.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Bars3_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 5a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 7a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z',
+})

src/screens/ProfileModerationService/Header.tsx

@@ -1,38 +1,29 @@
 import React from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import {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'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Text as OldText} from '#/view/com/util/text/Text'
-import {TextLink} from '#/view/com/util/Link'
-import {CenteredView} from '#/view/com/util/Views'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {makeProfileLink} from 'lib/routes/links'
-import {NavigationProp} from 'lib/routes/types'
-import {BACK_HITSLOP} from 'lib/constants'
-import {isNative} from 'platform/detection'
+import {AppBskyModerationDefs} from '@atproto/api'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
+
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {makeProfileLink} from '#/lib/routes/links'
+import {NavigationProp} from '#/lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
 import {emitSoftReset} from '#/state/events'
-import {AppBskyModerationDefs} from '@atproto/api'
-import {HandIcon} from '#/lib/icons'
-import {shareUrl} from 'lib/sharing'
+import {shareUrl} from '#/lib/sharing'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {Button as OldButton} from '#/view/com/util/forms/Button'
-import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
+import {NativeDropdown, DropdownItem} from '#/view/com/util/forms/NativeDropdown'
 import {useSession} from '#/state/session'
 import {useModalControls} from '#/state/modals'
 
-import {useTheme, atoms as a, tokens} from '#/alf'
+import {useTheme, atoms as a, tokens, web, native, useBreakpoints} from '#/alf'
 import {Text} from '#/components/Typography'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonText, ButtonIcon} 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 {Bars3_Stroke2_Corner0_Rounded as Bars} from '#/components/icons/Bars'
 import {Divider} from '#/components/Divider'
 
 export function Header({
@@ -41,11 +32,10 @@ export function Header({
   info: AppBskyModerationDefs.ModServiceViewDetailed
 }) {
   const t = useTheme()
+  const {gtMobile} = useBreakpoints()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
-  const {isMobile} = useWebMediaQueries()
-  const pal = usePalette('default')
   const canGoBack = navigation.canGoBack()
 
   const onPressBack = React.useCallback(() => {
@@ -61,8 +51,8 @@ export function Header({
   }, [setDrawerOpen])
 
   return (
-    <View style={[a.pb_xl]}>
-      {isMobile && (
+    <View style={[a.pb_xl, web(a.pt_md), gtMobile && web(a.pt_4xl)]}>
+      {!gtMobile && (
         <View style={[a.mb_xl]}>
           <View
             style={[a.flex_row, a.justify_between, a.align_center, a.pb_md]}>
@@ -70,23 +60,27 @@ export function Header({
               testID="headerDrawerBtn"
               size="small"
               color="secondary"
-              variant="ghost"
-              shape="round"
+              variant="solid"
+              shape="square"
               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]}
-                />
-              )}
+              label={canGoBack ? _(msg`Go back`) : _(msg`Open main menu`)}>
+              <ButtonIcon icon={canGoBack ? ChevronLeft : Bars} />
+            </Button>
+
+            <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>
 
               <CommonControls info={info} />
             </View>
+          </View>
 
           <Divider />
         </View>
@@ -107,26 +101,30 @@ export function Header({
             end={{x: 1, y: 1}}
             style={[a.absolute, a.inset_0]}
           />
-          <RaisingHand width={32} fill={t.atoms.text.color} style={[a.z_10]} />
+          <RaisingHand width={32} fill={t.palette.white} style={[a.z_10]} />
         </View>
 
-        <View style={[a.flex_1, a.gap_xs]}>
-          <InlineLink
+        <View style={[a.flex_1, a.gap_xs, native(a.pt_2xs)]}>
+          <Button
+            label={_(msg`Refresh page`)}
             testID="headerTitle"
-            to={makeProfileLink(info.creator, 'modservice')}
+            // TODO do we need this?
             onPress={emitSoftReset}
-            style={[a.text_4xl, a.font_bold, t.atoms.text]}>
+            style={[a.justify_start]}>
+            <Text 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>
+          </Button>
 
           <Text style={[a.text_md, t.atoms.text_contrast_700]}>
             <Trans>Moderation service</Trans>
           </Text>
         </View>
 
+        {gtMobile && (
           <View style={[a.flex_row, a.align_center, a.gap_md]}>
             <Button
               size="small"
@@ -138,8 +136,9 @@ export function Header({
               </ButtonText>
             </Button>
 
-          {!isMobile && <CommonControls info={info} />}
+            <CommonControls info={info} />
           </View>
+        )}
       </View>
     </View>
   )
@@ -151,9 +150,9 @@ function CommonControls({
   info: AppBskyModerationDefs.ModServiceViewDetailed
 }) {
   const t = useTheme()
+  const {_} = useLingui()
   const {hasSession} = useSession()
   const {openModal} = useModalControls()
-  const {_} = useLingui()
 
   const onPressShare = React.useCallback(() => {
     const url = makeProfileLink(info.creator, 'modservice')
@@ -200,7 +199,6 @@ function CommonControls({
   }, [hasSession, onPressReport, onPressShare, _])
 
   return (
-    <>
     <NativeDropdown
       testID="headerDropdownBtn"
       items={dropdownItems}
@@ -210,29 +208,5 @@ function CommonControls({
         <Ellipsis width={20} fill={t.atoms.text_contrast_700.color} />
       </View>
     </NativeDropdown>
-    </>
   )
 }
-
-const styles = StyleSheet.create({
-  backBtn: {
-    width: 20,
-    height: 30,
-  },
-  backBtnWide: {
-    width: 20,
-    height: 30,
-    paddingHorizontal: 6,
-  },
-  backIcon: {
-    marginTop: 6,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingVertical: 7,
-    paddingHorizontal: 14,
-    borderRadius: 50,
-  },
-})

src/screens/ProfileModerationService/index.tsx

@@ -65,7 +65,6 @@ export function ProfileModserviceScreen(
     <CenteredView>
       <View
         style={[
-          a.pt_2xl,
           a.px_xl,
           a.border_l,
           a.border_r,

src/view/com/profile/ProfileHeaderModCard.tsx

@@ -12,6 +12,9 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {s, colors} from 'lib/styles'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 
+import {atoms as a} from '#/alf'
+import {Link} from '#/components/Link'
+
 const richtext = new RichTextAPI({
   text: "Bluesky's official moderation service",
 })
@@ -21,8 +24,10 @@ export function ProfileHeaderModCard() {
   const {isMobile} = useWebMediaQueries()
 
   return (
+    <Link to='/profile/alice.test/modservice' style={[a.flex_row]}>
       <View
         style={[
+          a.w_full,
           pal.view,
           pal.borderDark,
           s.mt5,
@@ -56,6 +61,7 @@ export function ProfileHeaderModCard() {
           )}
         </View>
       </View>
+    </Link>
   )
 }