- Adds style to pagination on instance list

- Updates vm icon
- Fixes modal header being overlapped by general site header

src/components/App/App.scss

@@ -585,7 +585,7 @@ button {
       height: 48px;
     }
     &.vm {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTIiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0YxRjRGOSIgZmlsbC1ydWxlPSJldmVub2RkIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4Ij48L3JlY3Q+PGcgaWQ9IkNlbnRPUyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4wMDAwMDAsIDguMDAwMDAwKSI+PHBvbHlnb24gaWQ9IlBhZ2UtMSIgc3Ryb2tlPSIjMDA1NkI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iMTYgMiAzLjUxMDcxNDY3IDguNzg4MDA3MjYgMy41IDIzLjIwNTMxNDggMTYuNDc3NjE0OSAzMC40OTkwODkgMjguNSAyMy4yMDUzMTQ4IDI4LjUgOC43ODIyNDAzNCI+PC9wb2x5Z29uPjxwb2x5bGluZSBpZD0iUGFnZS0xLUNvcHkiIHN0cm9rZT0iIzAwNTZCOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBwb2ludHM9IjQgOS4wMjYzOTcwNSAxNi41NzUyODU3IDE2IDI4LjUgOSI+PC9wb2x5bGluZT48cGF0aCBkPSJNMTYuNDg3NTU3MywxNiBMMTYuNDg3NTU3MywzMCIgaWQ9IkxpbmUiIHN0cm9rZT0iIzAwNTZCOCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+PC9wYXRoPjwvZz48L3N2Zz4=');
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ4IDQ4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OCA0ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0Q5RENFMzt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiMwMDQ0Q0I7fQ0KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojMDA0NENCO3N0cm9rZS1saW5lY2FwOnNxdWFyZTt9DQo8L3N0eWxlPg0KPHBhdGggaWQ9IlJlY3RhbmdsZS1Db3B5LTIiIGNsYXNzPSJzdDAiIGQ9Ik04LDBoMzJjNC40LDAsOCwzLjYsOCw4djMyYzAsNC40LTMuNiw4LTgsOEg4Yy00LjQsMC04LTMuNi04LThWOEMwLDMuNiwzLjYsMCw4LDB6Ii8+DQo8cGF0aCBpZD0iUGFnZS0xIiBjbGFzcz0ic3QxIiBkPSJNMjQsMTAuNmwtMTEuNSw2Ljd2MTMuNEwyNCwzNy40bDExLjUtNi43VjE3LjNMMjQsMTAuNnoiLz4NCjxwYXRoIGlkPSJQYWdlLTEtQ29weSIgY2xhc3M9InN0MSIgZD0iTTEyLjUsMTcuNnYwLjJMMjQsMjMuOWwxMS41LTYuMnYtMC4yIi8+DQo8cGF0aCBpZD0iTGluZSIgY2xhc3M9InN0MiIgZD0iTTI0LDI0djEzIi8+DQo8L3N2Zz4NCg==');
       width: 48px;
       height: 48px;
     }

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -127,7 +127,7 @@ class CloudConnectionsView extends Component {
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "3%",
+        top: "70px",
         marginLeft: "-288px"
       }
     }

src/components/CloudConnectionsView/CloudConnectionsView.scss

@@ -113,4 +113,5 @@ $connectionHeaderBg: #D9DCE3;
   padding-top: 8px;
   float: left;
   width: 800px;
+  padding-bottom: 32px;
 }

src/components/CloudItem/CloudItem.js

@@ -142,7 +142,7 @@ class CloudItem extends Component {
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "20%",
+        top: "70px",
         marginLeft: "-288px"
       }
     }

src/components/ConnectionsList/ConnectionsList.js

@@ -236,7 +236,7 @@ class ConnectionsList extends Reflux.Component {
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "3%",
+        top: "70px",
         marginLeft: "-288px"
       }
     }

src/components/Header/Header.js

@@ -81,7 +81,7 @@ class Header extends Component {
             <div className="logo coriolis-white"></div>
           </Link>
           <div className={s.banner}>
-            <h1 className={s.bannerTitle}>{this.props.title}</h1>
+            {/*<h1 className={s.bannerTitle}>{this.props.title}</h1>*/}
           </div>
           <div className={s.userIcon}>
             <UserIcon dark={true} />

src/components/MainList/MainList.js

@@ -193,7 +193,7 @@ class MainList extends Reflux.Component {
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "20%",
+        top: "70px",
         marginLeft: "-288px"
       }
     }

src/components/MigrationDetail/MigrationDetail.scss

