Convert account view to styled components

2 files changed, 106 insertions, 125 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index 8d4d42eecb..73cf77dd5a 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { Component, Text, View } from 'reactxp';
 import AccountExpiry from '../../shared/account-expiry';
 import { messages } from '../../shared/gettext';
-import styles, { StyledAccountTokenLabel } from './AccountStyles';
+import styles, {
+  AccountContainer,
+  AccountFooter,
+  AccountOutOfTime,
+  AccountRow,
+  AccountRowLabel,
+  AccountRowValue,
+  StyledContainer,
+} from './AccountStyles';
+import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
-import { Container, Layout } from './Layout';
+import { Layout } from './Layout';
 import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
@@ -20,67 +28,62 @@ interface IProps {
   onBuyMore: () => Promise<void>;
 }
 
-export default class Account extends Component<IProps> {
+export default class Account extends React.Component<IProps> {
   public render() {
     return (
       <Layout>
-        <Container>
-          <View style={styles.account}>
-            <NavigationBar>
-              <NavigationItems>
-                <BackBarItem action={this.props.onClose}>
-                  {
-                    // TRANSLATORS: Back button in navigation bar
-                    messages.pgettext('navigation-bar', 'Settings')
-                  }
-                </BackBarItem>
-              </NavigationItems>
-            </NavigationBar>
+        <StyledContainer>
+          <NavigationBar>
+            <NavigationItems>
+              <BackBarItem action={this.props.onClose}>
+                {
+                  // TRANSLATORS: Back button in navigation bar
+                  messages.pgettext('navigation-bar', 'Settings')
+                }
+              </BackBarItem>
+            </NavigationItems>
+          </NavigationBar>
 
-            <View style={styles.account__container}>
-              <SettingsHeader>
-                <HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle>
-              </SettingsHeader>
+          <AccountContainer>
+            <SettingsHeader>
+              <HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle>
+            </SettingsHeader>
 
-              <View style={styles.account__content}>
-                <View style={styles.account__main}>
-                  <View style={styles.account__row}>
-                    <Text style={styles.account__row_label}>
-                      {messages.pgettext('account-view', 'Account number')}
-                    </Text>
-                    <StyledAccountTokenLabel accountToken={this.props.accountToken || ''} />
-                  </View>
+            <AccountRow>
+              <AccountRowLabel>
+                {messages.pgettext('account-view', 'Account number')}
+              </AccountRowLabel>
+              <AccountRowValue
+                as={AccountTokenLabel}
+                accountToken={this.props.accountToken || ''}
+              />
+            </AccountRow>
 
-                  <View style={styles.account__row}>
-                    <Text style={styles.account__row_label}>
-                      {messages.pgettext('account-view', 'Paid until')}
-                    </Text>
-                    <FormattedAccountExpiry
-                      expiry={this.props.accountExpiry}
-                      locale={this.props.expiryLocale}
-                    />
-                  </View>
+            <AccountRow>
+              <AccountRowLabel>{messages.pgettext('account-view', 'Paid until')}</AccountRowLabel>
+              <FormattedAccountExpiry
+                expiry={this.props.accountExpiry}
+                locale={this.props.expiryLocale}
+              />
+            </AccountRow>
 
-                  <View style={styles.account__footer}>
-                    <AppButton.BlockingButton
-                      disabled={this.props.isOffline}
-                      onPress={this.props.onBuyMore}>
-                      <AppButton.GreenButton style={styles.account__buy_button}>
-                        <AppButton.Label>
-                          {messages.pgettext('account-view', 'Buy more credit')}
-                        </AppButton.Label>
-                        <AppButton.Icon source="icon-extLink" height={16} width={16} />
-                      </AppButton.GreenButton>
-                    </AppButton.BlockingButton>
-                    <AppButton.RedButton onPress={this.props.onLogout}>
-                      {messages.pgettext('account-view', 'Log out')}
-                    </AppButton.RedButton>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </Container>
+            <AccountFooter>
+              <AppButton.BlockingButton
+                disabled={this.props.isOffline}
+                onPress={this.props.onBuyMore}>
+                <AppButton.GreenButton style={styles.account__buy_button}>
+                  <AppButton.Label>
+                    {messages.pgettext('account-view', 'Buy more credit')}
+                  </AppButton.Label>
+                  <AppButton.Icon source="icon-extLink" height={16} width={16} />
+                </AppButton.GreenButton>
+              </AppButton.BlockingButton>
+              <AppButton.RedButton onPress={this.props.onLogout}>
+                {messages.pgettext('account-view', 'Log out')}
+              </AppButton.RedButton>
+            </AccountFooter>
+          </AccountContainer>
+        </StyledContainer>
       </Layout>
     );
   }
@@ -92,18 +95,16 @@ function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
 
     if (expiry.hasExpired()) {
       return (
-        <Text style={styles.account__out_of_time}>
-          {messages.pgettext('account-view', 'OUT OF TIME')}
-        </Text>
+        <AccountOutOfTime>{messages.pgettext('account-view', 'OUT OF TIME')}</AccountOutOfTime>
       );
     } else {
-      return <Text style={styles.account__row_value}>{expiry.formattedDate()}</Text>;
+      return <AccountRowValue>{expiry.formattedDate()}</AccountRowValue>;
     }
   } else {
     return (
-      <Text style={styles.account__row_value}>
+      <AccountRowValue>
         {messages.pgettext('account-view', 'Currently unavailable')}
-      </Text>
+      </AccountRowValue>
     );
   }
 }
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index ac0f5f6dbf..c793b96a1b 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -1,78 +1,58 @@
 import { Styles } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
