- Tasks component updated to new design

src/components/App/App.scss

@@ -141,10 +141,10 @@ button {
   }
 
   &:global(.gray) {
-    background-color: $gray;
-    border-color: $gray;
+    background-color: $task-gray-light;
+    border-color: $task-gray-light;
     &:hover {
-      background-color: $gray-dark;
+      background-color: $gray;
     }
     &:disabled:hover {
       background-color: $gray;
@@ -160,6 +160,14 @@ button {
     &:hover {
       opacity: 0.75;
     }
+    &:global(.grey) {
+      border-color: $gray;
+      color: $black;
+    }
+    &:global(.red) {
+      border-color: $red;
+      color: $red;
+    }
   }
 }
 :global {

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -41,6 +41,7 @@ class ReplicaExecutions extends Component {
 
     this.state = {
       currentExecution: null,
+      executionRef: null,
       tasks: null
     }
   }
@@ -67,6 +68,7 @@ class ReplicaExecutions extends Component {
           label: `${execution.number} - ${moment(execution.created_at).format("MMM Do YYYY HH:mm")} - ${execution.status}`,
           value: execution.id
         },
+        executionRef: execution,
         tasks: execution.tasks
       })
     }
@@ -76,6 +78,7 @@ class ReplicaExecutions extends Component {
     let execution = this.props.migration.executions.filter(execution => execution.id == option.value)[0]
     this.setState({
       currentExecution: option,
+      executionRef: execution,
       tasks: execution.tasks
     })
   }