@@ -21,7 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   :global(.arrow) {
     width: 64px;
     height: 32px;
-    margin-top: 52px;
+    margin-top: 60px;
     margin-left: 70px;
     position: absolute;
   }

src/components/WizardVms/WizardVms.js

@@ -261,9 +261,15 @@ class WizardVms extends Component {
             {this.instancesSelected()} VMs selected
           </div>
           <div className={s.pagination}>
-            {this.state.page > 0 && (<span onClick={(e) => this.previousPage(e)}>Back</span>)}
-            <span className={s.currentPage}>Page: {this.state.page + 1}</span>
-            {this.state.filteredData && (itemsPerPage == this.state.filteredData.length && (<span onClick={(e) => this.nextPage(e)}>Next</span>))}
+            <span
+              className={(this.state.page == 0 ? "disabled " : "")+ s.prev}
+              onClick={(e) => this.previousPage(e)}
+            ></span>
+            <span className={s.currentPage}>{this.state.page + 1}</span>
+            <span
+              className={(this.state.filteredData && this.state.filteredData.length ? "disabled " : "") + s.next}
+              onClick={(e) => this.nextPage(e)}
+            ></span>
           </div>
         </div>
       </div>

src/components/WizardVms/WizardVms.scss

@@ -55,21 +55,62 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   font-size: 14px;
   color: $gray-dark;
   letter-spacing: -0.41px;
-  float: right;
-  margin-top: 8px;
+  float: left;
+  margin-top: 22px;
 }
 .pagination {
   font-size: 14px;
   color: $gray-dark;
   letter-spacing: -0.41px;
-  float: left;
-  margin-top: 8px;
+  border: 1px solid $gray;
+  border-radius: $border-radius;
+  width: 98px;
+  margin: 16px auto 0;
+  .prev {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPg0KICAgICAgICA8ZyBpZD0iUGFnaW5hdGlvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyLjAwMDAwMCwgLTEwLjAwMDAwMCkiIHN0cm9rZT0iIzdGODc5NSI+DQogICAgICAgICAgICA8ZyBpZD0iQ2hldnJvbi1HcmV5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4wMDAwMDAsIDE2LjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTE2LjAwMDAwMCwgLTE2LjAwMDAwMCkgdHJhbnNsYXRlKDguMDAwMDAwLCA4LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUmVjdGFuZ2xlLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMDAwMDAwLCA1LjUwMDAwMCkgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTguMDAwMDAwLCAtNS41MDAwMDApICIgcG9pbnRzPSIxMS44ODkwODczIDEuNjEwOTEyNyAxMS44ODkwODczIDkuMzg5MDg3MyA0LjExMDkxMjcgOS4zODkwODczIj48L3BvbHlsaW5lPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
+    background-position: center center;
+    background-repeat: no-repeat;
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+    float: left;
+    &:global(.disabled) {
+      opacity: 0.3;
+      cursor: default;
+    }
+  }
+  .next {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPg0KICAgICAgICA8ZyBpZD0iUGFnaW5hdGlvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3NC4wMDAwMDAsIC0xMC4wMDAwMDApIiBzdHJva2U9IiM3Rjg3OTUiPg0KICAgICAgICAgICAgPGcgaWQ9IkNoZXZyb24tR3JleSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTc3LjAwMDAwMCwgMTYuMDAwMDAwKSByb3RhdGUoLTkwLjAwMDAwMCkgdHJhbnNsYXRlKC0xNzcuMDAwMDAwLCAtMTYuMDAwMDAwKSB0cmFuc2xhdGUoMTY5LjAwMDAwMCwgOC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlJlY3RhbmdsZS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4LjAwMDAwMCwgNS41MDAwMDApIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC04LjAwMDAwMCwgLTUuNTAwMDAwKSAiIHBvaW50cz0iMTEuODg5MDg3MyAxLjYxMDkxMjcgMTEuODg5MDg3MyA5LjM4OTA4NzMgNC4xMTA5MTI3IDkuMzg5MDg3MyI+PC9wb2x5bGluZT4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
+    background-position: center center;
+    background-repeat: no-repeat;
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+    float: left;
+    &:global(.disabled) {
+      opacity: 0.3;
+      cursor: default;
+    }
+  }
   span {
-    margin-right: 5px;
     cursor: pointer;
   }
   .currentPage {
     font-weight: 500;
     cursor: default;
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+    float: left;
+    text-align: center;
+    line-height: 32px;
+    border-left: 1px solid $gray;
+    border-right: 1px solid $gray;
+  }
+  &:after {
+    display: block;
+    clear: both;
+    height: 0;
+    content: " ";
   }
 }