More UI fixes

helium · Oct 16, 2024 · ee6cfc9 · ee6cfc9
1 parent 6596735
commit ee6cfc9
Show file tree

Hide file tree

Showing 21 changed files with 332 additions and 212 deletions.
diff --git a/src/assets/images/closeModal.svg b/src/assets/images/closeModal.svg
diff --git a/src/assets/images/info.svg b/src/assets/images/info.svg
diff --git a/src/components/ButtonPressable.tsx b/src/components/ButtonPressable.tsx
@@ -9,6 +9,7 @@ import { useCreateOpacity } from '@theme/themeHooks'
 import Box from './Box'
 import ButtonPressAnimation from './ButtonPressAnimation'
 import Text from './Text'
+import CircleLoader from './CircleLoader'
 
 type Props = BoxProps<Theme> & {
   backgroundColorDisabled?: Color
@@ -34,6 +35,9 @@ type Props = BoxProps<Theme> & {
   LeadingComponent?: React.ReactNode
   TrailingComponent?: React.ReactNode
   iconProps?: SvgProps
+  loading?: boolean
+  customLoadingColor?: Color
+  customLoadingColorDisabled?: Color
 }
 
 const ButtonPressable = ({
@@ -62,6 +66,9 @@ const ButtonPressable = ({
   LeadingComponent,
   TrailingComponent,
   iconProps,
+  loading,
+  customLoadingColor = 'primaryText',
+  customLoadingColorDisabled = 'text.disabled',
   ...boxProps
 }: Props) => {
   const [pressed, setPressed] = useState(false)
@@ -137,6 +144,12 @@ const ButtonPressable = ({
     backgroundColorOpacity,
   ])
 
+  const circleLoaderColor = useMemo(() => {
+    if (disabled) return customLoadingColorDisabled
+    if (loading) return customLoadingColor
+    return 'primaryText'
+  }, [disabled, loading, customLoadingColor, customLoadingColorDisabled])
+
   return (
     <ButtonPressAnimation
       overflow="hidden"
@@ -155,23 +168,34 @@ const ButtonPressable = ({
         flexDirection="row"
         justifyContent={Icon ? 'center' : 'center'}
         alignItems="center"
+        borderRadius="full"
         {...containerProps}
       >
-        {LeadingComponent && <Box marginEnd="xs">{LeadingComponent}</Box>}
+        {loading ? (
+          <Box flexDirection="row" alignItems="center" padding="4">
+            <CircleLoader color={circleLoaderColor} loaderSize={20} />
+          </Box>
+        ) : (
+          <>
+            {LeadingComponent && <Box marginEnd="xs">{LeadingComponent}</Box>}
 
-        {title && (
-          <Text
-            variant="textXlMedium"
-            fontSize={fontSize || 19}
-            fontWeight={fontWeight}
-            style={titleColorStyle}
-            marginHorizontal="xs"
-          >
-            {title}
-          </Text>
+            {title && (
+              <Text
+                variant="textXlMedium"
+                fontSize={fontSize || 19}
+                fontWeight={fontWeight}
+                style={titleColorStyle}
+                marginHorizontal="xs"
+              >
+                {title}
+              </Text>
+            )}
+            {Icon && <Icon color={iconColor} {...iconProps} />}
+            {TrailingComponent && (
+              <Box marginStart="xs">{TrailingComponent}</Box>
+            )}
+          </>
         )}
-        {Icon && <Icon color={iconColor} {...iconProps} />}
-        {TrailingComponent && <Box marginStart="xs">{TrailingComponent}</Box>}
       </Box>
     </ButtonPressAnimation>
   )

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
@@ -4,25 +4,31 @@ import Close from '@assets/images/closeModal.svg'
 import { GestureResponderEvent, Insets } from 'react-native'
 import { BoxProps } from '@shopify/restyle'
 import { useColors } from '@theme/themeHooks'
-import { Theme } from '@theme/theme'
+import { Color, Theme } from '@theme/theme'
 import IconPressedContainer from './IconPressedContainer'
 import Box from './Box'
 
 export type CloseButtonProps = {
   onPress?: ((event: GestureResponderEvent) => void) | null | undefined
   hitSlop?: Insets | undefined
+  color?: Color
 } & BoxProps<Theme>
 
-const CloseButton = ({ onPress, hitSlop, ...props }: CloseButtonProps) => {
-  const { primaryText } = useColors()
+const CloseButton = ({
+  onPress,
+  hitSlop,
+  color = 'primaryText',
+  ...props
+}: CloseButtonProps) => {
+  const colors = useColors()
   return (
     <Box hitSlop={hitSlop} {...props}>
       <IconPressedContainer
         onPress={onPress}
         idleOpacity={0.75}
         activeOpacity={0.9}
       >
-        <Close color={primaryText} />
+        <Close color={colors[color]} />
       </IconPressedContainer>
     </Box>
   )

diff --git a/src/features/account/AccountActionBar.tsx b/src/features/account/AccountActionBar.tsx
@@ -58,8 +58,13 @@ const AccountActionBar = ({
           if (pin?.status === 'on' && requirePinForPayment) {
             walletPageNav.navigate('ConfirmPin', { action: 'payment' })
           } else {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             navigation.navigate('Send', {
-              mint: mint?.toBase58(),
+              screen: 'PaymentScreen',
+              params: {
+                mint: mint?.toBase58(),
+              },
             })
           }
           break

diff --git a/src/features/account/AccountManageTokenListScreen.tsx b/src/features/account/AccountManageTokenListScreen.tsx
@@ -169,7 +169,7 @@ const AccountManageTokenListScreen: React.FC = () => {
 
   return (
     <ScrollBox>
-      <BackScreen>
+      <BackScreen edges={[]} headerTopMargin="6xl">
         <FlatList
           refreshControl={
             <RefreshControl

diff --git a/src/features/collectables/AssertLocationScreen.tsx b/src/features/collectables/AssertLocationScreen.tsx
@@ -56,6 +56,7 @@ import 'text-encoding-polyfill'
 import { useDebounce } from 'use-debounce'
 import { useColors, useCreateOpacity, useSpacing } from '@theme/themeHooks'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import CloseButton from '@components/CloseButton'
 import {
   CollectableNavigationProp,
   CollectableStackParamList,
@@ -732,7 +733,8 @@ const AssertLocationScreen = () => {
           </Box>
         )}
         {elevGainVisible ? (
-          <ReAnimatedBlurBox
+          <ReAnimatedBox
+            backgroundColor="primaryBackground"
             visible={elevGainVisible}
             entering={FadeInFast}
             flexDirection="row"
@@ -743,6 +745,15 @@ const AssertLocationScreen = () => {
           >
             <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
               <Box flex={1}>
+                <Box flexDirection="row">
+                  <Box flex={1} />
+                  <CloseButton
+                    marginEnd="4"
+                    marginTop="6xl"
+                    color="primaryText"
+                    onPress={() => setElevGainVisible(false)}
+                  />
+                </Box>
                 <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
                   <Box
                     backgroundColor="transparent"
@@ -755,6 +766,7 @@ const AssertLocationScreen = () => {
                         textAlign="left"
                         variant="textLgMedium"
                         adjustsFontSizeToFit
+                        color="primaryText"
                       >
                         {t('assertLocationScreen.antennaSetup')}
                       </Text>
@@ -824,7 +836,7 @@ const AssertLocationScreen = () => {
                 </Box>
               </Box>
             </TouchableWithoutFeedback>
-          </ReAnimatedBlurBox>
+          </ReAnimatedBox>
         ) : undefined}
       </Box>
     </ReAnimatedBox>

diff --git a/src/features/collectables/HotspotMapScreen.tsx b/src/features/collectables/HotspotMapScreen.tsx
@@ -553,7 +553,7 @@ const HotspotMapScreen = () => {
       <BottomSheetModalProvider>
         <BottomSheetModal
           ref={bottomSheetRef}
-          snapPoints={[160]}
+          snapPoints={[200]}
           enablePanDownToClose
           enableDynamicSizing
           animateOnMount