wip

components/BottomModal.tsx

@@ -166,8 +166,8 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
       if (React.isValidElement(footer)) {
         return footerDefaultMargins ? <View style={styles.footerContainer}>{footer}</View> : footer;
       } else if (typeof footer === 'function') {
-        const FooterComponent = footer as ComponentType<any>;
-        return <FooterComponent />;
+        const ModalFooterComponent = footer as ComponentType<any>;
+        return <ModalFooterComponent />;
       }
 
       return undefined;
@@ -186,9 +186,9 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
         FooterComponent={FooterComponent as ReactElement}
         {...props}
       >
-        {renderHeader()}
         <View style={styles.childrenContainer}>{children}</View>
         {Platform.OS === 'android' && (renderFooter() as ReactNode)}
+        {renderHeader()}
       </TrueSheet>
     );
   },
@@ -202,10 +202,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   headerContainer: {
+    position: 'absolute',
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 8,
     minHeight: 22,
+    right: 16,
+    top: 16,
   },
   headerContent: {
     flex: 1,
@@ -236,7 +239,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   childrenContainer: {
-    marginTop: 0,
+    paddingTop: 66,
+    paddingHorizontal: 16,
     width: '100%',
   },
 });

components/PromptPasswordConfirmationModal.tsx

@@ -259,18 +259,24 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
     return (
       <BottomModal
         ref={modalRef}
-        showCloseButton={showExplanation}
         onDismiss={onModalDismiss}
         grabber={false}
+        onCloseModalPressed={handleCancel}
         backgroundColor={colors.modal}
-        contentContainerStyle={styles.modalContent}
         footer={
           !isSuccess ? (
-            showExplanation && modalType === MODAL_TYPES.CREATE_PASSWORD ? null : (
+            showExplanation && modalType === MODAL_TYPES.CREATE_PASSWORD ? (
+              <Animated.View style={[{ opacity: explanationOpacity }, styles.feeModalFooterSpacing]}>
+                <SecondButton
+                  title={loc.settings.i_understand}
+                  onPress={handleTransitionToCreatePassword}
+                  disabled={isLoading}
+                  testID="IUnderstandButton"
+                />
+              </Animated.View>
+            ) : (
               <Animated.View style={{ opacity: fadeOutAnimation, transform: [{ scale: scaleAnimation }] }}>
                 <View style={styles.feeModalFooter}>
-                  <SecondButton testID="CancelButton" title={loc._.cancel} onPress={handleCancel} disabled={isLoading} />
-                  <View style={styles.feeModalFooterSpacing} />
                   <SecondButton
                     title={isLoading ? '' : loc._.ok}
                     onPress={handleSubmit}
@@ -285,7 +291,7 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
         }
       >
         {!isSuccess && (
-          <Animated.View style={animatedViewStyle}>
+          <Animated.View style={[animatedViewStyle, styles.minHeight]}>
             {modalType === MODAL_TYPES.CREATE_PASSWORD && showExplanation && (
               <Animated.View style={{ opacity: explanationOpacity }}>
                 <Text style={[styles.textLabel, stylesHook.feeModalLabel]}>{loc.settings.encrypt_storage_explanation_headline}</Text>
@@ -296,12 +302,6 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
                   {loc.settings.encrypt_storage_explanation_description_line2}
                 </Text>
                 <View style={styles.feeModalFooter} />
-                <SecondButton
-                  title={loc.settings.i_understand}
-                  onPress={handleTransitionToCreatePassword}
-                  disabled={isLoading}
-                  testID="IUnderstandButton"
-                />
               </Animated.View>
             )}
             {(modalType === MODAL_TYPES.ENTER_PASSWORD ||
@@ -393,9 +393,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  minHeight: {
+    minHeight: 320,
+  },
   feeModalFooter: {
-    paddingBottom: 36,
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },

components/SelectFeeModal.tsx

@@ -148,8 +148,8 @@ const SelectFeeModal = forwardRef<BottomModalHandle, SelectFeeModalProps>(
       }
       const fee = Number(customFee) < 1 ? '1' : customFee;
       setCustomFee(fee);
-      await feeModalRef.current?.dismiss();
       await customModalRef.current?.dismiss();
+      await feeModalRef.current?.dismiss();
     };
 
     const handleCancel = async () => {
@@ -171,8 +171,6 @@ const SelectFeeModal = forwardRef<BottomModalHandle, SelectFeeModalProps>(
       <BottomModal
         ref={feeModalRef}
         backgroundColor={colors.modal}
-        contentContainerStyle={styles.modalContent}
-        footerDefaultMargins
         footer={
           <View style={styles.feeModalFooter}>
             <TouchableOpacity testID="feeCustom" accessibilityRole="button" onPress={handlePressCustom}>
@@ -213,7 +211,6 @@ const SelectFeeModal = forwardRef<BottomModalHandle, SelectFeeModalProps>(
           blurTint="regular"
           onCloseModalPressed={handleCancel}
           backgroundColor={colors.modal}
-          contentContainerStyle={styles.modalContent}
           footer={
             <View style={[styles.feeModalFooter, styles.feeModalFooterSpacing]}>
               <SecondButton title={loc._.ok} onPress={handleCustomFeeSubmit} disabled={!customFee || Number(customFee) <= 0} />
@@ -259,9 +256,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 8,
   },
-  modalContent: {
-    margin: 22,
-  },
   optionsContent: {
     padding: 22,
   },

screen/send/coinControl.js

@@ -218,7 +218,7 @@ const OutputModalContent = ({ output, wallet, onUseCoin, frozen, setFrozen }) =>
   }, [memo]);
 
   return (
-    <>
+    <View style={styles.padding}>
       <OutputModal item={output} balanceUnit={wallet.getPreferredBalanceUnit()} />
       <BlueSpacing20 />
       <TextInput
@@ -243,7 +243,7 @@ const OutputModalContent = ({ output, wallet, onUseCoin, frozen, setFrozen }) =>
         switch={switchValue}
       />
       <BlueSpacing20 />
-    </>
+    </View>
   );
 };
 
@@ -425,8 +425,7 @@ const CoinControl = () => {
             <Button testID="UseCoin" title={loc.cc.use_coin} onPress={() => handleUseCoin([output])} />
           </View>
         }
-        footerDefaultMargins
-        contentContainerStyle={[styles.modalContent, styles.modalMinHeight]}
+        contentContainerStyle={styles.modalMinHeight}
       >
         {output && renderOutputModalContent()}
       </BottomModal>
@@ -468,10 +467,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  modalContent: {
-    padding: 22,
+  padding: {
+    padding: 16,
   },
-  modalMinHeight: Platform.OS === 'android' ? { minHeight: 500 } : {},
+  modalMinHeight: Platform.OS === 'android' ? { minHeight: 420 } : {},
   empty: {
     flex: 1,
     justifyContent: 'center',