Merge branch 'convert-support-from-reactxp' into master

2 files changed, 196 insertions, 233 deletions

diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index ee0514e67f..295855a9a6 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -1,14 +1,29 @@
 import * as React from 'react';
-import { Component, Text, TextInput, View } from 'reactxp';
 import { links } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import * as AppButton from './AppButton';
 import ImageView from './ImageView';
-import { Container, Layout } from './Layout';
+import { Layout } from './Layout';
 import { ModalAlert, ModalAlertType, ModalContainer } from './Modal';
 import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import styles, { StyledBlueButton } from './SupportStyles';
+import {
+  StyledBlueButton,
+  StyledContainer,
+  StyledContent,
+  StyledContentContainer,
+  StyledEmail,
+  StyledEmailInput,
+  StyledFooter,
+  StyledForm,
+  StyledFormEmailRow,
+  StyledFormMessageRow,
+  StyledSecureStatus,
+  StyledSendStatus,
+  StyledSentMessage,
+  StyledStatusIcon,
+  StyledMessageInput,
+} from './SupportStyles';
 
 import { AccountToken } from '../../shared/daemon-rpc-types';
 import { ISupportReportForm } from '../redux/support/actions';
@@ -45,7 +60,7 @@ interface ISupportProps {
   onExternalLink: (url: string) => void;
 }
 
