Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX (#472)

* Change auth styling and add back button
* Add Skip button on 'SetupAssistant'

7 files changed, 149 insertions, 104 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.jsx
index 41bda2f67..8a88cedb1 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.jsx
@@ -36,9 +36,13 @@ class AuthLayout extends Component {
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
   };
 
-  state = {
-    shouldShowAppUpdateInfoBar: true,
-  };
+  constructor() {
+    super();
+
+    this.state = {
+      shouldShowAppUpdateInfoBar: true,
+    };
+  }
 
   render() {
     const {
@@ -91,7 +95,9 @@ class AuthLayout extends Component {
               onClick={retryHealthCheck}
             >
               <Icon icon={mdiFlash} />
-              {intl.formatMessage(globalMessages.APIUnhealthy, { serverNameParse })}
+              {intl.formatMessage(globalMessages.APIUnhealthy, {
+                serverNameParse,
+              })}
             </InfoBar>
           )}
           <div className="auth__layout">
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.jsx
index 8d0960843..8f4b85fbb 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.jsx
@@ -2,6 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
+import { mdiArrowLeftCircle } from '@mdi/js';
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Select from '../ui/Select';
@@ -12,6 +13,7 @@ import { url, required } from '../../helpers/validation-helpers';
 import { LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../config';
 import globalMessages from '../../i18n/globalMessages';
 import { H1 } from '../ui/headline';
+import Icon from '../ui/icon';
 
 const messages = defineMessages({
   headline: {
@@ -46,35 +48,36 @@ class ChangeServer extends Component {
 
   franzServer = LIVE_FRANZ_API;
 
-  defaultServers = [ this.ferdiumServer, this.franzServer ];
+  defaultServers = [this.ferdiumServer, this.franzServer];
 
   form = (() => {
     const { intl } = this.props;
-    return new Form({
-      fields: {
-        server: {
-          label: intl.formatMessage(messages.label),
-          value: this.props.server,
-          options: [
-            { value: this.ferdiumServer, label: 'Ferdium (Default)' },
-            { value: this.franzServer, label: 'Franz' },
-            {
-              value: this.defaultServers.includes(this.props.server)
-                ? ''
-                : this.props.server,
-              label: 'Custom',
-            },
-          ],
-        },
-        customServer: {
-          label: intl.formatMessage(messages.customServerLabel),
-          value: '',
-          validators: [url, required],
+    return new Form(
+      {
+        fields: {
+          server: {
+            label: intl.formatMessage(messages.label),
+            value: this.props.server,
+            options: [
+              { value: this.ferdiumServer, label: 'Ferdium (Default)' },
+              { value: this.franzServer, label: 'Franz' },
+              {
+                value: this.defaultServers.includes(this.props.server)
+                  ? ''
+                  : this.props.server,
+                label: 'Custom',
+              },
+            ],
+          },
+          customServer: {
+            label: intl.formatMessage(messages.customServerLabel),
+            value: '',
+            validators: [url, required],
+          },
         },
       },
-    },
-    intl,
-  );
+      intl,
+    );
   })();
 
   componentDidMount() {
@@ -109,9 +112,11 @@ class ChangeServer extends Component {
     return (
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
+          <Link to="/auth/welcome">
+            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+          </Link>
           <H1>{intl.formatMessage(messages.headline)}</H1>
-          {(form.$('server').value === this.franzServer) && (
+          {form.$('server').value === this.franzServer && (
             <Infobox type="warning">
               {intl.formatMessage(messages.warning)}
             </Infobox>
@@ -121,8 +126,10 @@ class ChangeServer extends Component {
             <Input
               placeholder="Custom Server"
               onChange={e => {
-                this.form.$('customServer').value = this.form.$('customServer').value.replace(/\/$/, "");
-                this.submit(e)
+                this.form.$('customServer').value = this.form
+                  .$('customServer')
+                  .value.replace(/\/$/, '');
+                this.submit(e);
               }}
               field={form.$('customServer')}
             />
@@ -133,6 +140,11 @@ class ChangeServer extends Component {
             label={intl.formatMessage(globalMessages.submit)}
           />
         </form>
+        <div className="auth__help">
+          <Link to="/auth/welcome">
+            <Icon icon={mdiArrowLeftCircle} size={1.5} />
+          </Link>
+        </div>
       </div>
     );
   }
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.jsx
index a5893e181..33b4d3e0d 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.jsx
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiArrowLeftCircle } from '@mdi/js';
+import Icon from '../ui/icon';
 import { LIVE_FRANZ_API } from '../../config';
 import { API_VERSION } from '../../environment-remote';
 import { serverBase } from '../../api/apiBase'; // TODO: Remove this line after fixing password recovery in-app
@@ -61,10 +63,6 @@ const messages = defineMessages({
     id: 'login.link.password',
     defaultMessage: 'Reset password',
   },
-  backToWelcome: {
-    id: 'login.backToWelcome',
-    defaultMessage: 'Click the Ferdium icon to go back to the Welcome screen',
-  },
 });
 
 class Login extends Component {
@@ -80,23 +78,25 @@ class Login extends Component {
 
   form = (() => {
     const { intl } = this.props;
-    return new Form({
-      fields: {
-        email: {
-          label: intl.formatMessage(messages.emailLabel),
-          value: '',
-          validators: [required, email],
-        },
-        password: {
-          label: intl.formatMessage(messages.passwordLabel),
-          value: '',
-          validators: [required],
-          type: 'password',
+    return new Form(
+      {
+        fields: {
+          email: {
+            label: intl.formatMessage(messages.emailLabel),
+            value: '',
+            validators: [required, email],
+          },
+          password: {
+            label: intl.formatMessage(messages.passwordLabel),
+            value: '',
+            validators: [required],
+            type: 'password',
+          },
         },
       },
-    },
-    intl,
-  )})();
+      intl,
+    );
+  })();
 
   submit(e) {
     e.preventDefault();
@@ -123,7 +123,9 @@ class Login extends Component {
     return (
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
+          <Link to="/auth/welcome">
+            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+          </Link>
           <H1>{intl.formatMessage(messages.headline)}</H1>
           {isTokenExpired && (
             <p className="error-message center">
@@ -185,15 +187,15 @@ class Login extends Component {
           <Link
             // to={passwordRoute} // TODO: Uncomment this line after fixing password recovery in-app
             to={`${serverBase()}/user/forgot`} // TODO: Remove this line after fixing password recovery in-app
-            target='_blank' // TODO: Remove this line after fixing password recovery in-app
+            target="_blank" // TODO: Remove this line after fixing password recovery in-app
           >
             {intl.formatMessage(messages.passwordLink)}
           </Link>
         </div>
         <div className="auth__help">
-          <span>
-            {intl.formatMessage(messages.backToWelcome)}
-          </span>
+          <Link to="/auth/welcome">
+            <Icon icon={mdiArrowLeftCircle} size={1.5} />
+          </Link>
         </div>
       </div>
     );
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.jsx
index e3d2d88d1..8d15e36d1 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.jsx
@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'setupAssistant.submit.label',
     defaultMessage: "Let's go",
   },
+  skipButtonLabel: {
+    id: 'setupAssistant.skip.label',
+    defaultMessage: 'Skip',
+  },
   inviteSuccessInfo: {
     id: 'invite.successInfo',
     defaultMessage: 'Invitations sent successfully',
@@ -145,21 +149,15 @@ class SetupAssistant extends Component {
     isInviteSuccessful: false,
   };
 
-  state = {
-    services: [
-      {
-        id: 'whatsapp',
-      },
-      {
-        id: 'messenger',
-      },
-      {
-        id: 'gmail',
-      },
-    ],
-    isSlackModalOpen: false,
-    slackWorkspace: '',
-  };
+  constructor() {
+    super();
+
+    this.state = {
+      services: [],
+      isSlackModalOpen: false,
+      slackWorkspace: '',
+    };
+  }
 
   slackWorkspaceHandler() {
     const { slackWorkspace = '', services } = this.state;
@@ -321,6 +319,13 @@ class SetupAssistant extends Component {
           busy={isSettingUpServices}
           disabled={isSettingUpServices || addedServices.length === 0}
         />
+        <Button
+          type="button"
+          className="auth__button auth__button--skip"
+          label={intl.formatMessage(messages.skipButtonLabel)}
+          onClick={() => onSubmit([])}
+          buttonType="secondary"
+        />
       </div>
     );
   }
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.jsx
index eaa68f918..e0337656c 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.jsx
@@ -4,11 +4,13 @@ import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiArrowLeftCircle } from '@mdi/js';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/button';
 import Link from '../ui/Link';
+import Icon from '../ui/icon';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 import { serverBase } from '../../api/apiBase';
@@ -75,33 +77,35 @@ class Signup extends Component {
 
   form = (() => {
     const { intl } = this.props;
-    return new Form({
-      fields: {
-        firstname: {
-          label: intl.formatMessage(messages.firstnameLabel),
-          value: '',
-          validators: [required],
-        },
-        lastname: {
-          label: intl.formatMessage(messages.lastnameLabel),
-          value: '',
-          validators: [required],
-        },
-        email: {
-          label: intl.formatMessage(messages.emailLabel),
-          value: '',
-          validators: [required, email],
-        },
-        password: {
-          label: intl.formatMessage(messages.passwordLabel),
-          value: '',
-          validators: [required, minLength(6)],
-          type: 'password',
+    return new Form(
+      {
+        fields: {
+          firstname: {
+            label: intl.formatMessage(messages.firstnameLabel),
+            value: '',
+            validators: [required],
+          },
+          lastname: {
+            label: intl.formatMessage(messages.lastnameLabel),
+            value: '',
+            validators: [required],
+          },
+          email: {
+            label: intl.formatMessage(messages.emailLabel),
+            value: '',
+            validators: [required, email],
+          },
+          password: {
+            label: intl.formatMessage(messages.passwordLabel),
+            value: '',
+            validators: [required, minLength(6)],
+            type: 'password',
+          },
         },
       },
-    },
-    intl,
-  )})();
+      intl,
+    );
+  })();
 
   submit(e) {
     e.preventDefault();
@@ -125,7 +129,13 @@ class Signup extends Component {
             className="franz-form auth__form"
             onSubmit={e => this.submit(e)}
           >
-            <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
+            <Link to="/auth/welcome">
+              <img
+                src="./assets/images/logo.svg"
+                className="auth__logo"
+                alt=""
+              />
+            </Link>
             <H1>{intl.formatMessage(messages.headline)}</H1>
             <div className="grid__row">
               <Input field={form.$('firstname')} focus />
@@ -182,6 +192,11 @@ class Signup extends Component {
               {intl.formatMessage(messages.loginLink)}
             </Link>
           </div>
+          <div className="auth__help">
+            <Link to="/auth/welcome">
+              <Icon icon={mdiArrowLeftCircle} size={1.5} />
+            </Link>
+          </div>
         </div>
       </div>
     );
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f25d59098..d66a52b0b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -64,7 +64,6 @@
   "locked.touchId": "Unlock with Touch ID",
   "locked.touchIdPrompt": "unlock via Touch ID",
   "locked.unlockWithPassword": "Unlock with Password",
-  "login.backToWelcome": "Click the Ferdium icon to go back to the Welcome screen",
   "login.changeServer": "Change here!",
   "login.changeServerMessage": "You are using {serverNameParse} Server, do you want to switch?",
   "login.customServerQuestion": "Using a custom Ferdium server?",
@@ -427,6 +426,7 @@
   "setupAssistant.headline": "Let's get started",
   "setupAssistant.subheadline": "Choose from our most used services and get back on top of your messaging now.",
   "setupAssistant.submit.label": "Let's go",
+  "setupAssistant.skip.label": "Skip",
   "sidebar.addNewService": "Add new service",
   "sidebar.closeTodosDrawer": "Close Ferdium Todos",
   "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
@@ -480,4 +480,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdium Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 33e3a4a78..e60c4971c 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -49,6 +49,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: auto;
   }
 
   .auth__container {
@@ -85,7 +86,10 @@
   .auth__button {
     width: 100%;
 
-    &.auth__button--skip { margin: 10px auto 0; }
+    &.auth__button--skip {
+      margin: 10px auto 0;
+      width: 20%;
+    }
   }
 
   .touchid__button {
@@ -127,7 +131,10 @@
   }
 
   .auth__help {
-    padding: 5% 2%;
+    display: flex;
+    padding-top: 2%;
+    padding-bottom: 2%;
+    justify-content: center;
   }
 
   .auth__adlk {
@@ -143,10 +150,8 @@
   .info-bar { position: absolute; }
 
   &__scroll-container {
-    max-height: 100vh;
-    padding: 80px 0;
-    overflow: auto;
     width: 100%;
+    height: fit-content;
   }
 
   .available-services { margin-bottom: 15px; }