From 94bbb68d4c3b9a0774c83a1be2d1eca0180c63de Mon Sep 17 00:00:00 2001
From: Rhys Howell <rhys@rhysh@live.com>
Date: Fri, 7 Aug 2020 11:23:04 +0200
Subject: [PATCH] Add improvements to conenct message

---
 .../components/connect-form/form-actions.tsx  | 18 ++++-------
 src/views/webview-app/connect.module.less     | 32 ++++++-------------
 2 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/src/views/webview-app/components/connect-form/form-actions.tsx b/src/views/webview-app/components/connect-form/form-actions.tsx
index a58cfbbf2..be55c6dc6 100644
--- a/src/views/webview-app/components/connect-form/form-actions.tsx
+++ b/src/views/webview-app/components/connect-form/form-actions.tsx
@@ -62,13 +62,6 @@ class FormActions extends React.Component<props> {
   renderConnect = (): React.ReactNode => {
     const syntaxError = this.hasSyntaxError() ? 'disabled' : '';
 
-    const { isConnecting } = this.props;
-
-    let connectingText = 'Connect';
-    if (isConnecting) {
-      connectingText = 'Connecting...';
-    }
-
     return (
       <button
         type="submit"
@@ -76,7 +69,7 @@ class FormActions extends React.Component<props> {
         className={classnames(styles.btn, syntaxError)}
         onClick={this.onConnectClicked}
       >
-        {connectingText}
+        Connect
       </button>
     );
   };
@@ -91,12 +84,15 @@ class FormActions extends React.Component<props> {
     let colorStyle = styles['connection-message-container-success'];
     let hasMessage = false;
 
-    if (this.hasError()) {
+    if (this.props.isConnected) {
+      hasMessage = true;
+    } else if (this.props.isConnecting) {
+      hasMessage = true;
+      message = 'Connecting...';
+    } else if (this.hasError()) {
       hasMessage = true;
       message = this.props.errorMessage;
       colorStyle = styles['connection-message-container-error'];
-    } else if (this.props.isConnected) {
-      hasMessage = true;
     }
 
     if (hasMessage === true) {
diff --git a/src/views/webview-app/connect.module.less b/src/views/webview-app/connect.module.less
index 698da2133..6b9dddf75 100644
--- a/src/views/webview-app/connect.module.less
+++ b/src/views/webview-app/connect.module.less
@@ -1,7 +1,7 @@
 @pw: #21313c;
 @alertRed: #cf4a22;
 @warningText: #ffdd49;
-@green: #13aa52;
+@green: rgb(19, 170, 82);
 @gray: #5d6c74;
 
 .page {
@@ -35,7 +35,7 @@ label {
 
 .connect {
   &-is-connected {
-    border: 2px solid green;
+    border: 2px solid @green;
   }
 
   ::-webkit-scrollbar {
@@ -93,6 +93,7 @@ label {
     }
 
     &-success {
+      color: white;
       background: @green;
       padding: 4px 10px;
       border-radius: 3px;
@@ -117,24 +118,6 @@ label {
     }
   }
 
-  .success {
-    background-color: #90ee90;
-    border-bottom: 3px solid #008000;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 72px;
-    width: 100%;
-
-    p {
-      margin: 26px auto;
-      width: 70%;
-      color: #008000;
-      text-align: center;
-      font-weight: bold;
-    }
-  }
-
   .connect-form {
     margin: 10px;
     width: 320px;
@@ -156,8 +139,10 @@ label {
 
           div {
             border: none;
-            background-color: var(--vscode-searchEditor-textInputBorder,
-                rgba(161, 161, 161, 0.5));
+            background-color: var(
+              --vscode-searchEditor-textInputBorder,
+              rgba(161, 161, 161, 0.5)
+            );
           }
         }
 
@@ -201,7 +186,8 @@ label {
         &-file-button {
           width: 100%;
           background: var(--vscode-input-background, transparent);
-          border: 1px solid var(--vscode-searchEditor-textInputBorder, rgba(161, 161, 161, 0.5));
+          border: 1px solid
+            var(--vscode-searchEditor-textInputBorder, rgba(161, 161, 161, 0.5));
           border-radius: 3px;
           color: var(--vscode-editor-foreground);
           padding: 8px 4px 9px;