Some i18n

src/components/Dialog/index.web.tsx

@@ -2,6 +2,8 @@ import React, {useImperativeHandle} from 'react'
 import {View, TouchableWithoutFeedback} from 'react-native'
 import {FocusScope} from '@tamagui/focus-scope'
 import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {useTheme, atoms as a, useBreakpoints, web} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -22,6 +24,7 @@ export function Outer({
   onClose,
   children,
 }: React.PropsWithChildren<DialogOuterProps>) {
+  const {_} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -74,7 +77,7 @@ export function Outer({
           <Context.Provider value={context}>
             <TouchableWithoutFeedback
               accessibilityHint={undefined}
-              accessibilityLabel="Close active dialog"
+              accessibilityLabel={_(msg`Close active dialog`)}
               onPress={close}>
               <View
                 style={[
@@ -170,6 +173,7 @@ export function Handle() {
 }
 
 export function Close() {
+  const {_} = useLingui()
   const t = useTheme()
   const {close} = useDialogContext()
   return (
@@ -182,10 +186,7 @@ export function Close() {
           right: a.pr_lg.paddingRight,
         },
       ]}>
-      <Button
-        onPress={close}
-        accessibilityLabel="Close dialog"
-        accessibilityHint="Clicking this button will close the current dialog.">
+      <Button onPress={close} label={_(msg`Close active dialog`)}>
         {() => (
           <View
             style={[

src/components/Prompt.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import {View, PressableProps} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {useTheme, atoms as a} from '#/alf'
 import {H4, P} from '#/components/Typography'
@@ -80,13 +82,14 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
 export function Cancel({
   children,
 }: React.PropsWithChildren<{onPress?: PressableProps['onPress']}>) {
+  const {_} = useLingui()
   const {close} = Dialog.useDialogContext()
   return (
     <Button
       variant="solid"
       color="secondary"
       size="small"
-      label="Cancel"
+      label={_(msg`Cancel`)}
       onPress={close}>
       {children}
     </Button>
@@ -97,6 +100,7 @@ export function Action({
   children,
   onPress,
 }: React.PropsWithChildren<{onPress?: () => void}>) {
+  const {_} = useLingui()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(() => {
     close()
@@ -107,7 +111,7 @@ export function Action({
       variant="solid"
       color="primary"
       size="small"
-      label="Confirm"
+      label={_(msg`Confirm`)}
       onPress={handleOnPress}>
       {children}
     </Button>

src/view/screens/Storybook/Forms.tsx

@@ -163,15 +163,6 @@ export function Forms() {
               <Toggle.Switch />
               <Toggle.Label>Click me</Toggle.Label>
             </Toggle.Item>
-
-            <Button
-              variant="solid"
-              color="primary"
-              size="small"
-              label="Reset"
-              onPress={() => setToggleGroupAValues(['a'])}>
-              Reset
-            </Button>
           </View>
         </Toggle.Group>
 
@@ -235,6 +226,19 @@ export function Forms() {
         </Toggle.Group>
       </View>
 
+      <Button
+        variant="gradient"
+        color="gradient_nordic"
+        size="small"
+        label="Reset all toggles"
+        onPress={() => {
+          setToggleGroupAValues(['a'])
+          setToggleGroupBValues(['a', 'b'])
+          setToggleGroupCValues(['a'])
+        }}>
+        Reset all toggles
+      </Button>
+
       <View style={[a.gap_md, a.align_start, a.w_full]}>
         <H3>ToggleButton</H3>