From 975bdd56460c5263c1c43cc5e7e188bc50dd69e7 Mon Sep 17 00:00:00 2001
From: marcosrdz <marcospr@pm.me>
Date: Tue, 10 Nov 2020 22:02:36 -0500
Subject: [PATCH] FIX:  Quorum modal, not possible to go back #2069

---
 screen/wallets/addMultisig.js | 42 +++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/screen/wallets/addMultisig.js b/screen/wallets/addMultisig.js
index 92e68e90d..bdba4f7e6 100644
--- a/screen/wallets/addMultisig.js
+++ b/screen/wallets/addMultisig.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useContext } from 'react';
-import { Keyboard, KeyboardAvoidingView, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Keyboard, Image, KeyboardAvoidingView, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import LottieView from 'lottie-react-native';
 import { Icon } from 'react-native-elements';
 import { BlueButton, BlueListItem, BlueNavigationStyle, BlueSpacing20 } from '../../BlueComponents';
@@ -11,7 +11,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 
 const WalletsAddMultisig = () => {
-  const { colors } = useTheme();
+  const { colors, closeImage } = useTheme();
   const { navigate } = useNavigation();
   const loadingAnimation = useRef();
 
@@ -92,20 +92,28 @@ const WalletsAddMultisig = () => {
     setN(n - 1);
   };
 
+  const closeModal = () => {
+    Keyboard.dismiss();
+    setIsModalVisible(false);
+  };
+
   const renderModal = () => {
     return (
-      <Modal
-        isVisible={isModalVisible}
-        style={styles.bottomModal}
-        onBackdropPress={() => {
-          Keyboard.dismiss();
-          setIsModalVisible(false);
-        }}
-      >
+      <Modal isVisible={isModalVisible} style={styles.bottomModal} onBackdropPress={closeModal}>
         <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
           <View style={[styles.modalContentShort, stylesHook.modalContentShort]}>
-            <Text style={[styles.textHeader, stylesHook.textHeader]}>{loc.multisig.quorum_header}</Text>
-            <Text style={[styles.textSubtitle, stylesHook.textSubtitle]}>{loc.multisig.required_keys_out_of_total}</Text>
+            <View style={styles.modalHeader}>
+              <View style={styles.modalHeaderContent}>
+                <Text style={[styles.textHeader, stylesHook.textHeader]}>{loc.multisig.quorum_header}</Text>
+                <Text style={[styles.textSubtitle, stylesHook.textSubtitle]}>{loc.multisig.required_keys_out_of_total}</Text>
+              </View>
+              <View style={styles.modalHeaderContentCloseButton}>
+                <TouchableOpacity onPress={closeModal}>
+                  <Image source={closeImage} />
+                </TouchableOpacity>
+              </View>
+            </View>
+
             <View style={styles.rowCenter}>
               <View style={styles.column}>
                 <TouchableOpacity onPress={increaseM} disabled={n === m || m === 7} style={styles.chevron}>
@@ -239,6 +247,16 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     margin: 0,
   },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  modalHeaderContent: {
+    flexDirection: 'column',
+  },
+  modalHeaderContentCloseButton: {
+    justifyContent: 'center',
+  },
   item: {
     paddingHorizontal: 0,
   },