Migrate everything

src/components/Link.tsx

@@ -144,6 +144,7 @@ export function useLink({
       displayText,
       closeModal,
       openModal,
+      outerOnPress,
     ],
   )
 
@@ -181,10 +182,7 @@ export function Link({children, to, action = 'push', ...rest}: LinkProps) {
     <Button
       label={href}
       {...rest}
-      style={[
+      style={[a.justify_start, flatten(rest.style)]}
-        a.justify_start,
-        flatten(rest.style),
-      ]}
       role="link"
       accessibilityRole="link"
       href={href}
@@ -265,12 +263,6 @@ export function InlineLink({
             target: isExternal ? 'blank' : undefined,
             rel: isExternal ? 'noopener noreferrer' : undefined,
           },
-          dataSet: stringChildren
-            ? {}
-            : {
-                // default to no underline, apply this ourselves
-                noUnderline: '1',
-              },
         })}>
         {children}
       </Text>

src/components/forms/Toggle.tsx

@@ -2,7 +2,15 @@ import React from 'react'
 import {Pressable, View, ViewStyle} from 'react-native'
 
 import {HITSLOP_10} from 'lib/constants'
-import {useTheme, atoms as a, web, native, flatten, ViewStyleProp} from '#/alf'
+import {
+  useTheme,
+  atoms as a,
+  web,
+  native,
+  flatten,
+  ViewStyleProp,
+  TextStyleProp,
+} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 
@@ -232,7 +240,10 @@ export function Item({
   )
 }
 
-export function Label({children}: React.PropsWithChildren<{}>) {
+export function Label({
+  children,
+  style,
+}: React.PropsWithChildren<TextStyleProp>) {
   const t = useTheme()
   const {disabled} = useItemContext()
   return (
@@ -241,11 +252,14 @@ export function Label({children}: React.PropsWithChildren<{}>) {
         a.font_bold,
         {
           userSelect: 'none',
-          color: disabled ? t.palette.contrast_400 : t.palette.contrast_600,
+          color: disabled
+            ? t.atoms.text_contrast_low.color
+            : t.atoms.text_contrast_high.color,
         },
         native({
           paddingTop: 3,
         }),
+        flatten(style),
       ]}>
       {children}
     </Text>

src/screens/Moderation/index.tsx

@@ -1,30 +1,15 @@
 import React from 'react'
-import {
+import {View} from 'react-native'
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import {ComAtprotoLabelDefs} from '@atproto/api'
-import {NativeStackScreenProps, CommonNavigatorParams} from '#/lib/routes/types'
-import {s} from '#/lib/styles'
-import {CenteredView} from '#/view/com/util/Views'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {Link, TextLink} from '#/view/com/util/Link'
-import {Text as OldText} from '#/view/com/util/text/Text'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useModalControls} from '#/state/modals'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
+
+import {NativeStackScreenProps, CommonNavigatorParams} from '#/lib/routes/types'
+import {CenteredView} from '#/view/com/util/Views'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {useSession} from '#/state/session'
 import {
   useProfileQuery,
@@ -38,6 +23,9 @@ import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/componen
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
 import {Text} from '#/components/Typography'
+import * as Toggle from '#/components/forms/Toggle'
+import {InlineLink, Link} from '#/components/Link'
+import {Loader} from '#/components/Loader'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
 export function ModerationScreen({}: Props) {
@@ -71,7 +59,7 @@ export function ModerationScreen({}: Props) {
         <Link
           testID="moderationlistsBtn"
           style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
-          href="/moderation/modlists">
+          to="/moderation/modlists">
           <View
             style={[
               a.align_center,
@@ -92,7 +80,7 @@ export function ModerationScreen({}: Props) {
         <Link
           testID="mutedAccountsBtn"
           style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
-          href="/moderation/muted-accounts">
+          to="/moderation/muted-accounts">
           <View
             style={[
               a.align_center,
@@ -113,7 +101,7 @@ export function ModerationScreen({}: Props) {
         <Link
           testID="blockedAccountsBtn"
           style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
-          href="/moderation/blocked-accounts">
+          to="/moderation/blocked-accounts">
           <View
             style={[
               a.align_center,
@@ -141,7 +129,7 @@ export function ModerationScreen({}: Props) {
 }
 
 function PwiOptOut() {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
@@ -197,88 +185,46 @@ function PwiOptOut() {
   }, [updateProfile, profile])
 
   return (
-    <View style={[pal.view, styles.toggleCard]}>
+    <View style={[a.pt_sm, a.px_lg]}>
-      <View
+      <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
-        style={{flexDirection: 'row', alignItems: 'center', paddingRight: 14}}>
+        <Toggle.Item
-        <ToggleButton
+          disabled={!canToggle}
-          type="default-light"
+          value={isOptedOut}
+          onChange={onToggleOptOut}
+          name="logged_out_visibility"
           label={_(
             msg`Discourage apps from showing my account to logged-out users`,
-          )}
+          )}>
-          labelType="lg"
+          <Toggle.Switch />
-          isSelected={isOptedOut}
+          <Toggle.Label style={[a.text_md]}>
-          onPress={canToggle ? onToggleOptOut : undefined}
+            Discourage apps from showing my account to logged-out users
-          style={[canToggle ? undefined : {opacity: 0.5}, {flex: 1}]}
+          </Toggle.Label>
-        />
+        </Toggle.Item>
-        {updateProfile.isPending && <ActivityIndicator />}
+
+        {updateProfile.isPending && <Loader />}
       </View>
-      <View
+
-        style={{
+      <View style={[a.pt_md, a.gap_md, {paddingLeft: 38}]}>
-          flexDirection: 'column',
+        <Text style={[a.leading_snug, t.atoms.text_contrast_high]}>
-          gap: 10,
-          paddingLeft: 66,
-          paddingRight: 12,
-          paddingBottom: 10,
-          marginBottom: 64,
-        }}>
-        <OldText style={pal.textLight}>
           <Trans>
             Bluesky will not show your profile and posts to logged-out users.
             Other apps may not honor this request. This does not make your
             account private.
           </Trans>
-        </OldText>
+        </Text>
-        <OldText style={[pal.textLight, {fontWeight: '500'}]}>
+        <Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>
           <Trans>
             Note: Bluesky is an open and public network. This setting only
             limits the visibility of your content on the Bluesky app and
             website, and other apps may not respect this setting. Your content
             may still be shown to logged-out users by other apps and websites.
           </Trans>
-        </OldText>
+        </Text>
-        <TextLink
+
-          style={pal.link}
+        <InlineLink to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
-          href="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy"
+          <Trans>Learn more about what is public on Bluesky.</Trans>
-          text={_(msg`Learn more about what is public on Bluesky.`)}
+        </InlineLink>
-        />
       </View>
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  desktopContainer: {
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-  },
-  spacer: {
-    height: 6,
-  },
-  linkCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 18,
-    marginBottom: 1,
-  },
-  toggleCard: {
-    paddingVertical: 8,
-    paddingTop: 2,
-    paddingHorizontal: 6,
-    marginBottom: 1,
-  },
-  iconContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 40,
-    height: 40,
-    borderRadius: 30,
-    marginRight: 12,
-  },
-  noBorder: {
-    borderBottomWidth: 0,
-    borderRightWidth: 0,
-    borderLeftWidth: 0,
-    borderTopWidth: 0,
-  },
-})