From 8f1c88e35d44b42460cd9b941fbbcb65412d355e Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Thu, 18 Feb 2016 12:26:19 -0800
Subject: [PATCH 1/4] adding less file

---
 awx/ui/client/src/job-detail/job-detail.block.less | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 awx/ui/client/src/job-detail/job-detail.block.less

diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less
new file mode 100644
index 0000000000..0e7ca9f79d
--- /dev/null
+++ b/awx/ui/client/src/job-detail/job-detail.block.less
@@ -0,0 +1,8 @@
+/** @define SetupItem */
+
+@import '../shared/branding/colors.less';
+@import '../shared/branding/colors.default.less';
+
+.JobDetail-results{
+    background-color: #848992;
+}

From 95467a6b974a399960cf2bd80b523cca63b0b593 Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Thu, 18 Feb 2016 19:38:49 -0800
Subject: [PATCH 2/4] Restyling of job detail results panel

---
 .../src/job-detail/job-detail.block.less      |  56 +++++++-
 .../src/job-detail/job-detail.controller.js   |   4 +-
 .../src/job-detail/job-detail.partial.html    | 133 +++++++++---------
 3 files changed, 120 insertions(+), 73 deletions(-)

diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less
index 0e7ca9f79d..e4aa02d308 100644
--- a/awx/ui/client/src/job-detail/job-detail.block.less
+++ b/awx/ui/client/src/job-detail/job-detail.block.less
@@ -3,6 +3,58 @@
 @import '../shared/branding/colors.less';
 @import '../shared/branding/colors.default.less';
 
