Update styles of help message and progress bar

app/assets/javascripts/issuable_time_tracker.js.es6

@@ -140,11 +140,11 @@
                   <div :style='{ width: diffPercent }' class='meter-fill'></div>
                 </div>
                 <div class='compare-display-container'>
-                  <div class='compare-display pull-left'>
+                  <div class='compare-display'>
                     <span class='compare-label'>Spent</span>
                     <span class='compare-value spent'>{{ spentPretty }}</span>
                   </div>
-                  <div class='compare-display estimated pull-right'>
+                  <div class='compare-display estimated'>
                     <span class='compare-label'>Est</span>
                     <span class='compare-value'>{{ estimatedPretty }}</span>
                   </div>

app/assets/stylesheets/framework/variables.scss

@@ -5,7 +5,7 @@ $sidebar_collapsed_width: 62px;
 $sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
-$gutter_inner_width: 258px;
+$gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 

app/assets/stylesheets/pages/issuable.scss

@@ -408,63 +408,81 @@
   }
 }
 
-#issuable-time-tracker {
+.time_tracker {
+  padding-bottom: 0;
+  border-bottom: 0;
+
   > .stopwatch-svg {
     display: none;
   }
 
-  .time-tracking-help-state {
-    padding: 10px 0;
-    margin-top: 10px;
-    border-top: 1px solid #dcdcdc;
-  }
-
-  .meter-container {
-    background: $gray-lighter;
-    border-radius: 2px;
-  }
-
-  .meter-fill {
-    max-width: 100%;
-    height: 4px;
-    background: $gl-text-green;
+  .sidebar-collapsed-icon {
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: #999;
+    }
   }
 
   .help-button, .close-help-button {
     cursor: pointer;
   }
-  .over_estimate {
-    .meter-fill {
-      background: $red-light ;
-    }
-    .time-remaining, .compare-value.spent {
-      color: $red-light ;
+
+  .compare-meter {
+    &.within_estimate {
+      .meter-fill {
+        background: $gl-primary;
+      }
     }
-  }
 
-  .sidebar-collapsed-icon {
-    svg {
-      width: 16px;
-      height: 16px;
-      fill: #999;
+    &.over_estimate {
+      .meter-fill {
+        background: $red-light ;
+      }
+
+      .time-remaining, .compare-value.spent {
+        color: $red-light ;
+      }
     }
   }
 
-  .within_estimate {
+  .meter-container {
+    background: $border-gray-light;
+    border-radius: 3px;
+
     .meter-fill {
-      background: $gl-text-green;
+      max-width: 100%;
+      height: 5px;
+      border-radius: 3px;
+      background: $gl-primary;
     }
   }
+
   .compare-display-container {
-    height: 10px;
+    display: flex;
+    justify-content: space-between;
     margin-top: 5px;
-  }
-  .compare-display {
-    font-size: 13px;
-    color: $gl-gray-light;
 
-    .compare-value {
-      color: $gl-gray;
+    .compare-display {
+      font-size: 13px;
+      color: $gl-gray-light;
+
+      .compare-value {
+        color: $gl-gray;
+      }
     }
   }
+
+  .time-tracking-help-state {
+    transition: all 1s ease-in-out;
+    background: $white-light;
+    margin: 16px -20px 0;
+    padding: 16px 20px;
+    border-top: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-light;
+
+    a:hover {
+      color: $btn-white-active;
+    }
+  }  
 }

app/views/shared/issuable/_sidebar.html.haml

@@ -73,7 +73,7 @@
           = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
       - if issuable.has_attribute?(:time_estimate)
-        #issuable-time-tracker.block
+        #issuable-time-tracker.block.time_tracker
           %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent' }
             // Fallback while content is loading
             .title.hide-collapsed