Fix collapsed icon display and other scss.

app/assets/javascripts/issuable_time_tracker.js.es6

 //= require vue
-//= lib/utils/pretty_time
+//= require lib/utils/pretty_time
 
 (() => {
   const PrettyTime = gl.PrettyTime;
@@ -77,7 +77,7 @@
       }
     },
     template: `
-        <div class='time-tracking-component-wrap' v-cloak>
+        <div class='time_tracker time-tracking-component-wrap' v-cloak>
           <div class='sidebar-collapsed-icon'>
             <slot name='stopwatch'></slot>
             <div class='time-tracking-collapsed-summary'>

app/assets/stylesheets/framework/variables.scss

@@ -92,6 +92,7 @@ $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
 $widget-expand-item: #e8f2f7;
 $widget-inner-border: #eef0f2;
+$sidebar-collapsed-icon-color: #999;
 
 /*
  * Text

app/assets/stylesheets/pages/issuable.scss

@@ -233,7 +233,7 @@
       width: 100%;
       text-align: center;
       padding-bottom: 10px;
-      color: #999;
+      color: $sidebar-collapsed-icon-color;
 
       span {
         display: block;
@@ -252,7 +252,7 @@
         }
 
         i {
-          color: #999;
+          color: $sidebar-collapsed-icon-color;
         }
       }
     }
@@ -412,15 +412,17 @@
   padding-bottom: 0;
   border-bottom: 0;
 
+
+  .sidebar-collapsed-icon {
+
     > .stopwatch-svg {
-    display: none;
+      display: inline-block;
     }
 
-  .sidebar-collapsed-icon {
     svg {
       width: 16px;
       height: 16px;
-      fill: #999;
+      fill: $sidebar-collapsed-icon-color;
     }
   }
 

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

@@ -73,15 +73,15 @@
           = 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.time_tracker
+        #issuable-time-tracker.block
           %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
               Time tracking
               = icon('spinner spin')
             // TODO: Remove this when we have webpack/svg solution implemented
-            .hide
             .stopwatch-svg{ slot:'stopwatch' }
+              %span.hide
                 = custom_icon('icon_stopwatch')
       - if issuable.has_attribute?(:due_date)
         .block.due_date