@@ -118,10 +121,10 @@ class ReplicaExecutions extends Component {
 
   render() {
     if (this.props.migration) {
-      let executionBtn = <button onClick={(e) => this.executeNow(e)}>Execute Now</button>
+      let executionBtn = <button className="red wire" onClick={(e) => this.executeNow(e)}>Delete execution</button>
       if (this.props.migration.executions &&
         this.props.migration.executions[this.props.migration.executions.length - 1].status == "RUNNING") {
-        executionBtn = <button className="gray" onClick={(e) => this.cancelExecution(e)}>Cancel execution</button>
+        executionBtn = <button className="gray wire" onClick={(e) => this.cancelExecution(e)}>Cancel execution</button>
       }
 
       let executionsSorted = this.props.migration.executions
@@ -137,16 +140,24 @@ class ReplicaExecutions extends Component {
       return (
         <div className={s.root}>
           <div className={s.container}>
+            <Dropdown
+              options={executions}
+              onChange={(e) => this.changeExecution(e)}
+              placeholder="Select execution"
+              value={this.state ? this.state.currentExecution : null}
+              className={s.changeExecutionBtn}
+            />
             <div className={s.executionsWrapper}>
-
-              <Dropdown
-                options={executions}
-                onChange={(e) => this.changeExecution(e)}
-                placeholder="Select execution"
-                value={this.state ? this.state.currentExecution : null}
-                className={s.changeExecutionBtn}
-              />
-              {executionBtn}
+              <div className={s.leftSide}>
+                <h4>Execution #{this.state.executionRef && this.state.executionRef.number}</h4>
+                <span className={s.date}>
+                  {this.state.executionRef && moment(this.state.executionRef.created_at).format("MMM Do YYYY HH:mm")}
+                </span>
+                <span className={"status-pill " + this.props.migration.status}>{this.props.migration.status}</span>
+              </div>
+              <div className={s.rightSide}>
+                {executionBtn}
+              </div>
             </div>
             <Tasks tasks={this.state.tasks}/>
           </div>

src/components/ReplicaExecutions/ReplicaExecutions.scss

@@ -33,15 +33,50 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       &:nth-child(4) {width: 20%;}
     }
   }
+  :global(.Dropdown-root) {
+    margin-bottom: 16px;
+  }
   .executionsWrapper {
-    margin-bottom: 24px;
-    :global(.Dropdown-root) {
-      float: left;
-      width: 40%;
+    background-color: $gray-light;
+    padding: 16px;
+
+    &:after {
+      clear: both;
+      display: block;
+      height: 0;
+      content: " ";
     }
-    button{
+    .rightSide {
       float: right;
-      margin-left: 16px;
+    }
+    .leftSide {
+      float: left;
+      h4 {
+        margin: 0;
+        font-weight: 300;
+        font-size: 18px;
+        color: $black;
+        float: left;
+      }
+      .date {
+        font-size: 14px;
+        color: $gray-dark;
+        float: left;
+        letter-spacing: 0;
+        margin-left: 16px;
+        margin-top: 4px;
+      }
+      :global(.status-pill) {
+        float: left;
+        margin-left: 24px;
+        margin-top: 3px;
+      }
+      &:after {
+        clear: both;
+        display: block;
+        height: 0;
+        content: " ";
+      }
     }
     &:after {
       clear: both;
@@ -49,6 +84,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       height: 0;
       content: " ";
     }
+    button {
+
+    }
   }
 }
 

src/components/Tasks/Tasks.scss

@@ -25,6 +25,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   margin: 0 auto;
   padding: 0 0 40px;
   max-width: $max-content-width;
+
   :global(.row), :global(.headerItems) {
     :global(.cell) {
       &:nth-child(1) {
@@ -36,10 +37,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
     transition: background $animation-swift-out;
   }
+  .table {
+    background-color: $gray-light;
+    :global(.headerItems) {
+      border-bottom: 1px solid $task-gray-light;
+      padding: 0 0 0 8px;
+      :global(.cell) {
+        height: 32px;
+        line-height: 32px;
+        color: $task-gray-light;
+      }
+    }
+  }
   :global(.row) {
     cursor: pointer;
+    border-bottom: 1px solid #FFF !important;
     &:hover {
-      background-color: $gray-light;
+      background-color: $task-gray;
     }
   }
   :global(.taskIcon) {
@@ -49,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     float: left;
     margin: 1px 8px 0 8px;
     &:global(.COMPLETED) {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPjxtYXNrIGlkPSJtYXNrLTIiIG1hc2tDb250ZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPjwvbWFzaz48L2RlZnM+PGcgaWQ9Ikdyb3VwLTMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGlkPSJHcm91cC0yIj48dXNlIGlkPSJPdmFsLTIiIHN0cm9rZT0iIzAwNTZCOCIgbWFzaz0idXJsKCNtYXNrLTIpIiBzdHJva2Utd2lkdGg9IjMuMDQ3NjE5MDUiIGZpbGw9IiMwMDU2QjgiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPjxwb2x5bGluZSBpZD0iU3Ryb2tlLTMiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iMTIgNiA3LjA4MzA3NDE5IDExIDQgOC4wMDM5NzU0MiI+PC9wb2x5bGluZT48L2c+PC9nPjwvc3ZnPg==');
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1PayI+DQogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTIiIGZpbGw9IiM0Q0Q5NjQiIGN4PSI4IiBjeT0iOCIgcj0iOCI+PC9jaXJjbGU+DQogICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlN0cm9rZS0zIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcG9pbnRzPSIxMiA2IDcuMDgzMDc0MTkgMTEgNCA4LjAwMzk3NTQyIj48L3BvbHlsaW5lPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
     }
     &:global(.RUNNING) {
       background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9Ikdyb3VwLTciIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgaWQ9Ik92YWwtMi1Db3B5IiBmaWxsPSIjQTRBQUI1IiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0xNiw4IEMxNiwzLjU4MTcyMiAxMi40MTgyNzgsMCA4LDAgTDgsOCBMMTYsOCBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiMwMDU2QjgiPjwvcGF0aD48Y2lyY2xlIGlkPSJPdmFsLTItQ29weSIgZmlsbD0iI0ZGRkZGRiIgY3g9IjgiIGN5PSI4IiByPSI2Ij48L2NpcmNsZT48L2c+PC9zdmc+');
@@ -70,8 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
   }
   :global(.row.isOpen) {
-    background-color: $gray-light;
-
+    background-color: $task-gray;
   }
   .taskDetails {
     padding: 20px 32px 4px;

src/components/variables.scss

@@ -16,6 +16,9 @@ $green:                 #34C555;
 
 $color-replica:         #E62565;
 $color-migration:       $blue;
+
+$task-gray-light: #7F8795;
+$task-gray: #D9DCE3;
 /*
  * Typography
  * ========================================================================== */
@@ -29,6 +32,7 @@ $weight-semibold: 500;
 $weight-medium: 600;
 
 
+
 $header-text-color: $blue;
 /*
  * Layout