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

4 files changed, 44 insertions, 45 deletions

diff --git a/gui/assets/images/icon-language.svg b/gui/assets/images/icon-language.svg
new file mode 100644
index 0000000000..8d3c8ab1a1
--- /dev/null
+++ b/gui/assets/images/icon-language.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m11.988281 3.085938-9.28125-2.828126v17.4375l9.28125-2.59375z" fill="#040606"/><path d="m11.765625 3.078125 9.640625-2.828125v17.4375l-9.640625-2.59375z" fill="#fff"/><path d="m.300781 20.75 11.464844-3.300781v-14.375l-11.464844 3.300781z" fill="#fff"/><g fill="#040606"><path d="m16.992188 20.964844 1.625 2.308594.855468-2.144532z"/><path d="m4.199219 8.03125c-.0625-.054688.078125.421875.273437.589844.347656.300781.617188.339844.761719.34375.316406.011718.710937-.066406.945313-.152344.222656-.082031.621093-.257812.769531-.511719.03125-.054687.117187-.144531.0625-.371093-.039063-.171876-.167969-.234376-.324219-.222657-.15625.007813-.628906.117188-.855469.175781-.230469.0625-.699219.183594-.90625.222657-.203125.039062-.65625-.015625-.726562-.074219"/><path d="m9.984375 13.6875c-.089844-.027344-1.960937-.695312-2.226563-.804688-.214843-.089843-.746093-.285156-.996093-.371093.703125-.9375 1.148437-1.644531 1.207031-1.753907.109375-.199218.855469-1.457031.875-1.535156.015625-.078125.035156-.367187.019531-.4375-.015625-.070312-.289062.066406-.660156.171875-.371094.109375-1.078125.507813-1.351563.554688-.273437.050781-1.148437.335937-1.597656.464843-.449218.128907-1.296875.351563-1.644531.433594-.347656.082032-.652344.085938-.847656.136719 0 0 .023437.238281.078125.308594.050781.070312.234375.246093.449218.292969.214844.046874.570313.027343.730469-.003907.164063-.03125.445313-.148437.480469-.199219.039062-.054687-.019531-.214843.046875-.265624.0625-.046876.917969-.21875 1.238281-.304688.320313-.085938 1.554688-.453125 1.722656-.433594-.054687.152344-1.046874 1.847656-1.363281 2.355469-.320312.503906-2.175781 2.730469-2.574219 3.121094-.296874.300781-1.023437 1.0625-1.277343 1.234375.0625.015625.515625-.019532.597656-.0625.507813-.269532 1.359375-1.183594 1.636719-1.464844.8125-.824219 1.527344-1.691406 2.097656-2.433594.109375.039063 1.003906.667969 1.238281.808594.230469.140625 1.152344.582031 1.351563.65625.199218.074219.964844.378906 1 .277344.03125-.105469-.140625-.714844-.230469-.746094"/><path d="m5.664062 22.09375c.179688.09375.347657.171875.539063.25.375.160156.804687.332031 1.210937.460938.558594.183593 1.117188.328124 1.671876.4375.308593.0625.648437.113281.976562.15625.03125 0 .917969.09375 1.09375.09375h.898438c.347656-.023438.675781-.042969 1.023437-.085938.28125-.035156.585937-.078125.886719-.136719.21875-.042969.449218-.085937.667968-.144531.207032-.050781.445313-.121094.675782-.191406.148437-.042969.308594-.101563.46875-.152344.128906-.050781.289062-.113281.4375-.164062.179687-.070313.386718-.164063.585937-.25.160157-.066407.339844-.152344.507813-.238282.128906-.0625.429687-.257812.585937-.257812.179688 0 .300781.136718.300781.257812 0 .246094-.390624.324219-.566406.4375-.191406.109375-.417968.195313-.617187.292969-.398438.179687-.808594.332031-1.195313.460937-.507812.164063-1.066406.320313-1.5625.421876-.191406.035156-.378906.078124-.566406.101562-.101562.019531-1.136719.15625-1.425781.15625h-1.3125c-.347657-.027344-.71875-.058594-1.066407-.101562-.308593-.042969-.636718-.097657-.945312-.15625-.238281-.042969-.496094-.101563-.726562-.164063-.398438-.09375-.785157-.214844-1.164063-.34375-.6875-.222656-1.402344-.515625-2.078125-.902344-.121094-.066406-.128906-.136719-.128906-.214843 0-.128907.109375-.246094.285156-.246094.160156 0 .480469.195312.539062.222656" fill-rule="evenodd"/><path d="m12.0625 3.039062v14.433594c-.007812.042969-.027344.085938-.070312.128906-.019532.023438-.058594.058594-.085938.066407-.25.085937-11.457031 3.335937-11.605469 3.335937-.121093 0-.2304685-.070312-.2890622-.183594 0-.007812-.0117188-.015624-.0117188-.03125v-14.441406c.0195312-.042968.03125-.101562.0703125-.136718.0820315-.09375.2187495-.113282.3085935-.136719.167969-.050781 11.207032-3.25 11.367188-3.25.097656 0 .316406.0625.316406.214843zm-.605469 14.21875-10.847656 3.117188v-13.8125l10.847656-3.117188z" fill-rule="evenodd"/><path d="m21.707031.273438v17.378906c-.007812.199218-.167969.285156-.316406.285156-.132813 0-1.066406-.277344-1.226563-.320312-1.253906-.335938-2.515624-.667969-3.761718-1.003907-.277344-.078125-.566406-.15625-.835938-.234375-.238281-.058594-.496094-.125-.734375-.195312-1.066406-.285156-2.152343-.566406-3.214843-.875-.042969-.011719-.140626-.128906-.140626-.15625v-12.136719c.019532-.042969.039063-.09375.089844-.128906.078125-.078125 3.492188-1.058594 4.835938-1.445313.359375-.109375 4.847656-1.441406 4.988281-1.441406.175781 0 .316406.113281.316406.273438zm-.605469 17.050781-9.027343-2.421875v-11.636719l9.027343-2.648437z" fill-rule="evenodd"/><path d="m24 20.964844-12.0625-3.316406.050781-14.441407 12.011719 3.296875z"/></g><path d="m17.207031 7.328125 1.554688.40625 2.832031 8.804687-1.597656-.417968-.570313-1.808594-3.300781-.859375-.707031 1.472656-1.597657-.417969zm.710938 2.332031-1.183594 2.46875 2.175781.570313z" fill="#fff" fill-rule="evenodd"/></svg>
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,
   }),
 };