Convert ExpiredAccountErrorView from ReactXP

2 files changed, 82 insertions, 89 deletions

diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 17bfd68123..95177765a5 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Component, Text, View } from 'reactxp';
 import { sprintf } from 'sprintf-js';
 import { links } from '../../config.json';
 import { hasExpired } from '../../shared/account-expiry';
@@ -8,12 +7,20 @@ import { messages } from '../../shared/gettext';
 import { LoginState } from '../redux/account/reducers';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
-import styles, {
-  ModalCellContainer,
+import {
+  StyledAccountTokenContainer,
   StyledAccountTokenLabel,
+  StyledAccountTokenMessage,
+  StyledBody,
   StyledBuyCreditButton,
+  StyledContainer,
   StyledCustomScrollbars,
   StyledDisconnectButton,
+  StyledFooter,
+  StyledMessage,
+  StyledModalCellContainer,
+  StyledStatusIcon,
+  StyledTitle,
 } from './ExpiredAccountErrorViewStyles';
 import ImageView from './ImageView';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
@@ -42,7 +49,7 @@ interface IExpiredAccountErrorViewState {
   showRedeemVoucherAlert: boolean;
 }
 
-export default class ExpiredAccountErrorView extends Component<
+export default class ExpiredAccountErrorView extends React.Component<
   IExpiredAccountErrorViewProps,
   IExpiredAccountErrorViewState
 > {
@@ -60,10 +67,10 @@ export default class ExpiredAccountErrorView extends Component<
   public render() {
     return (
       <StyledCustomScrollbars fillContainer>
-        <View style={styles.container}>
-          <View style={styles.body}>{this.renderContent()}</View>
+        <StyledContainer>
+          <StyledBody>{this.renderContent()}</StyledBody>
 
-          <View style={styles.footer}>
+          <StyledFooter>
             {this.getRecoveryAction() === RecoveryAction.disconnect && (
               <AppButton.BlockingButton onClick={this.props.onDisconnect}>
                 <StyledDisconnectButton>
@@ -79,11 +86,11 @@ export default class ExpiredAccountErrorView extends Component<
               onClick={this.onOpenRedeemVoucherAlert}>
               {messages.pgettext('connect-view', 'Redeem voucher')}
             </AppButton.GreenButton>
-          </View>
+          </StyledFooter>
 
           {this.state.showRedeemVoucherAlert && this.renderRedeemVoucherAlert()}
           {this.state.showBlockWhenDisconnectedAlert && this.renderBlockWhenDisconnectedAlert()}
-        </View>
+        </StyledContainer>
       </StyledCustomScrollbars>
     );
   }
@@ -95,11 +102,11 @@ export default class ExpiredAccountErrorView extends Component<
 
     return (
       <>
-        <View style={styles.statusIcon}>
+        <StyledStatusIcon>
           <ImageView source="icon-fail" height={60} width={60} />
-        </View>
-        <View style={styles.title}>{messages.pgettext('connect-view', 'Out of time')}</View>
-        <View style={styles.message}>
+        </StyledStatusIcon>
+        <StyledTitle>{messages.pgettext('connect-view', 'Out of time')}</StyledTitle>
+        <StyledMessage>
           {sprintf('%(introduction)s %(recoveryMessage)s', {
             introduction: messages.pgettext(
               'connect-view',
@@ -107,7 +114,7 @@ export default class ExpiredAccountErrorView extends Component<
             ),
             recoveryMessage: this.getRecoveryActionMessage(),
           })}
-        </View>
+        </StyledMessage>
       </>
     );
   }
@@ -115,17 +122,15 @@ export default class ExpiredAccountErrorView extends Component<
   private renderWelcomeView() {
     return (
       <>
-        <View style={styles.title}>{messages.pgettext('connect-view', 'Congrats!')}</View>
-        <View style={[styles.message, styles.accountTokenMessage]}>
-          <Text style={[styles.fieldLabel, styles.accountTokenFieldLabel]}>
-            {messages.pgettext('connect-view', 'Here’s your account number. Save it!')}
-          </Text>
-          <View style={styles.accountTokenContainer}>
+        <StyledTitle>{messages.pgettext('connect-view', 'Congrats!')}</StyledTitle>
+        <StyledAccountTokenMessage>
+          {messages.pgettext('connect-view', 'Here’s your account number. Save it!')}
+          <StyledAccountTokenContainer>
             <StyledAccountTokenLabel accountToken={this.props.accountToken || ''} />
-          </View>
-        </View>
+          </StyledAccountTokenContainer>
+        </StyledAccountTokenMessage>
 
-        <View style={styles.message}>
+        <StyledMessage>
           {sprintf('%(introduction)s %(recoveryMessage)s', {
             introduction: messages.pgettext(
               'connect-view',
@@ -133,7 +138,7 @@ export default class ExpiredAccountErrorView extends Component<
             ),
             recoveryMessage: this.getRecoveryActionMessage(),
           })}
-        </View>
+        </StyledMessage>
       </>
     );
   }
@@ -202,13 +207,13 @@ export default class ExpiredAccountErrorView extends Component<
             'Remember, turning it off will allow network traffic while the VPN is disconnected until you turn it back on under Advanced settings.',
           )}
         </ModalMessage>
-        <ModalCellContainer>
+        <StyledModalCellContainer>
           <Cell.Label>{messages.pgettext('connect-view', 'Always require VPN')}</Cell.Label>
           <Cell.Switch
             isOn={this.props.blockWhenDisconnected}
             onChange={this.props.setBlockWhenDisconnected}
           />
-        </ModalCellContainer>
+        </StyledModalCellContainer>
       </ModalAlert>
     );
   }
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 36ac76f1fc..f85bd66aa4 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -1,9 +1,9 @@
-import { Styles } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
+import { bigText, smallText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 
 export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
@@ -14,7 +14,7 @@ export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
   color: colors.white,
 });
 
