Change login screen layout (#345)

4 files changed, 68 insertions, 18 deletions

diff --git a/src/api/apiBase.ts b/src/api/apiBase.ts
index 80ab99ac6..d7cc9b810 100644
--- a/src/api/apiBase.ts
+++ b/src/api/apiBase.ts
@@ -54,3 +54,26 @@ export function serverBase() {
 
   return fixUrl(terms);
 }
+
+export function serverName(): string {
+
+  const serverType = (window as any).ferdium.stores.settings.all.app.server;
+  const noServer = 'You are using Ferdium without a server';
+
+  let nameServer;
+  switch (serverType) {
+    case LIVE_FRANZ_API:
+      nameServer = 'Franz Server';
+      break;
+    case LIVE_FERDIUM_API:
+      nameServer = 'Ferdium Server';
+      break;
+    case noServer:
+      nameServer = 'no Server';
+      break;
+    default:
+      nameServer = 'a Custom Server';
+  }
+
+  return nameServer;
+}
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index d595aef3d..18b506eba 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -5,6 +5,7 @@ import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import serverlessLogin from '../../helpers/serverless-helpers';
 import { shuffleArray } from '../../helpers/array-helpers';
+import { serverName } from '../../api/apiBase';
 
 import Link from '../ui/Link';
 import { H1 } from '../ui/headline';
@@ -18,9 +19,13 @@ const messages = defineMessages({
     id: 'welcome.loginButton',
     defaultMessage: 'Login to your account',
   },
+  changeServerMessage: {
+    id: 'login.changeServerMessage',
+    defaultMessage: 'You are using {serverNameParse}, do you want to switch?'
+  },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: 'Change server'
+    defaultMessage: 'Change here!'
   },
   serverless: {
     id: 'services.serverless',
@@ -47,6 +52,9 @@ class Welcome extends Component {
     let { recipes } = this.props;
     recipes = shuffleArray(recipes);
     recipes.length = 8 * 2;
+
+    const serverNameParse = serverName();
+
     return (
       <div className="welcome">
         <div className="welcome__content">
@@ -56,15 +64,10 @@ class Welcome extends Component {
             alt=""
           />
           {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
-          <div className="welcome__text">
-            <H1>Ferdium</H1>
-          </div>
         </div>
-        <Link to={changeServerRoute} className="button__change-server">
-            <span>
-              {intl.formatMessage(messages.changeServer)}
-            </span>
-        </Link>
+        <div className="welcome__text">
+          <H1>Ferdium</H1>
+        </div>
         <div className="welcome__buttons">
           <Link to={signupRoute} className="button button__inverted">
             {intl.formatMessage(messages.signupButton)}
@@ -72,7 +75,16 @@ class Welcome extends Component {
           <Link to={loginRoute} className="button">
             {intl.formatMessage(messages.loginButton)}
           </Link>
-          <br />
+          <div className="welcome__text__change-server">
+            <span>
+              {intl.formatMessage(messages.changeServerMessage, { serverNameParse })}
+            </span>
+            <Link to={changeServerRoute} className="button__change-server">
+                <span>
+                  {intl.formatMessage(messages.changeServer)}
+                </span>
+            </Link>
+          </div>
           <br />
           <hr />
           <br />
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index c19429e6d..f51c798ac 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -64,7 +64,8 @@
   "locked.touchId": "Unlock with Touch ID",
   "locked.touchIdPrompt": "unlock via Touch ID",
   "locked.unlockWithPassword": "Unlock with Password",
-  "login.changeServer": "Change server",
+  "login.changeServer": "Change here!",
+  "login.changeServerMessage": "You are using {serverNameParse}, do you want to switch?",
   "login.customServerQuestion": "Using a custom Ferdium server?",
   "login.customServerSuggestion": "Try importing your Franz account",
   "login.email.label": "Email address",
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index 09d02d2eb..3ffc3f227 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -14,20 +14,27 @@
   }
 
   &__text {
-    border-left: 1px solid #fff;
-    margin-left: 40px;
-    padding-left: 40px;
-
     h1 {
       font-size: 60px;
       letter-spacing: -0.4rem;
       margin-bottom: 5px;
+      color: rgb(255, 255, 255);
+      justify-content: center;
+      margin-top: 5%;
+      display: flex;
     }
 
     h2 {
       margin-bottom: 0;
       margin-left: 2px;
     }
+
+    &__change-server {
+      display: flex;
+      margin: 10% auto auto auto;
+      justify-content: center;
+      color: #999;
+    }
   }
 
   &__services {
@@ -71,9 +78,16 @@
 
     &__change-server {
       display: flex;
-      width: 30%;
-      margin: 5% auto 5% auto;
-      justify-content: center;
+      margin: 0 0 0 1%;
+      color: #999;
+      text-decoration: underline;
+    }
+
+    &__change-server:hover {
+      display: flex;
+      margin: 0 0 0 1%;
+      color: rgb(20, 122, 255);
+      text-decoration: none;
     }
   }