updating modal styles

app/mobile/src/session/conversation/Conversation.jsx

@@ -67,7 +67,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
 
   return (
     
-  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={72}>
     <View style={styles.container}>
       { !navigation && (
         <View style={styles.header}>

app/mobile/src/session/conversation/addTopic/AddTopic.jsx

@@ -13,6 +13,7 @@ import { VideoFile } from './videoFile/VideoFile';
 import { AudioFile } from './audioFile/AudioFile';
 import { ImageFile } from './imageFile/ImageFile';
 import { BinaryFile } from './binaryFile/BinaryFile';
+import { BlurView } from "@react-native-community/blur";
 
 export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
 
@@ -227,8 +228,10 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideFontSize}
       >
-        <View style={styles.editWrapper}>
-          <View style={styles.editContainer}>
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <View style={styles.modalContainer}>
               <Text style={styles.editHeader}>Font Size:</Text>
               <View style={styles.editSize}>
                 { state.size === 'small' && (
@@ -265,11 +268,12 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
               <View style={styles.editControls}>
                 <View style={styles.selection} />
                 <TouchableOpacity style={styles.close} onPress={actions.hideFontSize}>
-                <Text>Close</Text>
+                  <Text style={styles.closeText}>Close</Text>
                 </TouchableOpacity>
               </View>
             </View>
           </View>
+        </View>
       </Modal>
       <Modal
         animationType="fade"
@@ -278,8 +282,10 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideFontColor}
       >
-        <View style={styles.editWrapper}>
-          <View style={styles.editContainer}>
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <View style={styles.modalContainer}>
               <Text style={styles.editHeader}>Font Color:</Text>
               <View style={styles.editColor}>
                 <ColorPicker
@@ -291,15 +297,16 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
               </View>
               <View style={styles.editControls}>
                 <View style={styles.selection}>
-                <Text>Set Color:</Text>
+                  <Text style={styles.selectionText}>Set Color:</Text>
                   <View style={{ marginLeft: 6, borderRadius: 4, width: 16, height: 16, backgroundColor: state.color }} />
                 </View>
                 <TouchableOpacity style={styles.close} onPress={actions.hideFontColor}>
-                <Text>Close</Text>
+                  <Text style={styles.closeText}>Close</Text>
                 </TouchableOpacity>
               </View>
             </View>
           </View>
+        </View>
       </Modal>
     </SafeAreaView>
   );

app/mobile/src/session/conversation/addTopic/AddTopic.styled.js

@@ -63,19 +63,15 @@ export const styles = StyleSheet.create({
   editHeader: {
     fontSize: 18,
     paddingBottom: 16,
+    color: Colors.text,
   },
   editSize: {
     width: '100%',
-    borderWidth: 1,
-    borderColor: Colors.lightgrey,
     borderRadius: 2,
   },
   editColor: {
     width: '100%',
     height: 300,
-    borderWidth: 1,
-    borderColor: Colors.lightgrey,
-    borderRadius: 2,
   },
   editControls: {
     display: 'flex',
@@ -120,7 +116,7 @@ export const styles = StyleSheet.create({
   },
   close: {
     borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.closeButton,
     borderRadius: 4,
     padding: 8,
     marginTop: 8,
@@ -128,12 +124,44 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
   },
+  closeText: {
+    color: Colors.closeButtonText,
+  },
   selection: {
     flexGrow: 1,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
   },
+  selectionText: {
+    color: Colors.text,
+  },
+  modalOverlay: { 
+    width: '100%',
+    height: '100%',
+  },
+  modalBase: {
+    position: 'absolute',
+    top: 0,
+    left: 0, 
+    width: '100%', 
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  modalContainer: {
+    backgroundColor: Colors.modalBase,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
+    width: '80%',
+    maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 8,
+  },
+
 })
 
 

app/mobile/src/session/details/Details.styled.js

@@ -201,6 +201,8 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     borderRadius: 8,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
     padding: 16,
   },
   close: {

app/mobile/src/session/profile/Profile.styled.js

@@ -294,6 +294,8 @@ export const styles = StyleSheet.create({
   },
   modalContainer: {
     backgroundColor: Colors.modalBase,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
     width: '80%',
     maxWidth: 400,
     display: 'flex',