extending blocked modal stubs

This commit is contained in:
balzack 2023-09-04 18:12:49 -07:00
parent 2c03abdeb3
commit 67221f3363
3 changed files with 68 additions and 14 deletions

View File

@ -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'),

View File

@ -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>

View File

@ -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'
},
});