Updated the Select VMs page style and layout according to design CORWEB-39

src/components/App/App.scss

@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 html {
   color: $black;
-  font-weight: $weight-regular;
+  font-weight: $weight-light;
   font-size: 14px;
   font-family: $font-family-base;
   line-height: 1.375; /* ~22px */

src/components/SearchBox/SearchBox.scss

@@ -22,6 +22,7 @@ $searchStrokeColor: $gray-dark;
 
 .root {
   position: relative;
+  left: 16px;
   :global(.spinner) {
     position: absolute;
     top: 3px;
@@ -37,7 +38,7 @@ input[type="text"].searchBox {
   padding-left: 36px;
   padding-right: 30px;
   cursor: pointer;
-  width: 152px;
+  width: 192px;
   &:focus, &:hover {
     background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="2 2 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="path-1" cx="8" cy="8" r="6"></circle><mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white"><use xlink:href="%23path-1"></use></mask></defs><use id="Oval-32" stroke="%230056B8" mask="url(%23mask-2)" stroke-width="2" fill="%23FFFFFF" fill-rule="evenodd" xlink:href="%23path-1"></use><path d="M12,12 L15.5,15.5" id="Line" stroke="%230056B8" stroke-width="1" stroke-linecap="round" fill="none"></path></svg>');
   }

src/components/WizardVms/WizardVms.js

@@ -221,7 +221,9 @@ class WizardVms extends Component {
   renderFilteredItems() {
     if (this.state.filteredData && this.state.filteredData.length) {
       let instances = this.state.filteredData.map((item, index) =>
-        <div className="item" key={"vm_" + index} onClick={(e) => this.checkVm(e, item)}>
+        <div className={'item ' + (this.isSelected(item) ? 'selected' : '')}
+          key={"vm_" + index} onClick={(e) => this.checkVm(e, item)}
+        >
           <div className="checkbox-container">
             <input
               id={"vm_check_" + index}
@@ -279,6 +281,11 @@ class WizardVms extends Component {
       <div className={s.root}>
         <div className={s.container}>
           <div className={s.topFilters}>
+            <div className={s.selectionCount +
+              (!(this.state.filteredData && this.state.filteredData.length) ? " hidden" : " ")}
+            >
+              {this.instancesSelected()} instances selected
+            </div>
             <SearchBox
               placeholder="Search VMs"
               isLoading={this.state.loadingState === loadingStates.QUERY}
@@ -294,11 +301,6 @@ class WizardVms extends Component {
           <div className="items-list instances">
             {this.renderSearch()}
           </div>
-          <div className={s.selectionCount +
-            (!(this.state.filteredData && this.state.filteredData.length) ? " hidden" : " ")}
-          >
-            {this.instancesSelected()} instances selected
-          </div>
           <div className={s.pagination +
             (!(this.state.filteredData && this.state.filteredData.length) ? " hidden" : " ")}
           >

src/components/WizardVms/WizardVms.scss

@@ -34,13 +34,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :global(.item) {
       position: relative;
       cursor: pointer;
-      padding-left: 0;
+      padding-left: 16px;
+      padding-right: 0;
       width: 100%;
       span:nth-child(2) {
         flex: 2;
       }
       span:nth-child(3) {
-        justify-content: center;
+        justify-content: flex-end;
+        padding-right: 8px;
       }
       span:nth-child(4) {
         flex: 2;
@@ -49,6 +51,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         position: absolute;
         left: -32px;
         top: 24px;
+        opacity: 0;
+        transition: opacity $animation-swift-out;
+      }
+      &:hover, &:global(.selected) {
+        :global(.checkbox-container) {
+          opacity: 1;
+        }
       }
     }
   }
@@ -59,6 +68,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       content: " ";
       height: 0;
     }
+    :global(.category-filter) {
+      position: relative;
+      left: 10px;
+      top: 5px;
+    }
   }
 }
 
@@ -66,7 +80,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   font-size: 14px;
   color: $gray-dark;
   float: left;
-  margin-top: 22px;
+  position: relative;
+  top: 6px;
 }
 .pagination {
   font-size: 14px;