-.JobDetail-results{
-    background-color: #848992;
+.JobDetail-panelHeader{
+    height: 50px;
+    display: flex;
+}
+
+.JobDetail-panelHeaderText{
+    color: #848992;
+    flex: 1 0 auto;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 10px;
+    text-transform: uppercase;
+}
+
+.JobDetail-panelHeaderText:hover{
+    color: #848992;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 10px;
+    text-transform: uppercase;
+}
+
+.JobDetail-expandArrow{
+    color: #848992;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 10px;
+    text-transform: uppercase;
+    margin-left: 5px;
+}
+
+.JobDetail-resultsDetails{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.JobDetail-resultRow{
+    flex: 1 0 auto;
+    width: 50%;
+    display: flex;
+}
+
+.JobDetail-resultRow label{
+    color: #848992;
+    font-size: 14px;
+    font-weight: normal!important;
+    // width: 40%;
+    flex: 1 0 auto;
+}
+
+.JobDetail-resultRowText{
+    width: 40%;
+    flex: 1 0 auto;
 }
diff --git a/awx/ui/client/src/job-detail/job-detail.controller.js b/awx/ui/client/src/job-detail/job-detail.controller.js
index 604179d622..6432e68849 100644
--- a/awx/ui/client/src/job-detail/job-detail.controller.js
+++ b/awx/ui/client/src/job-detail/job-detail.controller.js
@@ -200,7 +200,7 @@ export default
 
             scope.haltEventQueue = false;
             scope.processing = false;
-            scope.lessStatus = true;
+            scope.lessStatus = false;
 
             scope.host_summary = {};
             scope.host_summary.ok = 0;
@@ -854,7 +854,7 @@ export default
                     $('#job-summary-container').show();
                 }
 
-                scope.lessStatus = true; // close the view more status option
+                scope.lessStatus = false; // close the view more status option
 
                 // Detail table height adjusting. First, put page height back to 'normal'.
                 $('#plays-table-detail').height(80);
diff --git a/awx/ui/client/src/job-detail/job-detail.partial.html b/awx/ui/client/src/job-detail/job-detail.partial.html
index e4aba4ec3b..fc174f182b 100644
--- a/awx/ui/client/src/job-detail/job-detail.partial.html
+++ b/awx/ui/client/src/job-detail/job-detail.partial.html
@@ -1,29 +1,25 @@
 <div class="tab-pane" id="jobs-detail">
     <div ng-cloak id="htmlTemplate">
-
         <div class="row" style="position: relative;">
             <div id="job-detail-container">
-                <div class="job_well">
-                    <div class="row">
-                        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Status</label>
-                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-5 job_status"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status_label }}</div>
-
-                        <div class="col-lg-4 text-right JobDetails-status">
-                            <a href="" id="play-help" aw-pop-over="Live event processing is now paused. Click here to resume." id="play-button-help" data-placement="left" ng-show="pauseLiveEvents" ><i class="fa fa-question"></i></a>
-                            <a href="" ng-click="togglePlayButton()" id="play-button" class="btn btn-primary btn-xs" aw-tool-tip="Resume viewing live events" data-placement="top" ng-show="pauseLiveEvents" style="margin-right:25px;"><i class="fa fa-play"></i></a>
-                            <a href="/#/jobs/{{ job_id }}/stdout" id="view-stdout-button" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-external-link"></i></a>
-                            <button type="button" class="btn btn-xs btn-primary ng-hide" ng-click="refresh()" id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" ng-show="socketStatus == 'error'"
-                                data-original-title="" title=""><i class="fa fa-refresh"></i></button>
-                            <a href="" ng-click="deleteJob()" id="cancel-job-button" ng-show="job_status.status == 'running' || job_status.status=='pending' " type="button" class="btn btn-primary btn-xs" aw-tool-tip="Cancel" data-placement="top"><i class="fa fa-minus-circle"></i></a>
-                            <a href="" ng-click="deleteJob()" id="delete-job-button" ng-hide="job_status.status == 'running' || job_status.status == 'pending' " type="button" class="btn btn-primary btn-xs" aw-tool-tip="Delete" data-placement="top"><i class="fa fa-trash-o"></i></a>
-                            <a href="" ng-click="relaunchJob()" id="relaunch-job-button" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Relaunch using the same parameters" data-placement="top"><i class="fa fa-rocket"></i></a>
-                            <button type="button" id="summary-button" class="btn btn-primary btn-xs" ng-click="toggleSummary()" aw-tool-tip="View summary" data-placement="top"><i class="fa fa-arrow-circle-left"></i></button>
-                        </div>
+                <div class="JobDetail-resultsContainer Panel">
+                    <div class="JobDetail-panelHeader">
+                        <a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
+                            RESULTS<i class="JobDetail-expandArrow fa fa-angle-left"></i>
+                        </a>
+                        <a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
+                            RESULTS<i class="JobDetail-expandArrow fa fa-angle-down"></i>
+                        </a>
+                        <button id="submit-action" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Start a job using this template" data-original-title="" title=""><i class="fa fa-rocket"></i> </button>
+                        <button id="delete-action" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJobTemplate(job_template.id, job_template.name)" aw-tool-tip="Delete template" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>
                     </div>
 
-                    <div class="form-horizontal" role="form" id="job-status-form">
-
-                        <div class="form-group" ng-show="job_status.explanation">
+                    <div class="form-horizontal JobDetail-resultsDetails" role="form" id="job-status-form">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
+                            <div class="JobDetail-resultRowText"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status_label }}</div>
+                        </div>
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.explanation">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 col-xs-12">Explanation</label>
                             <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9  job_status_explanation"
                             ng-show="!previousTaskFailed" ng-bind-html="job_status.explanation"></div>
@@ -44,117 +40,116 @@
                             </div>
                         </div>
 
-                        <div class="form-group" ng-show="job_status.traceback">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.traceback">
                             <label class="col-lg-2 col-md-12 col-sm-12 col-xs-12">Results Traceback</label>
-                            <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12  job_status_traceback" ng-bind-html="job_status.traceback"></div>
+                            <div class="JobDetail-resultRowText col-lg-10 col-md-12 col-sm-12 col-xs-12  job_status_traceback" ng-bind-html="job_status.traceback"></div>
                         </div>
 
