styling(connect-form): add divider, tweak tabs overflow (#236)

Author: Anemy

src/views/webview-app/components/connect-form/connection-form.less

@@ -26,7 +26,6 @@
   padding: 0;
   margin: 0;
   margin-top: 10px;
-  overflow: hidden;
 }
 
 .connection-form-tab {
@@ -75,6 +74,7 @@
   height: 4px;
   left: -1px;
   right: -1px;
+  margin-bottom: -1px;
   pointer-events: none;
   outline: none;
   background-color: @green;

src/views/webview-app/components/connect-form/general-tab/general-tab.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import Divider from '../../form/divider/divider';
 import HostInput from './host/host';
 import Authentication from './authentication/authentication';
 
@@ -8,6 +9,7 @@ export class GeneralTab extends React.Component {
     return (
       <React.Fragment>
         <HostInput />
+        <Divider />
         <Authentication />
       </React.Fragment>
     );

src/views/webview-app/components/form/divider/divider.less

@@ -0,0 +1,10 @@
+
+.form-divider {
+  background-color: rgba(75, 75, 75, 0.5);
+  height: 1px;
+  margin: 0;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  padding: 0;
+  width: 100%;
+}

src/views/webview-app/components/form/divider/divider.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import styles from './divider.less';
+
+export class Divider extends React.Component {
+  render(): React.ReactNode {
+    return (
+      <div className={styles['form-divider']} />
+    );
+  }
+}
+
+export default Divider;