Fixed trades risk disclaimer on mobile (#1402)

Author: musidlo

packages/app/features/account/components/AccountHeader.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, FadeCard, Paragraph, Separator, XStack, YStack } from '@my/ui'
+import { Avatar, Button, Fade, FadeCard, Paragraph, Separator, XStack, YStack } from '@my/ui'
 import type { YStackProps } from 'tamagui'
 import { IconAccount, IconQRFull, IconShare } from 'app/components/icons'
 import { useUser } from 'app/utils/useUser'
@@ -52,28 +52,30 @@ export const AccountHeader = (props: YStackProps) => {
           </YStack>
         </XStack>
       </FadeCard>
-      <XStack gap={'$3.5'}>
-        <Button
-          f={1}
-          py={'$5'}
-          bw={0}
-          h={'auto'}
-          br={'$5'}
-          onPress={handleSharePress}
-          hoverStyle={hoverStyles}
-        >
-          <Button.Icon>
-            <IconShare size={'$1.5'} color={'$primary'} $theme-light={{ color: '$color12' }} />
-          </Button.Icon>
-          <Button.Text size={'$5'}>Refer Friends</Button.Text>
-        </Button>
-        <Button f={1} py={'$5'} h={'auto'} br={'$5'} bw={0} hoverStyle={hoverStyles}>
-          <Button.Icon>
-            <IconQRFull size={'$1'} color={'$primary'} $theme-light={{ color: '$color12' }} />
-          </Button.Icon>
-          <Button.Text size={'$5'}>Share Profile</Button.Text>
-        </Button>
-      </XStack>
+      <Fade>
+        <XStack gap={'$3.5'}>
+          <Button
+            f={1}
+            py={'$5'}
+            bw={0}
+            h={'auto'}
+            br={'$5'}
+            onPress={handleSharePress}
+            hoverStyle={hoverStyles}
+          >
+            <Button.Icon>
+              <IconShare size={'$1.5'} color={'$primary'} $theme-light={{ color: '$color12' }} />
+            </Button.Icon>
+            <Button.Text size={'$5'}>Refer Friends</Button.Text>
+          </Button>
+          <Button f={1} py={'$5'} h={'auto'} br={'$5'} bw={0} hoverStyle={hoverStyles}>
+            <Button.Icon>
+              <IconQRFull size={'$1'} color={'$primary'} $theme-light={{ color: '$color12' }} />
+            </Button.Icon>
+            <Button.Text size={'$5'}>Share Profile</Button.Text>
+          </Button>
+        </XStack>
+      </Fade>
     </YStack>
   )
 }

packages/app/features/swap/form/RiskDialog/SwapRiskDialog.tsx

@@ -28,18 +28,8 @@ const SwapRiskDialog = () => {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <Dialog.Adapt when="sm" platform="touch">
-        <Dialog.Sheet zIndex={400000} modal dismissOnSnapToBottom>
-          <Dialog.Sheet.Frame padding="$4">
-            <Dialog.Adapt.Contents />
-          </Dialog.Sheet.Frame>
-          <Dialog.Sheet.Overlay />
-        </Dialog.Sheet>
-      </Dialog.Adapt>
-
       <Dialog.Portal>
         <Dialog.Overlay />
-
         <Dialog.Content
           key="swap-risk-dialog"
           gap="$4"
@@ -90,8 +80,8 @@ const SwapRiskDialog = () => {
               </XStack>
               <XStack justifyContent="flex-end" marginTop="$4" gap="$4">
                 <Dialog.Close asChild>
-                  <Button testID={'swapRiskDialogCancelButton'} br={'$2'}>
-                    Cancel
+                  <Button theme="red_active" testID={'swapRiskDialogCancelButton'} br={'$2'}>
+                    <Button.Text>Cancel</Button.Text>
                   </Button>
                 </Dialog.Close>
                 <Button
@@ -102,7 +92,7 @@ const SwapRiskDialog = () => {
                   disabled={!isChecked}
                   disabledStyle={{ opacity: 0.5 }}
                 >
-                  <Button.Text>Continue</Button.Text>
+                  <Button.Text>I Agree & Continue</Button.Text>
                 </Button>
               </XStack>
             </YStack>