Add dialog icon

2 files changed, 34 insertions, 1 deletions

diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 3e7ec4414f..b0a972955d 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Component, Styles, Text, View } from 'reactxp';
 import { colors } from '../../config.json';
+import ImageView from './ImageView';
 
 const styles = {
   modalAlertBackground: Styles.createViewStyle({
@@ -14,6 +15,11 @@ const styles = {
     borderRadius: 11,
     padding: 16,
   }),
+  modalAlertIcon: Styles.createViewStyle({
+    alignItems: 'center',
+    marginBottom: 12,
+    marginTop: 4,
+  }),
   modalAlertMessage: Styles.createTextStyle({
     fontFamily: 'Open Sans',
     fontSize: 16,
@@ -67,7 +73,13 @@ export const ModalContainer: React.FC = ({ children }) => {
   return <div style={{ position: 'relative', flex: 1 }}>{children}</div>;
 };
 
+export enum ModalAlertType {
+  Info = 1,
+  Warning,
+}
+
 interface IModalAlertProps {
+  type?: ModalAlertType;
   message: string;
   buttons: React.ReactNode[];
 }
@@ -78,6 +90,9 @@ export class ModalAlert extends Component<IModalAlertProps> {
       <ModalBackground>
         <View style={styles.modalAlertBackground}>
           <View style={styles.modalAlert}>
+            {this.props.type && (
+              <View style={styles.modalAlertIcon}>{this.renderTypeIcon(this.props.type)}</View>
+            )}
             <Text style={styles.modalAlertMessage}>{this.props.message}</Text>
             {this.props.buttons.map((button, index) => (
               <View key={index} style={styles.modalAlertButtonContainer}>
@@ -89,4 +104,20 @@ export class ModalAlert extends Component<IModalAlertProps> {
       </ModalBackground>
     );
   }
+
+  private renderTypeIcon(type: ModalAlertType) {
+    let source = '';
+    let color = '';
+    switch (type) {
+      case ModalAlertType.Info:
+        source = 'icon-alert';
+        color = colors.white;
+        break;
+      case ModalAlertType.Warning:
+        source = 'icon-alert';
+        color = colors.red;
+        break;
+    }
+    return <ImageView height={44} width={44} source={source} tintColor={color} />;
+  }
 }
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index a840b74340..c7cae9889d 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -5,7 +5,7 @@ import { messages } from '../../shared/gettext';
 import * as AppButton from './AppButton';
 import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
-import { ModalAlert, ModalContainer, ModalContent } from './Modal';
+import { ModalAlert, ModalAlertType, ModalContainer, ModalContent } from './Modal';
 import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import styles from './SupportStyles';
@@ -238,6 +238,7 @@ export default class Support extends Component<ISupportProps, ISupportState> {
     );
     return (
       <ModalAlert
+        type={ModalAlertType.Warning}
         message={message}
         buttons={[
           <AppButton.RedButton key="proceed" onPress={this.onSend}>
@@ -264,6 +265,7 @@ export default class Support extends Component<ISupportProps, ISupportState> {
     );
     return (
       <ModalAlert
+        type={ModalAlertType.Warning}
         message={message}
         buttons={[
           <AppButton.GreenButton