-                        <div class="form-group" ng-show="job_status.started">
-                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Timing</label>
-                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
-                                <div ng-show="job_status.started" id="started-time">Started &nbsp;{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
-                                <div ng-show="job_status.finished" id="finished-time">Finished &nbsp;{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</div>
-                                <div ng-show="job_status.finished" id="elapsed-time">Elapsed &nbsp;{{ job_status.elapsed }}</div>
-                            </div>
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Started</label>
+                            <div class="JobDetail-resultRowText">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="job_template_name">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Finished</label>
+                            <div class="JobDetail-resultRowText">{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</div>
+                        </div>
+
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_status.started">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Elapsed</label>
+                            <div class="JobDetail-resultRowText">{{ job_status.elapsed }}</div>
+                        </div>
+
+
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_template_name">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="job_type">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job_type">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Type</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job_type }}</div>
+                            <div class="JobDetail-resultRowText">{{ job_type }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="created_by">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="created_by">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Launched By</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <a href="{{ users_url }}" aw-tool-tip="Edit the User" data-placement="top">{{ created_by }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="scheduled_by">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="scheduled_by">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Launched By</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <a href aw-tool-tip="Edit the Schedule" data-placement="top" ng-click="editSchedule()">{{scheduled_by}}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="inventory_name">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="inventory_name">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="project_name">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="project_name">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="job.playbook">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job.playbook">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Playbook</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.playbook }}</div>
+                            <div class="JobDetail-resultRowText">{{ job.playbook }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="credential_name">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="credential_name">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Machine Credential</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText JobDetail-resultRowText">
                                 <a href="{{ credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ credential_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="cloud_credential_name">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="cloud_credential_name">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Cloud Credential</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <a href="{{ cloud_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ cloud_credential_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="job.forks">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="job.forks">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Forks</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.forks }}</div>
+                            <div class="JobDetail-resultRowText">{{ job.forks }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="job.limit">
+                        <div class="form-group JobDetail-resultRow toggle-show"  ng-show="job.limit">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Limit</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.limit }}</div>
+                            <div class="JobDetail-resultRowText">{{ job.limit }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="verbosity">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="verbosity">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Verbosity</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ verbosity }}</div>
+                            <div class="JobDetail-resultRowText">{{ verbosity }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="job.job_tags">
+                        <div class="form-group JobDetail-resultRow toggle-show"  ng-show="job.job_tags">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Tags</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.job_tags }}</div>
+                            <div class="JobDetail-resultRowText">{{ job.job_tags }}</div>
                         </div>
 
-                        <div class="form-group toggle-show" style="display:none;" ng-show="variables">
+                        <div class="form-group JobDetail-resultRow toggle-show" ng-show="variables">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Extra Variables</label>
-                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                            <div class="JobDetail-resultRowText">
                                 <div id="pre-formatted-variables">{{ variables }}</div>
                                 <!-- <pre>{{ variables }}</pre> -->
                             </div>
                         </div>
-
-                        <div class="row">
-                            <div class="col-sm-12 more-or-less">
-                                <a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more <i class="fa fa-angle-down"></i></a>
-                                <a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
-                            </div>
-                        </div>
-
-                        <hr>
-
                     </div>
+                </div>
+                <!--- JobDetail-results---------------------------------------------->
 
                     <div id="job-detail-tables">
                         <div id="play-section" class="section">
@@ -378,11 +373,11 @@
                         </div><!-- section -->
                     </div><!-- job-detail-tables -->
 
-                </div><!-- well -->
+
 
             </div><!-- job-detail-container -->
 
-            <div id="job-summary-container">
+            <!-- <div id="job-summary-container"> -->
                 <div class="job_well">
                     <div id="summary-well-top-section">
                         <div id="hide-summary-button" style="display: hidden;">

From 68f619e358770ab1121695d107ce9dc5b94cc1bc Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Fri, 19 Feb 2016 10:23:18 -0800
Subject: [PATCH 3/4] Job Detail Results panel tweaks after UX review

---
 awx/ui/client/legacy-styles/job-details.less         | 2 +-
 awx/ui/client/src/job-detail/job-detail.block.less   | 6 ++----
 awx/ui/client/src/job-detail/job-detail.partial.html | 4 ++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/awx/ui/client/legacy-styles/job-details.less b/awx/ui/client/legacy-styles/job-details.less
index 32c88aae35..621e0267ca 100644
--- a/awx/ui/client/legacy-styles/job-details.less
+++ b/awx/ui/client/legacy-styles/job-details.less
@@ -549,7 +549,7 @@
         word-break: break-all;
         word-wrap: break-word;
         padding: 9.5px;
-        ont-family: Fixed, monospace;
+        font-family: Fixed, monospace;
         max-height: 200px;
     }
 
diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less
index e4aa02d308..101d541985 100644
--- a/awx/ui/client/src/job-detail/job-detail.block.less
+++ b/awx/ui/client/src/job-detail/job-detail.block.less
@@ -26,12 +26,12 @@
 }
 
 .JobDetail-expandArrow{
-    color: #848992;
+    color: #d7d7d7;
     font-size: 14px;
     font-weight: bold;
     margin-right: 10px;
     text-transform: uppercase;
-    margin-left: 5px;
+    margin-left: 10px;
 }
 
 .JobDetail-resultsDetails{
@@ -41,7 +41,6 @@
 }
 
 .JobDetail-resultRow{
-    flex: 1 0 auto;
     width: 50%;
     display: flex;
 }
@@ -50,7 +49,6 @@
     color: #848992;
     font-size: 14px;
     font-weight: normal!important;
-    // width: 40%;
     flex: 1 0 auto;
 }
 
diff --git a/awx/ui/client/src/job-detail/job-detail.partial.html b/awx/ui/client/src/job-detail/job-detail.partial.html
index fc174f182b..a6b06ef6d8 100644
--- a/awx/ui/client/src/job-detail/job-detail.partial.html
+++ b/awx/ui/client/src/job-detail/job-detail.partial.html
@@ -5,10 +5,10 @@
                 <div class="JobDetail-resultsContainer Panel">
                     <div class="JobDetail-panelHeader">
                         <a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
-                            RESULTS<i class="JobDetail-expandArrow fa fa-angle-left"></i>
+                            RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
                         </a>
                         <a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
-                            RESULTS<i class="JobDetail-expandArrow fa fa-angle-down"></i>
+                            RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
                         </a>
                         <button id="submit-action" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Start a job using this template" data-original-title="" title=""><i class="fa fa-rocket"></i> </button>
                         <button id="delete-action" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJobTemplate(job_template.id, job_template.name)" aw-tool-tip="Delete template" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>

From 93719094ea78b1bab747ac26a3abdd70f3535e64 Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Fri, 19 Feb 2016 10:39:17 -0800
Subject: [PATCH 4/4] Using aliases for colors instead of hard coded pigments

---
 awx/ui/client/src/job-detail/job-detail.block.less | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less
index 101d541985..c25f167be1 100644
--- a/awx/ui/client/src/job-detail/job-detail.block.less
+++ b/awx/ui/client/src/job-detail/job-detail.block.less
@@ -9,7 +9,7 @@
 }
 
 .JobDetail-panelHeaderText{
-    color: #848992;
+    color: @default-interface-txt;
     flex: 1 0 auto;
     font-size: 14px;
     font-weight: bold;
@@ -18,7 +18,7 @@
 }
 
 .JobDetail-panelHeaderText:hover{
-    color: #848992;
+    color: @default-interface-txt;
     font-size: 14px;
     font-weight: bold;
     margin-right: 10px;
@@ -26,7 +26,7 @@
 }
 
 .JobDetail-expandArrow{
-    color: #d7d7d7;
+    color: @default-icon-hov;
     font-size: 14px;
     font-weight: bold;
     margin-right: 10px;
@@ -46,7 +46,7 @@
 }
 
 .JobDetail-resultRow label{
-    color: #848992;
+    color: @default-interface-txt;
     font-size: 14px;
     font-weight: normal!important;
     flex: 1 0 auto;