diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index d9770e7c..660b9495 100644 --- a/app/mobile/src/constants/Colors.js +++ b/app/mobile/src/constants/Colors.js @@ -47,8 +47,8 @@ const LightColors = { confirmedIndicator: '#88bb00', unknownIndicator: '#dddddd', errorIndicator: '#ffaaaa', - horizontalDivider: '#bbbbbb', - verticalDivider: '#aaaaaa', + horizontalDivider: '#dddddd', + verticalDivider: '#dddddd', itemDivider: '#cccccc', unreadIndicator: '#00aa00', enabledIndicator: '#8fbea7', diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index 79e5e6b7..a65fc40f 100644 --- a/app/mobile/src/constants/Strings.js +++ b/app/mobile/src/constants/Strings.js @@ -183,6 +183,8 @@ const Strings = [ agree: 'I agree to Terms of Service', terms: 'View Terms of Service', policy: 'Terms of Use and User Policy', + + editMessage: 'Edit Message Text', }, { languageCode: 'fr', @@ -362,6 +364,8 @@ const Strings = [ agree: 'J\'accepte les Conditions d\'Utilisation', terms: 'Afficher les Conditions d\'Utilisation', policy: 'Conditions d\'Utilisation et Politique d\'Utilisation', + + editMessage: 'Modifier le Texte du Message', }, { languageCode: 'es', @@ -541,6 +545,8 @@ const Strings = [ agree: 'Acepto los Términos de Servicio', terms: 'Ver Términos de Servicio', policy: 'Términos de Uso y Política de Usuario', + + editMessage: 'Editar Texto del Mensaje', }, { languageCode: 'de', @@ -720,6 +726,8 @@ const Strings = [ agree: 'Ich akzeptiere die Nutzungsbedingungen', terms: 'Nutzungsbedingungen anzeigen', policy: 'Nutzungsbedingungen und Benutzerrichtlinien', + + editMessage: 'Nachrichtentext Bearbeiten', }, { languageCode: 'pt', @@ -885,6 +893,7 @@ const Strings = [ agree: 'Eu concordo com os Termos de Serviço', terms: 'Ver Termos de Serviço', policy: 'Termos de Uso e Política do Usuário', + editMessage: 'Editar Texto da Mensagem', }, ]; diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index 16bde28c..aae1f797 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -8,6 +8,7 @@ import Ionicons from 'react-native-vector-icons/AntDesign'; import { Logo } from 'utils/Logo'; import { AddTopic } from './addTopic/AddTopic'; import { TopicItem } from './topicItem/TopicItem'; +import { BlurView } from "@react-native-community/blur"; export function Conversation({ navigation, cardId, channelId, closeConversation, openDetails, shareIntent, setShareIntent }) { @@ -66,86 +67,88 @@ export function Conversation({ navigation, cardId, channelId, closeConversation, }, []); return ( - - - - { !navigation && ( - - { state.loaded && ( - - - { state.subject } - + + + { !navigation && ( + + { state.loaded && ( + + + { state.subject } + + + )} + + - )} - - - - - )} - - - { !state.loaded && state.delayed && ( - - - - )} - { state.moreBusy && state.topics.length > 32 && ( - - )} - { state.loaded && state.topics.length !== 0 && ( - actions.setFocus(item.topicId)} hosting={state.hosted} - remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} - report={actions.reportTopic} contentKey={state.contentKey} /> } - keyExtractor={item => item.topicId} - /> - )} - { state.loaded && state.topics.length === 0 && ( - - Empty Topic - - )} - - - - - - - Edit Message Text: - - - - - - Cancel - - - { state.updateBusy && ( - - )} - { !state.updateBusy && ( - Save - )} - - - - - - + )} + + + { !state.loaded && state.delayed && ( + + + + )} + { state.moreBusy && state.topics.length > 32 && ( + + )} + { state.loaded && state.topics.length !== 0 && ( + actions.setFocus(item.topicId)} hosting={state.hosted} + remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} + report={actions.reportTopic} contentKey={state.contentKey} /> } + keyExtractor={item => item.topicId} + /> + )} + { state.loaded && state.topics.length === 0 && ( + + Empty Topic + + )} + + + + + + + + + { state.strings.editMessage } + + + + + + { state.strings.cancel } + + + { state.updateBusy && ( + + )} + { !state.updateBusy && ( + { state.strings.save } + )} + + + + + + + + ); } diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js index aa362fbf..2b4f5c00 100644 --- a/app/mobile/src/session/conversation/Conversation.styled.js +++ b/app/mobile/src/session/conversation/Conversation.styled.js @@ -105,11 +105,10 @@ export const styles = StyleSheet.create({ color: Colors.white, }, canceltext: { - color: Colors.text, + color: Colors.cancelButtonText, }, cancel: { - borderWidth: 1, - borderColor: Colors.lightgrey, + backgroundColor: Colors.cancelButton, borderRadius: 4, padding: 8, marginRight: 8, @@ -167,5 +166,30 @@ export const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + 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: 16, + }, }); diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js index 1dc35ced..07f0eb54 100644 --- a/app/mobile/src/session/conversation/useConversation.hook.js +++ b/app/mobile/src/session/conversation/useConversation.hook.js @@ -5,9 +5,11 @@ import { AccountContext } from 'context/AccountContext'; import { ConversationContext } from 'context/ConversationContext'; import { getChannelSubjectLogo } from 'context/channelUtil'; import { getChannelSeals, isUnsealed, getContentKey, encryptTopicSubject, decryptTopicSubject } from 'context/sealUtil'; +import { getLanguageStrings } from 'constants/Strings'; export function useConversation() { const [state, setState] = useState({ + strings: getLanguageStrings(), hosted: null, subject: null, logo: null,