-export const ModalCellContainer = styled(Cell.Container)({
+export const StyledModalCellContainer = styled(Cell.Container)({
   marginTop: '18px',
   paddingLeft: '12px',
   paddingRight: '12px',
@@ -31,64 +31,52 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
   flex: 1,
 });
 
-export default {
-  container: Styles.createViewStyle({
-    flex: 1,
-    paddingTop: 22,
-    // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well
-    // without the '@ts-ignore' when moving away from ReactXP.
-    // @ts-ignore
-    minHeight: '100%',
-  }),
-  body: Styles.createViewStyle({
-    flex: 1,
-    paddingHorizontal: 22,
-  }),
-  footer: Styles.createViewStyle({
-    flex: 0,
-    paddingTop: 18,
-    paddingBottom: 22,
-    paddingHorizontal: 22,
-    backgroundColor: colors.darkBlue,
-  }),
-  title: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 30,
-    fontWeight: '900',
-    lineHeight: 38,
-    color: colors.white,
-    marginBottom: 8,
-  }),
-  message: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    lineHeight: 20,
-    fontWeight: '600',
-    color: colors.white,
-    marginBottom: 20,
-  }),
-  statusIcon: Styles.createViewStyle({
-    alignSelf: 'center',
-    width: 60,
-    height: 60,
-    marginBottom: 18,
-  }),
-  fieldLabel: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 20,
-    color: colors.white,
-    marginBottom: 9,
-  }),
-  accountTokenMessage: Styles.createViewStyle({
-    marginBottom: 0,
-  }),
-  accountTokenFieldLabel: Styles.createTextStyle({
-    marginBottom: 0,
-  }),
-  accountTokenContainer: Styles.createViewStyle({
-    height: 68,
-    justifyContent: 'center',
-  }),
-};
+export const StyledContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  paddingTop: '22px',
+  minHeight: '100%',
+});
+
+export const StyledBody = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  padding: '0 22px',
+});
+
+export const StyledFooter = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 0,
+  padding: '18px 22px 22px',
+  backgroundColor: colors.darkBlue,
+});
+
+export const StyledTitle = styled.span(bigText, {
+  lineHeight: '38px',
+  marginBottom: '8px',
+});
+
+export const StyledMessage = styled.span(smallText, {
+  marginBottom: '20px',
+  color: colors.white,
+});
+
+export const StyledAccountTokenMessage = styled.span(smallText, {
+  color: colors.white,
+});
+
+export const StyledStatusIcon = styled.div({
+  alignSelf: 'center',
+  width: '60px',
+  height: '60px',
+  marginBottom: '18px',
+});
+
+export const StyledAccountTokenContainer = styled.div({
+  display: 'flex',
+  height: '68px',
+  alignItems: 'center',
+});