Add an icon to language item and remove the large title when logged in to produce more compact UI

3 files changed, 43 insertions, 45 deletions

diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index f9d0f595b1..1693f85c2b 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -381,6 +381,10 @@ export const Icon = function CellIcon(props: ImageView['props']) {
   );
 };
 
+export const UntintedIcon = function CellIcon(props: ImageView['props']) {
+  return <ImageView {...props} style={[styles.icon, props.style]} />;
+};
+
 export const Footer = function CellFooter({ children }: IContainerProps) {
   return (
     <View style={styles.footer.container}>
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index ddcc8ed3e6..129550f3a0 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -5,7 +5,6 @@ import { messages } from '../../shared/gettext';
 import AccountExpiry from '../lib/account-expiry';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
-import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
 import {
   CloseBarItem,
@@ -41,12 +40,14 @@ export interface IProps {
 
 export default class Settings extends Component<IProps> {
   public render() {
+    const showLargeTitle = this.props.loginState !== 'ok';
+
     return (
       <Layout>
         <Container>
           <View style={styles.settings}>
             <NavigationContainer>
-              <NavigationBar>
+              <NavigationBar alwaysDisplayBarTitle={!showLargeTitle}>
                 <NavigationItems>
                   <CloseBarItem action={this.props.onClose} />
                   <TitleBarItem>
@@ -56,19 +57,15 @@ export default class Settings extends Component<IProps> {
                 </NavigationItems>
               </NavigationBar>
 
-              <View style={styles.settings__container}>
-                <NavigationScrollbars style={styles.settings__scrollview}>
-                  <View style={styles.settings__content}>
-                    <SettingsHeader>
-                      <HeaderTitle>{messages.pgettext('settings-view', 'Settings')}</HeaderTitle>
-                    </SettingsHeader>
+              <View style={styles.container}>
+                <NavigationScrollbars style={styles.scrollview}>
+                  <View style={styles.content}>
+                    {showLargeTitle && (
+                      <SettingsHeader>
+                        <HeaderTitle>{messages.pgettext('settings-view', 'Settings')}</HeaderTitle>
+                      </SettingsHeader>
+                    )}
                     <View>
-                      <Cell.CellButton onPress={this.props.onViewSelectLanguage}>
-                        <Cell.Label>{messages.pgettext('settings-view', 'Language')}</Cell.Label>
-                        <Cell.SubText>{this.props.preferredLocaleDisplayName}</Cell.SubText>
-                        <Cell.Icon height={12} width={7} source="icon-chevron" />
-                      </Cell.CellButton>
-
                       {this.renderTopButtons()}
                       {this.renderMiddleButtons()}
                       {this.renderBottomButtons()}
@@ -84,9 +81,12 @@ export default class Settings extends Component<IProps> {
     );
   }
 
+  private openDownloadLink = () => this.props.onExternalLink(links.download);
+  private openFaqLink = () => this.props.onExternalLink(links.faq);
+
   private renderQuitButton() {
     return (
-      <View style={styles.settings__footer}>
+      <View style={styles.quitButtonFooter}>
         <AppButton.RedButton onPress={this.props.onQuit}>
           {messages.pgettext('settings-view', 'Quit app')}
         </AppButton.RedButton>
@@ -113,8 +113,7 @@ export default class Settings extends Component<IProps> {
         <View>
           <Cell.CellButton onPress={this.props.onViewAccount}>
             <Cell.Label>{messages.pgettext('settings-view', 'Account')}</Cell.Label>
-            <Cell.SubText
-              style={isOutOfTime ? styles.settings__account_paid_until_label__error : undefined}>
+            <Cell.SubText style={isOutOfTime ? styles.accountPaidUntilErrorLabel : undefined}>
               {isOutOfTime ? outOfTimeMessage : formattedExpiry}
             </Cell.SubText>
             <Cell.Icon height={12} width={7} source="icon-chevron" />
@@ -130,7 +129,7 @@ export default class Settings extends Component<IProps> {
           <Cell.Label>{messages.pgettext('settings-view', 'Advanced')}</Cell.Label>
           <Cell.Icon height={12} width={7} source="icon-chevron" />
         </Cell.CellButton>
-        <View style={styles.settings__cell_spacer} />
+        <View style={styles.cellSpacer} />
       </View>
     );
   }
@@ -153,20 +152,14 @@ export default class Settings extends Component<IProps> {
         ? inconsistentVersionMessage
         : updateAvailableMessage;
 
-      icon = (
-        <ImageView
-          source="icon-alert"
-          tintColor={colors.red}
-          style={styles.settings__version_warning}
-        />
-      );
+      icon = <Cell.UntintedIcon source="icon-alert" tintColor={colors.red} />;
       footer = (
-        <View style={styles.settings__cell_footer}>
-          <Text style={styles.settings__cell_footer_label}>{message}</Text>
+        <View style={styles.cellFooter}>
+          <Text style={styles.cellFooterLabel}>{message}</Text>
         </View>
       );
     } else {
-      footer = <View style={styles.settings__cell_spacer} />;
+      footer = <View style={styles.cellSpacer} />;
     }
 
     return (
@@ -174,7 +167,7 @@ export default class Settings extends Component<IProps> {
         <Cell.CellButton disabled={this.props.isOffline} onPress={this.openDownloadLink}>
           {icon}
           <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
-          <Cell.SubText style={styles.settings__appversion}>{this.props.appVersion}</Cell.SubText>
+          <Cell.SubText style={styles.appVersionLabel}>{this.props.appVersion}</Cell.SubText>
           <Cell.Icon height={16} width={16} source="icon-extLink" />
         </Cell.CellButton>
         {footer}
@@ -182,9 +175,6 @@ export default class Settings extends Component<IProps> {
     );
   }
 
-  private openDownloadLink = () => this.props.onExternalLink(links.download);
-  private openFaqLink = () => this.props.onExternalLink(links.faq);
-
   private renderBottomButtons() {
     return (
       <View>
@@ -197,6 +187,13 @@ export default class Settings extends Component<IProps> {
           <Cell.Label>{messages.pgettext('settings-view', 'FAQs & Guides')}</Cell.Label>
           <Cell.Icon height={16} width={16} source="icon-extLink" />
         </Cell.CellButton>
+
+        <Cell.CellButton onPress={this.props.onViewSelectLanguage}>
+          <Cell.UntintedIcon width={24} height={24} source="icon-language" />
+          <Cell.Label>{messages.pgettext('settings-view', 'Language')}</Cell.Label>
+          <Cell.SubText>{this.props.preferredLocaleDisplayName}</Cell.SubText>
+          <Cell.Icon height={12} width={7} source="icon-chevron" />
+        </Cell.CellButton>
       </View>
     );
   }
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 5c9a66fd97..51a215d0fc 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -6,43 +6,40 @@ export default {
     backgroundColor: colors.darkBlue,
     flex: 1,
   }),
-  settings__container: Styles.createViewStyle({
+  container: Styles.createViewStyle({
     flexDirection: 'column',
     flex: 1,
   }),
-  settings__content: Styles.createViewStyle({
+  content: Styles.createViewStyle({
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'space-between',
     overflow: 'visible',
   }),
   // plain CSS style
-  settings__scrollview: {
+  scrollview: {
     flex: 1,
   },
-  settings__cell_spacer: Styles.createViewStyle({
+  cellSpacer: Styles.createViewStyle({
     height: 24,
     flex: 0,
   }),
-  settings__cell_footer: Styles.createViewStyle({
+  cellFooter: Styles.createViewStyle({
     paddingTop: 8,
     paddingRight: 24,
     paddingBottom: 24,
     paddingLeft: 24,
   }),
-  settings__footer: Styles.createViewStyle({
+  quitButtonFooter: Styles.createViewStyle({
     paddingTop: 24,
-    paddingBottom: 24,
+    paddingBottom: 19,
     paddingLeft: 24,
     paddingRight: 24,
   }),
-  settings__version_warning: Styles.createViewStyle({
-    marginLeft: 8,
-  }),
-  settings__account_paid_until_label__error: Styles.createTextStyle({
+  accountPaidUntilErrorLabel: Styles.createTextStyle({
     color: colors.red,
   }),
-  settings__cell_footer_label: Styles.createTextStyle({
+  cellFooterLabel: Styles.createTextStyle({
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '600',
@@ -50,7 +47,7 @@ export default {
     letterSpacing: -0.2,
     color: colors.white60,
   }),
-  settings__appversion: Styles.createTextStyle({
+  appVersionLabel: Styles.createTextStyle({
     flex: 0,
   }),
 };