updating topic action modals

app/mobile/src/constants/Colors.js

@@ -16,12 +16,12 @@ const LightColors = {
   labelText: '#555555',
   iconText: '#fffff',
   unsetText: '#999999',
-  descriptionText: '#888888',
+  descriptionText: '#777777',
   text: '#444444',
   screenBase: '#cccccc',
   drawerBase: '#bbbbbb',
   areaBase: '#dddddd',
-  contentBase: '#f0f0f0',
+  contentBase: '#bbbbbb',
   modalBase: '#ffffff',
   modalBorder: '#555555',
   modalOverlay: 'rgba(52,52,52,0.8)',
@@ -31,7 +31,7 @@ const LightColors = {
   cancelButton: '#888888',
   cancelButtonText: '#ffffff',
   disabledButton: '#dddddd',
-  disabledButtonText: '#aaaaaa',
+  disabledButtonText: '#777777',
   dangerButton: '#ff5555',
   dangerButtonText: '#ffffff',
   closeButton: '#bbbbbb',

app/mobile/src/session/Session.styled.js

@@ -83,6 +83,7 @@ export const styles = StyleSheet.create({
     width: '33%',
     maxWidth: 500,
     borderRightWidth: 1,
+    backgroundColor: Colors.contentBase,
     borderColor: Colors.verticalDivider,
   },
   conversation: {

app/mobile/src/session/channels/channelItem/ChannelItem.styled.js

@@ -45,7 +45,7 @@ export const styles = StyleSheet.create({
     fontSize: 16,
   },
   message: {
-    color: Colors.disabled,
+    color: Colors.descriptionText,
     fontSize: 14,
   },
   dot: {

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 behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={navigation ? 72 : 0}>
     <View style={styles.container}>
       { !navigation && (
         <View style={styles.header}>

app/mobile/src/session/conversation/Conversation.styled.js

@@ -51,6 +51,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    flexShrink: 1,
     height: '100%',
     backgroundColor: Colors.contentBase,
   },

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -193,16 +193,16 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
               <AntIcons name="edit" size={24} color={Colors.white} />
             </TouchableOpacity>
           )}
-          <TouchableOpacity style={styles.icon} onPress={hideMessage}>
+          <TouchableOpacity style={styles.icon} onPress={() => actions.promptBlock(block)}>
             <MatIcons name="block-helper" size={18} color={Colors.white} />
           </TouchableOpacity>
           { !state.editable && (
-            <TouchableOpacity style={styles.icon} onPress={reportMessage}>
+            <TouchableOpacity style={styles.icon} onPress={() => actions.promptReport(report)}>
               <MatIcons name="flag-outline" size={22} color={Colors.white} />
             </TouchableOpacity>
           )}
           { state.deletable && (
-            <TouchableOpacity style={styles.icon} onPress={erase}>
+            <TouchableOpacity style={styles.icon} onPress={() => actions.promptRemove(remove)}>
               <MatIcons name="delete-outline" size={24} color={Colors.white} />
             </TouchableOpacity>
           )}

app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -3,6 +3,7 @@ import { Linking } from 'react-native';
 import { ConversationContext } from 'context/ConversationContext';
 import { CardContext } from 'context/CardContext';
 import { ProfileContext } from 'context/ProfileContext';
+import { DisplayContext } from 'context/DisplayContext';
 import { AccountContext } from 'context/AccountContext';
 import moment from 'moment';
 import { useWindowDimensions, Text } from 'react-native';
@@ -14,10 +15,12 @@ import Share from 'react-native-share';
 import RNFetchBlob from "rn-fetch-blob";
 import RNFS from 'react-native-fs';
 import { checkResponse, fetchWithTimeout } from 'api/fetchUtil';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function useTopicItem(item, hosting, remove, contentKey) {
 
   const [state, setState] = useState({
+    strings: getLanguageStrings(), 
     name: null,
     nameSet: null,
     known: null,
@@ -42,6 +45,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
 
   const conversation = useContext(ConversationContext);
   const profile = useContext(ProfileContext);
+  const display = useContext(DisplayContext);
   const card = useContext(CardContext);
   const account = useContext(AccountContext);
   const dimensions = useWindowDimensions();
@@ -425,6 +429,45 @@ export function useTopicItem(item, hosting, remove, contentKey) {
         updateState({ sharing: false });
       }
     },
+    promptBlock: (block) => {
+      display.actions.showPrompt({
+        title: state.strings.blockTopic,
+        centerButtons: true,
+        ok: { label: state.strings.confirmBlock, action: async () => await block(item.topicId), failed: () => {
+          Alert.alert(
+            state.strings.error,
+            state.strings.tryAgain,
+          );
+        }},
+        cancel: { label: state.strings.cancel },
+      }); 
+    },
+    promptReport: (report) => {
+      display.actions.showPrompt({
+        title: state.strings.reportTopic,
+        centerButtons: true,
+        ok: { label: state.strings.confirmReport, action: async () => await report(item.topicId), failed: () => {
+          Alert.alert(
+            state.strings.error,
+            state.strings.tryAgain,
+          );
+        }},
+        cancel: { label: state.strings.cancel },
+      }); 
+    },
+    promptRemove: (remove) => {
+      display.actions.showPrompt({
+        title: state.strings.deleteTopic,
+        centerButtons: true,
+        ok: { label: state.strings.confirmDelete, action: async () => await remove(item.topicId), failed: () => {
+          Alert.alert(
+            state.strings.error,
+            state.strings.tryAgain,
+          );
+        }},
+        cancel: { label: state.strings.cancel },
+      }); 
+    },
   };
 
   return { state, actions };

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

@@ -79,7 +79,7 @@ export const styles = StyleSheet.create({
     paddingTop: 24,
     width: '100%',
     borderBottomWidth: 1,
-    borderColor: Colors.itemDivider,
+    borderColor: Colors.horizontalDivider,
     display: 'flex',
     flexDirection: 'row',
   },