Merge pull request #61 from smiclea/CORWEB-32

Updated endpoint detail view style closer to sketch CORWEB-32

src/components/CloudConnectionDetail/CloudConnectionDetail.js

@@ -178,8 +178,6 @@ class CloudConnectionDetail extends Component {
                 <Moment format="MM/DD/YYYY HH:mm" date={createdAt} />
               </div>
             </div>
-          </div>
-          <div className={s.container}>
             {this.renderAuthFields()}
           </div>
         </div>

src/components/CloudConnectionDetail/CloudConnectionDetail.scss

@@ -29,6 +29,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 .container {
   margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   &:after {
     clear: both;
     height: 0;
@@ -36,20 +39,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     content: ' ';
   }
 }
-.columnLeft, .columnRight {
-  width: 50%;
-  float: left;
-}
 .formGroup {
   margin-bottom: 32px;
+  flex-grow: 1;
   width: 50%;
-  float: left;
   .title {
-    font-weight: $weight-semibold;
+    font-weight: $weight-regular;
     font-size: 10px;
-    color: $gray-dark;
+    color: $gray;
     text-transform: uppercase;
-    margin-bottom: 8px;
+    margin-bottom: 2px;
   }
   .titleIp {
     font-weight: $weight-semibold;

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -217,9 +217,7 @@ class CloudConnectionsView extends Component {
 
             </div>
             <div className={s.content}>
-              <div className={s.connectionTypeImg + " icon large-cloud " + (item && item.type)}></div>
-              <br />
-
+              <div className={`${s.connectionTypeImg} ${(item && item.type) || ''}`}></div>
               {React.cloneElement(this.props.children, { connection: item })}
               <div className={s.buttons}>
                 <div className={s.leftSide}>