From 65564c808a3041dcd2df6aeb94ea6cef8ab180d5 Mon Sep 17 00:00:00 2001 From: balzack Date: Thu, 5 Oct 2023 20:03:44 -0700 Subject: [PATCH] updating topic action modals --- app/mobile/src/constants/Colors.js | 6 +-- app/mobile/src/session/Session.styled.js | 1 + .../channelItem/ChannelItem.styled.js | 2 +- .../src/session/conversation/Conversation.jsx | 2 +- .../conversation/Conversation.styled.js | 1 + .../conversation/topicItem/TopicItem.jsx | 6 +-- .../topicItem/useTopicItem.hook.js | 43 +++++++++++++++++++ .../src/session/details/Details.styled.js | 2 +- 8 files changed, 54 insertions(+), 9 deletions(-) diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index fb2d3d94..d9770e7c 100644 --- a/app/mobile/src/constants/Colors.js +++ b/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', diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js index 8836fd2d..cee1e22e 100644 --- a/app/mobile/src/session/Session.styled.js +++ b/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: { diff --git a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js index 95864b80..b272070c 100644 --- a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js +++ b/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: { diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index 5f8f3393..16bde28c 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -67,7 +67,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation, return ( - + { !navigation && ( diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js index 964fc741..aa362fbf 100644 --- a/app/mobile/src/session/conversation/Conversation.styled.js +++ b/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, }, diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx index dc6019d6..9a27cd10 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx +++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx @@ -193,16 +193,16 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block )} - + actions.promptBlock(block)}> { !state.editable && ( - + actions.promptReport(report)}> )} { state.deletable && ( - + actions.promptRemove(remove)}> )} diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js index 685be8ab..6fbebae6 100644 --- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js +++ b/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 }; diff --git a/app/mobile/src/session/details/Details.styled.js b/app/mobile/src/session/details/Details.styled.js index 74e0846b..f9d2ea4b 100644 --- a/app/mobile/src/session/details/Details.styled.js +++ b/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', },