SDA-4136 SDA-4137 SDA-4138 Welcome screen design fix

spec/__snapshots__/welcome.spec.ts.snap

@@ -118,7 +118,6 @@ exports[`welcome should render correctly 1`] = `
           data-testid="Welcome-main-container-podurl-box"
           disabled={false}
           onChange={[Function]}
-          tabIndex={0}
           type="url"
           value="https://[POD].symphony.com"
         />
@@ -160,7 +159,6 @@ exports[`welcome should render correctly 1`] = `
       disabled={true}
       onClick={[Function]}
       style={Object {}}
-      tabIndex={1}
     >
       log in
     </button>

src/renderer/components/welcome.tsx

@@ -1,8 +1,8 @@
+import classnames from 'classnames';
 import { ipcRenderer } from 'electron';
 import * as React from 'react';
 import { apiCmds, apiName } from '../../common/api-interface';
 import { i18n } from '../../common/i18n-preload';
-
 interface IState {
   url: string;
   message: string;
@@ -93,7 +93,6 @@ export default class Welcome extends React.Component<{}, IState> {
                     disabled={isLoading}
                     data-testid={'Welcome-main-container-podurl-box'}
                     className='Welcome-main-container-podurl-box'
-                    tabIndex={0}
                     type='url'
                     value={url}
                     onChange={this.updatePodUrl.bind(this)}
@@ -210,29 +209,29 @@ export default class Welcome extends React.Component<{}, IState> {
   public updateBrowserLoginAutoConnect(event) {
     const { urlValid } = this.state;
     const browserLoginAutoConnect = event.target.checked;
-    if (!browserLoginAutoConnect) {
-      if (this.browserLoginTimeoutId) {
-        clearTimeout(this.browserLoginTimeoutId);
+    if (browserLoginAutoConnect) {
+      if (urlValid) {
+        this.setState({
+          browserLoginAutoConnect,
+          isLoading: true,
+        });
+        const { url, isPodConfigured, isBrowserLoginEnabled } = this.state;
+        ipcRenderer.send(apiName.symphonyApi, {
+          cmd: apiCmds.browserLogin,
+          newPodUrl: url,
+          isPodConfigured,
+          isBrowserLoginEnabled,
+          browserLoginAutoConnect,
+        });
+        return;
       }
-      this.setState({
-        browserLoginAutoConnect,
-      });
     }
-
-    if (urlValid && browserLoginAutoConnect) {
-      this.setState({
-        browserLoginAutoConnect,
-        isLoading: true,
-      });
-      const { url, isPodConfigured, isBrowserLoginEnabled } = this.state;
-      ipcRenderer.send(apiName.symphonyApi, {
-        cmd: apiCmds.browserLogin,
-        newPodUrl: url,
-        isPodConfigured,
-        isBrowserLoginEnabled,
-        browserLoginAutoConnect,
-      });
+    if (this.browserLoginTimeoutId) {
+      clearTimeout(this.browserLoginTimeoutId);
     }
+    this.setState({
+      browserLoginAutoConnect,
+    });
   }
 
   /**
@@ -246,6 +245,9 @@ export default class Welcome extends React.Component<{}, IState> {
       isBrowserLoginEnabled,
       browserLoginAutoConnect,
     } = this.state;
+    const loginButtonClasses = classnames('Welcome-continue-button', {
+      'Welcome-continue-button-loading': isLoading,
+    });
     return (
       <React.Fragment>
         {isBrowserLoginEnabled && (
@@ -271,8 +273,7 @@ export default class Welcome extends React.Component<{}, IState> {
         )}
 
         <button
-          className='Welcome-continue-button'
-          tabIndex={1}
+          className={loginButtonClasses}
           disabled={(!isPodConfigured && !urlValid) || isLoading}
           onClick={this.eventHandlers.onLogin}
           style={isPodConfigured ? { marginTop: '40px' } : {}}

src/renderer/styles/theme.less

@@ -22,6 +22,7 @@
 @graphite-90: #141618;
 @graphite-50: #717681;
 @graphite-60: #52565e;
+@graphite-70: #3a3d43;
 
 @vanilla-white: #fff;
 @blue: #008eff;

src/renderer/styles/welcome.less

@@ -235,6 +235,10 @@ body {
     }
   }
 
+  &-continue-button-loading:disabled {
+    background-color: @electricity-ui-50;
+  }
+
   &-redirect-info-text-container {
     margin-top: 40px;
     margin-bottom: 16px;
@@ -363,7 +367,7 @@ body {
 .splash-screen--spinner {
   display: inline-block;
   line-height: 1;
-  color: @electricity-ui-50;
+  color: #f8f8f8;
   width: 20px;
   height: 20px;
   animation: progress-circular-rotate 1.4s linear infinite;
@@ -381,7 +385,7 @@ body {
   position: relative;
   display: inline-block;
   width: 43px;
-  height: 8px;
+  height: auto;
 }
 
 /* Hide default HTML checkbox */
@@ -395,10 +399,11 @@ body {
 .slider {
   position: absolute;
   cursor: pointer;
-  top: 0;
+  top: 5px;
   left: 0;
   right: 0;
   bottom: 0;
+  height: 8px;
   -webkit-transition: 0.4s;
   transition: 0.4s;
   background-color: @graphite-60;
@@ -443,6 +448,19 @@ input:checked + .slider {
   }
 }
 
+input:disabled + .slider {
+  background-color: @graphite-60;
+}
+
+input:disabled + .slider:before {
+  background-color: @graphite-70;
+  border-color: @graphite-60;
+}
+
+input:focus + .slider:before {
+  box-shadow: 0 0 10px #3da2fd;
+}
+
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;