diff options
| -rw-r--r-- | gui/src/renderer/components/Modal.tsx | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx index c00a1be466..287b5ae0a3 100644 --- a/gui/src/renderer/components/Modal.tsx +++ b/gui/src/renderer/components/Modal.tsx @@ -10,8 +10,9 @@ const styles = { modalAlertBackground: Styles.createViewStyle({ flex: 1, justifyContent: 'center', - paddingLeft: 14, - paddingRight: 14, + paddingHorizontal: 14, + paddingTop: 26, + paddingBottom: 14, }), modalAlert: Styles.createViewStyle({ backgroundColor: colors.darkBlue, @@ -20,15 +21,15 @@ const styles = { }), modalAlertIcon: Styles.createViewStyle({ alignItems: 'center', - marginBottom: 12, - marginTop: 4, + marginTop: 8, }), modalAlertMessage: Styles.createTextStyle({ fontFamily: 'Open Sans', - fontSize: 16, + fontSize: 14, fontWeight: '500', lineHeight: 20, color: colors.white80, + marginTop: 16, }), modalAlertButtonContainer: Styles.createViewStyle({ marginTop: 16, @@ -136,9 +137,7 @@ export class ModalAlert extends Component<IModalAlertProps> { {this.props.type && ( <View style={styles.modalAlertIcon}>{this.renderTypeIcon(this.props.type)}</View> )} - {this.props.message && ( - <Text style={styles.modalAlertMessage}>{this.props.message}</Text> - )} + {this.props.message && <ModalMessage>{this.props.message}</ModalMessage>} {this.props.children} {this.props.buttons.map((button, index) => ( <View key={index} style={styles.modalAlertButtonContainer}> @@ -167,3 +166,11 @@ export class ModalAlert extends Component<IModalAlertProps> { return <ImageView height={44} width={44} source={source} tintColor={color} />; } } + +interface IModalMessageProps { + children?: string; +} + +export function ModalMessage(props: IModalMessageProps) { + return <Text style={styles.modalAlertMessage}>{props.children}</Text>; +} |