-import AccountTokenLabel from './AccountTokenLabel';
+import { Container } from './Layout';
 
-export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
+export const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+  flexDirection: 'column',
+});
+
+export const AccountContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  paddingBottom: '48px',
+});
+
+export const AccountRow = styled.div({
+  padding: '0 24px',
+  marginBottom: '24px',
+});
+
+const AccountRowText = styled.span({
+  display: 'block',
   fontFamily: 'Open Sans',
+});
+
+export const AccountRowLabel = styled(AccountRowText)({
+  fontSize: '13px',
+  fontWeight: 600,
+  lineHeight: '20px',
+  letterSpacing: -0.2,
+  marginBottom: '9px',
+  color: colors.white60,
+});
+
+export const AccountRowValue = styled(AccountRowText)({
   fontSize: '16px',
   lineHeight: '19px',
   fontWeight: 800,
   color: colors.white,
 });
 
+export const AccountOutOfTime = styled(AccountRowValue)({
+  color: colors.red,
+});
+
+export const AccountFooter = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '0 24px',
+});
+
 export default {
-  account: Styles.createViewStyle({
-    backgroundColor: colors.darkBlue,
-    flex: 1,
-  }),
-  account__container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-    paddingBottom: 48,
-  }),
-  account__scrollview: Styles.createViewStyle({
-    flex: 1,
-  }),
-  account__content: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-  }),
-  account__main: Styles.createViewStyle({
-    marginBottom: 24,
-  }),
-  account__row: Styles.createViewStyle({
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
-    marginBottom: 24,
-  }),
-  account__footer: Styles.createViewStyle({
-    paddingLeft: 24,
-    paddingRight: 24,
-  }),
   account__buy_button: Styles.createViewStyle({
     marginBottom: 24,
   }),
-  account__row_label: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 20,
-    letterSpacing: -0.2,
-    color: colors.white60,
-    marginBottom: 9,
-  }),
-  account__row_value: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    lineHeight: 19,
-    fontWeight: '800',
-    color: colors.white,
-  }),
-  account__out_of_time: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    fontWeight: '800',
-    color: colors.red,
-  }),
-  account__footer_label: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 20,
-    letterSpacing: -0.2,
-    color: colors.white80,
-  }),
 };