From 53da8d77140420ea9b5243938ec2927b92779a0f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 12 Feb 2024 17:45:07 -0600
Subject: [PATCH] Migrate everything

---
 src/components/Link.tsx          |  12 +--
 src/components/forms/Toggle.tsx  |  20 ++++-
 src/screens/Moderation/index.tsx | 132 +++++++++----------------------
 3 files changed, 58 insertions(+), 106 deletions(-)

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index ee5c916958..25f3497014 100644
--- a/src/components/Link.tsx
+++ b/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={[
-        a.justify_start,
-        flatten(rest.style),
-      ]}
+      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>
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index 9369423f20..b83465dded 100644
--- a/src/components/forms/Toggle.tsx
+++ b/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>
diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx
index a40ec29891..52bfe1432b 100644
--- a/src/screens/Moderation/index.tsx
+++ b/src/screens/Moderation/index.tsx
@@ -1,30 +1,15 @@
 import React from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {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={{flexDirection: 'row', alignItems: 'center', paddingRight: 14}}>
-        <ToggleButton
-          type="default-light"
+    <View style={[a.pt_sm, a.px_lg]}>
+      <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
+        <Toggle.Item
+          disabled={!canToggle}
+          value={isOptedOut}
+          onChange={onToggleOptOut}
+          name="logged_out_visibility"
           label={_(
             msg`Discourage apps from showing my account to logged-out users`,
-          )}
-          labelType="lg"
-          isSelected={isOptedOut}
-          onPress={canToggle ? onToggleOptOut : undefined}
-          style={[canToggle ? undefined : {opacity: 0.5}, {flex: 1}]}
-        />
-        {updateProfile.isPending && <ActivityIndicator />}
+          )}>
+          <Toggle.Switch />
+          <Toggle.Label style={[a.text_md]}>
+            Discourage apps from showing my account to logged-out users
+          </Toggle.Label>
+        </Toggle.Item>
+
+        {updateProfile.isPending && <Loader />}
       </View>
-      <View
-        style={{
-          flexDirection: 'column',
-          gap: 10,
-          paddingLeft: 66,
-          paddingRight: 12,
-          paddingBottom: 10,
-          marginBottom: 64,
-        }}>
-        <OldText style={pal.textLight}>
+
+      <View style={[a.pt_md, a.gap_md, {paddingLeft: 38}]}>
+        <Text style={[a.leading_snug, t.atoms.text_contrast_high]}>
           <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>
-        <OldText style={[pal.textLight, {fontWeight: '500'}]}>
+        </Text>
+        <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>
-        <TextLink
-          style={pal.link}
-          href="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy"
-          text={_(msg`Learn more about what is public on Bluesky.`)}
-        />
+        </Text>
+
+        <InlineLink to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
+          <Trans>Learn more about what is public on Bluesky.</Trans>
+        </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,
-  },
-})