Merge pull request #63 from smiclea/CORWEB-90

Fix Add Cloud Connection layout issues CORWEB-90

src/components/AddCloudConnection/AddCloudConnection.js

@@ -25,10 +25,8 @@ import ConnectionsActions from '../../actions/ConnectionsActions';
 import NotificationActions from '../../actions/NotificationActions';
 import Dropdown from '../NewDropdown';
 import Switch from '../Switch'
-import Helper from '../Helper'
 import LoadingIcon from "../LoadingIcon/LoadingIcon";
 import ValidateEndpoint from '../ValidateEndpoint';
-import InfoIcon from '../InfoIcon'
 
 const title = 'Add Cloud Endpoint';
 
@@ -440,7 +438,6 @@ class AddCloudConnection extends Reflux.Component {
           <div className={"form-group " + (this.isValid(field) ? "" : s.error)} key={"cloudField_" + field.name}>
             <div className="input-label">
               {field.label + (field.required ? " *" : "")}
-              <InfoIcon text={Helper.getCloudFieldDescription(field.name)} />
             </div>
             <input
               type="text"
@@ -456,7 +453,6 @@ class AddCloudConnection extends Reflux.Component {
           <div className={"form-group " + (this.isValid(field) ? "" : s.error)} key={"cloudField_" + field.name}>
             <div className="input-label">
               {field.label + (field.required ? " *" : "")}
-              <InfoIcon text={Helper.getCloudFieldDescription(field.name)} />
             </div>
             <input
               type="password"
@@ -475,9 +471,10 @@ class AddCloudConnection extends Reflux.Component {
           >
             <div className="input-label">
               {field.label + (field.required ? " *" : "")}
-              <InfoIcon text={Helper.getCloudFieldDescription(field.name)} />
             </div>
             <Switch
+              className={s.switchButton}
+              labelClassName={s.switchLabel}
               checked={this.state.currentCloudData[field.name] === true}
               onChange={(e) => this.handleCloudFieldChange(e, field)}
               checkedLabel="Yes"
@@ -491,7 +488,6 @@ class AddCloudConnection extends Reflux.Component {
           <div className={"form-group " + (this.isValid(field) ? "" : s.error)} key={"cloudField_" + field.name}>
             <div className="input-label">
               {field.label + (field.required ? " *" : "")}
-              <InfoIcon text={Helper.getCloudFieldDescription(field.name)} />
             </div>
             <Dropdown
               options={field.options}
@@ -528,7 +524,9 @@ class AddCloudConnection extends Reflux.Component {
               { radioOptions }
             </div>
             <div></div>
-            {fields}
+            <div className={s.cloudFields + ' ' + s.radioFields}>
+              {fields}
+            </div>
           </div>
         )
         break;

src/components/AddCloudConnection/AddCloudConnection.scss

@@ -40,14 +40,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   padding: 48px 32px 32px;
   position: relative;
   :global(.form-group) {
-    &> label {
-      font-weight: 500;
+    margin-bottom: 16px;
+    margin-left: 64px;
+    width: 224px;
+    :global(.input-label) {
+      font-weight: $weight-regular;
       font-size: 10px;
-      color: $task-gray-light;
+      color: $gray;
       letter-spacing: -0.33px;
       text-transform: uppercase;
+      margin-bottom: 2px;
     }
-    margin-bottom: 32px;
     &:global(.switch-radio) {
       width: 100%;
     }
@@ -79,15 +82,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
   }
   .cloudFields {
-    :global(.form-group):not(:global(.switch-radio)) {
-      width: 50%;
-      float: left;
-      box-sizing: border-box;
-      &:nth-child(2n) {
-        padding-left: 16px;
-      }
-      &:nth-child(2n+1) {
-        padding-right: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -64px;
+    &.radioFields {
+      margin-left: 0;
+    }
+    .switchButton {
+      margin-top: 8px;
+      .switchLabel {
+        color: $gray;
       }
     }
     &:after {

src/components/Switch/Switch.js

@@ -24,7 +24,9 @@ class Switch extends Component {
     onChange: PropTypes.func,
     checked: PropTypes.bool,
     checkedLabel: PropTypes.string,
-    uncheckedLabel: PropTypes.string
+    uncheckedLabel: PropTypes.string,
+    className: PropTypes.string,
+    labelClassName: PropTypes.string
   }
 
   constructor(props) {
@@ -47,7 +49,7 @@ class Switch extends Component {
     let renderLabel = () => {
       if ((this.state.checked && this.props.checkedLabel) || (!this.state.checked && this.props.uncheckedLabel)) {
         return (
-          <div className={s.label}>
+          <div className={s.label + ' ' + (this.props.labelClassName || '')}>
             {this.state.checked ? this.props.checkedLabel : this.props.uncheckedLabel}
           </div>
         )
@@ -56,7 +58,7 @@ class Switch extends Component {
     }
 
     return (
-      <div className={s.root}>
+      <div className={s.root + ' ' + (this.props.className || '')}>
         <input
           type="checkbox"
           className={s.input}