From 67221f33635797465eb07a90ef03fcc8f5994f0a Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 4 Sep 2023 18:12:49 -0700
Subject: [PATCH] extending blocked modal stubs

---
 app/mobile/src/constants/Colors.js            | 12 ++++--
 app/mobile/src/session/settings/Settings.jsx  | 32 ++++++++++++----
 .../src/session/settings/Settings.styled.js   | 38 +++++++++++++++++--
 3 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js
index 9eeaefca..e0407bc3 100644
--- a/app/mobile/src/constants/Colors.js
+++ b/app/mobile/src/constants/Colors.js
@@ -28,6 +28,8 @@ const LightColors = {
   disabledButtonText: '#aaaaaa',
   dangerButton: '#ff5555',
   dangerButtonText: '#ffffff',
+  closeButton: '#eeeeee',
+  closeButtonText: '#444444',
   inputBase: '#eeeeee',
   inputPlaceholder: '#888888',
   inputText: '#444444',
@@ -38,7 +40,7 @@ const LightColors = {
   confirmedIndicator: '#88bb00',
   unknownIndicator: '#dddddd',
   errorIndicator: '#ffaaaa',
-  horizontalDivider: '#eeeeee',
+  horizontalDivider: '#bbbbbb',
   verticalDivider: '#aaaaaa',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',
@@ -75,6 +77,8 @@ const DarkColors = {
   disabledButtonText: '#aaaaaa',
   dangerButton: '#ff5555',
   dangerButtonText: '#ffffff',
+  closeButton: '#111111',
+  closeButtonText: '#ffffff',
   inputBase: '#333333',
   inputPlaceholder: '#aaaaaa',
   inputText: '#eeeeee',
@@ -85,7 +89,7 @@ const DarkColors = {
   confirmedIndicator: '#88bb00',
   unknownIndicator: '#dddddd',
   errorIndicator: '#ffaaaa',
-  horizonalDivider: '#888888',
+  horizontalDivider: '#888888',
   verticalDivider: '#aaaaaa',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',
@@ -126,6 +130,8 @@ export const Colors = {
   disabledButtonText: getColor('disabledButtonText'),
   dangerButton: getColor('dangerButton'),
   dangerButtonText: getColor('dangerButtonText'),
+  closeButton: getColor('closeButton'),
+  closeButtonText: getColor('closeButtonText'),
   inputBase: getColor('inputBase'),
   inputPlaceholder: getColor('inputPlaceholder'),
   inputText: getColor('inputText'),
@@ -136,7 +142,7 @@ export const Colors = {
   confirmedIndicator: getColor('confirmedIndicator'),
   unknownIndicator: getColor('unknownIndicator'),
   errorIndicator: getColor('errorIndicator'),
-  horizonalDivider: getColor('horizontalDivider'),
+  horizontalDivider: getColor('horizontalDivider'),
   verticalDivider: getColor('verticalDivider'),
   unreadIndicator: getColor('unreadIndicator'),
   enabledIndicator: getColor('enabledIndicator'),
diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index 0564eb90..8f6441e4 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -271,7 +271,7 @@ export function Settings() {
           <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
-                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideEditSeal}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideEditSeal}>
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
@@ -482,7 +482,7 @@ export function Settings() {
           <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
-                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideLogin}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideLogin}>
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
@@ -561,7 +561,7 @@ export function Settings() {
           <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
-                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideDelete}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideDelete}>
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
@@ -608,12 +608,18 @@ export function Settings() {
           <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
-                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedContacts}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideBlockedContacts}>
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
               <Text style={styles.modalHeader}>{ state.strings.blockedContacts }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
+              <View style={styles.modalList}></View>
+              <View style={styles.rightButton}>
+                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedContacts}>
+                  <Text style={styles.closeButtonText}>{ state.strings.close }</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           </BlurView>
         </Modal>
@@ -628,12 +634,18 @@ export function Settings() {
           <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
-                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedTopics}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideBlockedTopics}>
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
               <Text style={styles.modalHeader}>{ state.strings.blockedContacts }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
+              <View style={styles.modalList}></View>
+              <View style={styles.rightButton}>
+                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedTopics}>
+                  <Text style={styles.closeButtonText}>{ state.strings.close }</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           </BlurView>
         </Modal>
@@ -648,17 +660,21 @@ export function Settings() {
           <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
-                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedMessages}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideBlockedMessages}>
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
               <Text style={styles.modalHeader}>{ state.strings.blockedContacts }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
+              <View style={styles.modalList}></View>
+              <View style={styles.rightButton}>
+                <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedMessages}>
+                  <Text style={styles.closeButtonText}>{ state.strings.close }</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           </BlurView>
         </Modal>
-       
-    
      
       </SafeAreaView>
     </ScrollView>
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index db8d049e..04031392 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/app/mobile/src/session/settings/Settings.styled.js
@@ -20,6 +20,9 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
   },
+  dismissButton: {
+    padding: 12,
+  },
   idleRadioCircle: {
     borderWidth: 1,
     borderColor: Colors.activeBorder,
@@ -138,9 +141,6 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'flex-end',
   },
-  closeButton: {
-    padding: 12,
-  },
   modalBusy: {
   },
   modalDescription: {
@@ -232,6 +232,23 @@ export const styles = StyleSheet.create({
     color: Colors.dangerButtonText,
     fontFamily: 'Roboto',
   },
+  closeButton: {
+    marginTop: 8,
+    marginBottom: 16,
+    marginRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 32,
+    paddingRight: 32,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: Colors.cancelButton,
+    backgroundColor: Colors.closeButton,
+  },
+  closeButtonText: {
+    color: Colors.closeButtonText,
+    fontFamily: 'Roboto',
+  },
   cancelButton: {
     marginTop: 8,
     marginBottom: 16,
@@ -292,5 +309,20 @@ export const styles = StyleSheet.create({
   notAvailable: {
     color: Colors.dangerText,
   },
+  rightButton: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'flex-end',
+  },
+  modalList: {
+    width: '100%',
+    minHeight: 128,
+    maxHeight: 256,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    marginBottom: 8,
+    borderColor: Colors.horizontalDivider,
+    display: 'flex'
+  },
 });