-export default class Support extends Component<ISupportProps, ISupportState> {
+export default class Support extends React.Component<ISupportProps, ISupportState> {
   public state = {
     email: '',
     message: '',
@@ -70,14 +85,14 @@ export default class Support extends Component<ISupportProps, ISupportState> {
     return this.state.message.trim().length > 0;
   }
 
-  public onChangeEmail = (email: string) => {
-    this.setState({ email }, () => {
+  public onChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ email: event.target.value }, () => {
       this.saveFormData();
     });
   };
 
-  public onChangeDescription = (description: string) => {
-    this.setState({ message: description }, () => {
+  public onChangeDescription = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    this.setState({ message: event.target.value }, () => {
       this.saveFormData();
     });
   };
@@ -131,26 +146,25 @@ export default class Support extends Component<ISupportProps, ISupportState> {
     return (
       <ModalContainer>
         <Layout>
-          <Container>
-            <View style={styles.support}>
-              <NavigationBar>
-                <NavigationItems>
-                  <BackBarItem action={this.props.onClose}>
-                    {
-                      // TRANSLATORS: Back button in navigation bar
-                      messages.pgettext('navigation-bar', 'Settings')
-                    }
-                  </BackBarItem>
-                </NavigationItems>
-              </NavigationBar>
-              <View style={styles.support__container}>
-                {header}
-                {content}
-              </View>
-            </View>
+          <StyledContainer>
+            <NavigationBar>
+              <NavigationItems>
+                <BackBarItem action={this.props.onClose}>
+                  {
+                    // TRANSLATORS: Back button in navigation bar
+                    messages.pgettext('navigation-bar', 'Settings')
+                  }
+                </BackBarItem>
+              </NavigationItems>
+            </NavigationBar>
+            <StyledContentContainer>
+              {header}
+              {content}
+            </StyledContentContainer>
+
             {sendState === SendState.Confirm && this.renderNoEmailDialog()}
             {showOutdatedVersionWarning && this.renderOutdateVersionWarningDialog()}
-          </Container>
+          </StyledContainer>
         </Layout>
       </ModalContainer>
     );
@@ -278,63 +292,49 @@ export default class Support extends Component<ISupportProps, ISupportState> {
 
   private renderForm() {
     return (
-      <View style={styles.support__content}>
-        <View style={styles.support__form}>
-          <View style={styles.support__form_row_email}>
-            <TextInput
-              style={styles.support__form_email}
+      <StyledContent>
+        <StyledForm>
+          <StyledFormEmailRow>
+            <StyledEmailInput
               placeholder={messages.pgettext('support-view', 'Your email (optional)')}
               defaultValue={this.state.email}
-              onChangeText={this.onChangeEmail}
-              keyboardType="email-address"
+              onChange={this.onChangeEmail}
+            />
+          </StyledFormEmailRow>
+          <StyledFormMessageRow>
+            <StyledMessageInput
+              placeholder={messages.pgettext('support-view', 'Describe your problem')}
+              defaultValue={this.state.message}
+              onChange={this.onChangeDescription}
             />
-          </View>
-          <View style={styles.support__form_row_message}>
-            <View style={styles.support__form_message_scroll_wrap}>
-              <TextInput
-                style={styles.support__form_message}
-                placeholder={messages.pgettext('support-view', 'Describe your problem')}
-                defaultValue={this.state.message}
-                multiline={true}
-                onChangeText={this.onChangeDescription}
-              />
-            </View>
-          </View>
-          <View style={styles.support__footer}>
-            <StyledBlueButton onClick={this.onViewLog} disabled={this.state.disableActions}>
-              <AppButton.Label>
-                {messages.pgettext('support-view', 'View app logs')}
-              </AppButton.Label>
-              <AppButton.Icon source="icon-extLink" height={16} width={16} />
-            </StyledBlueButton>
-            <AppButton.GreenButton
-              disabled={!this.validate() || this.state.disableActions}
-              onClick={this.onSend}>
-              {messages.pgettext('support-view', 'Send')}
-            </AppButton.GreenButton>
-          </View>
-        </View>
-      </View>
+          </StyledFormMessageRow>
+        </StyledForm>
+        <StyledFooter>
+          <StyledBlueButton onClick={this.onViewLog} disabled={this.state.disableActions}>
+            <AppButton.Label>{messages.pgettext('support-view', 'View app logs')}</AppButton.Label>
+            <AppButton.Icon source="icon-extLink" height={16} width={16} />
+          </StyledBlueButton>
+          <AppButton.GreenButton
+            disabled={!this.validate() || this.state.disableActions}
+            onClick={this.onSend}>
+            {messages.pgettext('support-view', 'Send')}
+          </AppButton.GreenButton>
+        </StyledFooter>
+      </StyledContent>
     );
   }
 
   private renderSending() {
     return (
-      <View style={styles.support__content}>
-        <View style={styles.support__form}>
-          <View style={styles.support__form_row}>
-            <View style={styles.support__status_icon}>
-              <ImageView source="icon-spinner" height={60} width={60} />
-            </View>
-            <View style={styles.support__status_security__secure}>
-              {messages.gettext('SECURE CONNECTION')}
-            </View>
-            <Text style={styles.support__send_status}>
-              {messages.pgettext('support-view', 'Sending...')}
-            </Text>
-          </View>
-        </View>
-      </View>
+      <StyledContent>
+        <StyledForm>
+          <StyledStatusIcon>
+            <ImageView source="icon-spinner" height={60} width={60} />
+          </StyledStatusIcon>
+          <StyledSecureStatus>{messages.gettext('SECURE CONNECTION')}</StyledSecureStatus>
+          <StyledSendStatus>{messages.pgettext('support-view', 'Sending...')}</StyledSendStatus>
+        </StyledForm>
+      </StyledContent>
     );
   }
 
@@ -346,71 +346,53 @@ export default class Support extends Component<ISupportProps, ISupportState> {
       messages
         .pgettext('support-view', 'If needed we will contact you on %(email)s')
         .split('%(email)s', 2);
-    reachBackMessage.splice(
-      1,
-      0,
-      <Text key={'email'} style={styles.support__sent_email}>
-        {this.state.email}
-      </Text>,
-    );
+    reachBackMessage.splice(1, 0, <StyledEmail key="email">{this.state.email}</StyledEmail>);
 
     return (
-      <View style={styles.support__content}>
-        <View style={styles.support__form}>
-          <View style={styles.support__form_row}>
-            <View style={styles.support__status_icon}>
-              <ImageView source="icon-success" height={60} width={60} />
-            </View>
-            <Text style={styles.support__status_security__secure}>
-              {messages.gettext('SECURE CONNECTION')}
-            </Text>
-            <Text style={styles.support__send_status}>
-              {messages.pgettext('support-view', 'Sent')}
-            </Text>
+      <StyledContent>
+        <StyledForm>
+          <StyledStatusIcon>
+            <ImageView source="icon-success" height={60} width={60} />
+          </StyledStatusIcon>
+          <StyledSecureStatus>{messages.gettext('SECURE CONNECTION')}</StyledSecureStatus>
+          <StyledSendStatus>{messages.pgettext('support-view', 'Sent')}</StyledSendStatus>
 
-            <Text style={styles.support__sent_message}>
-              {messages.pgettext('support-view', 'Thanks! We will look into this.')}
-            </Text>
-            {this.state.email.trim().length > 0 ? (
-              <Text style={styles.support__sent_message}>{reachBackMessage}</Text>
-            ) : null}
-          </View>
-        </View>
-      </View>
+          <StyledSentMessage>
+            {messages.pgettext('support-view', 'Thanks! We will look into this.')}
+          </StyledSentMessage>
+          {this.state.email.trim().length > 0 ? (
+            <StyledSentMessage>{reachBackMessage}</StyledSentMessage>
+          ) : null}
+        </StyledForm>
+      </StyledContent>
     );
   }
 
   private renderFailed() {
     return (
-      <View style={styles.support__content}>
-        <View style={styles.support__form}>
-          <View style={styles.support__form_row}>
-            <View style={styles.support__status_icon}>
-              <ImageView source="icon-fail" height={60} width={60} />
-            </View>
-            <Text style={styles.support__status_security__secure}>
-              {messages.gettext('SECURE CONNECTION')}
-            </Text>
-            <Text style={styles.support__send_status}>
-              {messages.pgettext('support-view', 'Failed to send')}
-            </Text>
-            <Text style={styles.support__sent_message}>
-              {messages.pgettext(
-                'support-view',
-                "You may need to go back to the app's main screen and click Disconnect before trying again. Don't worry, the information you entered will remain in the form.",
-              )}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.support__footer}>
+      <StyledContent>
+        <StyledForm>
+          <StyledStatusIcon>
+            <ImageView source="icon-fail" height={60} width={60} />
+          </StyledStatusIcon>
+          <StyledSecureStatus>{messages.gettext('SECURE CONNECTION')}</StyledSecureStatus>
+          <StyledSendStatus>{messages.pgettext('support-view', 'Failed to send')}</StyledSendStatus>
+          <StyledSentMessage>
+            {messages.pgettext(
+              'support-view',
+              "You may need to go back to the app's main screen and click Disconnect before trying again. Don't worry, the information you entered will remain in the form.",
+            )}
+          </StyledSentMessage>
+        </StyledForm>
+        <StyledFooter>
           <StyledBlueButton onClick={this.handleEditMessage}>
             {messages.pgettext('support-view', 'Edit message')}
           </StyledBlueButton>
           <AppButton.GreenButton onClick={this.onSend}>
             {messages.pgettext('support-view', 'Try again')}
           </AppButton.GreenButton>
-        </View>
-      </View>
+        </StyledFooter>
+      </StyledContent>
     );
   }
 
diff --git a/gui/src/renderer/components/SupportStyles.tsx b/gui/src/renderer/components/SupportStyles.tsx
index eaee5770e7..139890b3b6 100644
--- a/gui/src/renderer/components/SupportStyles.tsx
+++ b/gui/src/renderer/components/SupportStyles.tsx
@@ -1,115 +1,96 @@
-import { Styles } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
+import { bigText, smallText } from './common-styles';
+import { Container } from './Layout';
 
 export const StyledBlueButton = styled(AppButton.BlueButton)({
-  marginBottom: 18,
+  marginBottom: '18px',
 });
 
-export default {
-  support: Styles.createViewStyle({
-    backgroundColor: colors.darkBlue,
-    flex: 1,
-  }),
-  support__container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-  }),
-  support__content: Styles.createViewStyle({
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  }),
-  support__form: Styles.createViewStyle({
-    flex: 1,
-    flexDirection: 'column',
-  }),
-  support__form_row: Styles.createViewStyle({
-    paddingLeft: 22,
-    paddingRight: 22,
-    marginBottom: 12,
-  }),
-  support__form_row_email: Styles.createViewStyle({
-    paddingLeft: 22,
-    paddingRight: 22,
-    marginBottom: 12,
-  }),
-  support__form_row_message: Styles.createViewStyle({
-    flex: 1,
-    paddingLeft: 22,
-    paddingRight: 22,
-  }),
-  support__form_message_scroll_wrap: Styles.createViewStyle({
-    flex: 1,
-    borderRadius: 4,
-    overflow: 'hidden',
-  }),
-  support__footer: Styles.createViewStyle({
-    paddingTop: 18,
-    paddingBottom: 22,
-    paddingHorizontal: 22,
-    flexDirection: 'column',
-    flex: 0,
-  }),
-  support__status_icon: Styles.createViewStyle({
-    alignItems: 'center',
-    marginBottom: 32,
-  }),
-  support__form_email: Styles.createTextStyle({
-    flex: 1,
-    borderRadius: 4,
-    overflow: 'hidden',
-    paddingTop: 14,
-    paddingLeft: 14,
-    paddingRight: 14,
-    paddingBottom: 14,
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 26,
-    color: colors.blue,
-    backgroundColor: colors.white,
-  }),
-  support__form_message: Styles.createTextStyle({
-    paddingTop: 14,
-    paddingLeft: 14,
-    paddingRight: 14,
-    paddingBottom: 14,
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    color: colors.blue,
-    backgroundColor: colors.white,
-    flex: 1,
-  }),
-  support__sent_message: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    overflow: 'visible',
-    color: colors.white60,
-    lineHeight: 20,
-  }),
-  support__sent_email: Styles.createTextStyle({
-    fontWeight: '900',
-    color: colors.white,
-  }),
-  support__status_security__secure: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    fontWeight: '800',
-    lineHeight: 22,
-    marginBottom: 4,
-    color: colors.green,
-  }),
-  support__send_status: Styles.createTextStyle({
-    // TODO: Use bigText in comonStyles when converted from ReactXP
-    fontFamily: 'DINPro',
-    fontSize: 30,
-    fontWeight: '900',
-    lineHeight: 34,
-    color: colors.white,
-    marginBottom: 4,
-  }),
+export const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
+export const StyledContentContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
+export const StyledContent = styled.div({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+});
+
+export const StyledForm = styled.div({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  margin: '0 22px',
+});
+
+export const StyledFormEmailRow = styled.div({
+  marginBottom: '12px',
+  display: 'flex',
+});
+
+export const StyledFormMessageRow = styled.div({
+  display: 'flex',
+  flex: 1,
+});
+
+const input = {
+  flex: 1,
+  borderRadius: '4px',
+  padding: '14px',
+  color: colors.blue,
+  backgroundColor: colors.white,
+  border: 'none',
 };
+
+export const StyledEmailInput = styled.input.attrs({ type: 'email' })(smallText, input, {
+  lineHeight: '26px',
+});
+
+export const StyledMessageInput = styled.textarea(smallText, input, {
+  resize: 'none',
+});
+
+export const StyledFooter = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 0,
+  padding: '18px 22px 22px',
+});
+
+export const StyledStatusIcon = styled.div({
+  display: 'flex',
+  justifyContent: 'center',
+  marginBottom: '32px',
+});
+
+export const StyledSentMessage = styled.span(smallText, {
+  overflow: 'visible',
+  color: colors.white60,
+});
+
+export const StyledEmail = styled.span({
+  fontWeight: 900,
+  color: colors.white,
+});
+
+export const StyledSecureStatus = styled.span({
+  fontFamily: 'Open Sans',
+  fontSize: '16px',
+  fontWeight: 800,
+  lineHeight: '22px',
+  marginBottom: '4px',
+  color: colors.green,
+});
+
+export const StyledSendStatus = styled.span(bigText, {
+  marginBottom: '4px',
+});