Add ModalMessage in Modal.tsx

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>;
+}