diff options
| -rw-r--r-- | gui/assets/images/icon-reload.svg | 2 | ||||
| -rw-r--r-- | gui/src/renderer/components/Modal.tsx | 31 | ||||
| -rw-r--r-- | gui/src/renderer/components/Support.tsx | 4 |
3 files changed, 35 insertions, 2 deletions
diff --git a/gui/assets/images/icon-reload.svg b/gui/assets/images/icon-reload.svg index 33c7e5ec2c..873727a0a5 100644 --- a/gui/assets/images/icon-reload.svg +++ b/gui/assets/images/icon-reload.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
\ No newline at end of file +<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="redo-alt" class="svg-inline--fa fa-redo-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000000" d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"></path></svg> 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 |
