diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 4f1df1be6d..bfabb4c7ed 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -27,12 +27,6 @@ body.modal-open {
margin-right: 0;
}
-
-
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
- border-color: @b7grey;
-}
-
/* Helper Classes */
.pad-right-sm { padding-right: 10px; }
.pad-left-md { padding-left: 30px; }
@@ -607,13 +601,13 @@ dd {
.ui-widget-content a.help-link,
.ui-widget-content a.help-link:active,
.ui-widget-content a.help-link:visited {
- color: @grey;
+ color: @default-icon;
text-decoration: none;
}
.help-link:hover,
.ui-widget-content a.help-link:hover {
- color: @default-icon;
+ color: @default-interface-txt;
text-decoration: none;
}
@@ -2085,8 +2079,8 @@ tr td button i {
}
.form-control {
- border-color: @d7grey;
- background-color: @default-no-items-bord;
+ border-color: @b7grey;
+ background-color: @f2grey;
color: @default-data-txt;
transition: border-color 0.3s;
box-shadow: none;
@@ -2096,7 +2090,7 @@ tr td button i {
.form-control + .select2 .select2-selection {
border-color: @b7grey !important;
- background-color: @default-bg !important;
+ background-color: @f2grey !important;
color: @default-data-txt !important;
transition: border-color 0.3s !important;
box-shadow: none !important;
@@ -2108,7 +2102,7 @@ tr td button i {
}
.form-control + .select2-container--disabled .select2-selection {
- background-color: @egrey !important;
+ background-color: @ebgrey !important;
}
.form-control:active, .form-control:focus {
@@ -2146,7 +2140,7 @@ tr td button i {
.select2-container--disabled,.select2-container--disabled .select2-selection--single,.select2-container--disabled .select2-selection--multiple {
cursor: not-allowed;
opacity: 100;
- background: @egrey;
+ background: @ebgrey;
border-radius: 5px;
}
@@ -2311,7 +2305,7 @@ html input[disabled] {
.select2-container--disabled .select2-selection,
.select2-container--disabled .select2-arrow {
- background: @egrey;
+ background: @ebgrey;
}
.btn.disabled,.btn[disabled],fieldset[disabled] .bt {
@@ -2320,11 +2314,11 @@ html input[disabled] {
.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled {
opacity: 1;
- background: @egrey;
+ background: @ebgrey;
}
input[disabled].ui-spinner-input {
- background-color: @egrey;
+ background-color: @ebgrey;
}
.CodeMirror-scroll {
@@ -2339,3 +2333,17 @@ input[disabled].ui-spinner-input {
.CodeMirror-lines {
margin-bottom: 20px;
}
+
+.btn-default {
+ border-color: @b7grey;
+}
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
+ background-color: @f2grey;
+ border-color: @b7grey;
+ color: @default-interface-txt;
+}
+
+.ui-dialog .ui-dialog-content {
+ background: @default-bg;
+}
diff --git a/awx/ui/client/legacy-styles/codemirror.less b/awx/ui/client/legacy-styles/codemirror.less
index 439291d4a6..68317c844d 100644
--- a/awx/ui/client/legacy-styles/codemirror.less
+++ b/awx/ui/client/legacy-styles/codemirror.less
@@ -43,7 +43,7 @@ textarea[disabled="disabled"] + div[id*="-container"]{
.CodeMirror.cm-s-default,
.CodeMirror-line {
- background-color: @egrey;
+ background-color: @ebgrey;
}
.CodeMirror-gutters {
diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 0c3f397b98..fdde7e18a4 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -17,26 +17,26 @@
not supported by any browser */
}
-.Form{
+.Form {
display:flex;
flex-wrap:wrap;
flex-direction: row;
}
-.Form-header--fields{
+.Form-header--fields {
flex: 1 1 auto;
}
-.Form-header-field{
+.Form-header-field {
margin-left: 10px;
flex: 1 1 auto;
}
-.Form-header{
+.Form-header {
display: flex;
}
-.Form-title{
+.Form-title {
flex: 0 1 auto;
color: @list-header-txt;
font-size: 14px;
@@ -51,7 +51,7 @@
text-transform: uppercase;
}
-.Form-secondaryTitle{
+.Form-secondaryTitle {
color: @default-icon;
padding-bottom: 20px;
min-height: 40px;
@@ -61,7 +61,7 @@
.Form-title--is_superuser,
.Form-title--is_system_auditor,
.Form-title--is_ldap_user,
-.Form-title--is_external_account{
+.Form-title--is_external_account {
height:15px;
color: @default-interface-txt;
background-color: @default-list-header-bg;
@@ -77,12 +77,12 @@
height: 16px;
}
-.Form-exitHolder{
+.Form-exitHolder {
justify-content: flex-end;
display:flex;
}
-.Form-exit{
+.Form-exit {
cursor:pointer;
padding:0px;
border: none;
@@ -94,11 +94,11 @@
line-height:1;
}
-.Form-exit:hover{
+.Form-exit:hover {
color:@default-icon;
}
-.Form-tabHolder{
+.Form-tabHolder {
display: flex;
min-height: 30px;
flex-wrap:wrap;
@@ -156,7 +156,7 @@
}
.Form-tab--disabled {
- opacity: 0.4;
+ opacity: 0.65;
}
.Form-tab--disabled:hover {
@@ -165,12 +165,12 @@
cursor:not-allowed!important;
}
-.Form-tabSection{
+.Form-tabSection {
display: none;
width: 0%;
}
-.Form-tabSection.is-selected{
+.Form-tabSection.is-selected {
width: 100%;
display: block;
}
@@ -200,7 +200,7 @@
.Form-formGroup {
input.form-control {
- background-color: @default-secondary-bg;
+ background-color: @f2grey;
border-color: @b7grey;
border-radius: 5px;
height: 30px;
@@ -247,7 +247,7 @@
left: -20px;
position: absolute;
width: 5px;
- background-color: @default-border;
+ background-color: @b7grey;
height: 100%;
}
@@ -261,7 +261,7 @@
margin-bottom: 10px;
}
-.Form-textAreaLabel{
+.Form-textAreaLabel {
width:100%;
order: 1;
}
@@ -270,7 +270,7 @@
max-width: 100%;
}
-.Form-textArea{
+.Form-textArea {
border-radius: 5px;
color: @field-input-text;
background-color: @field-secondary-bg;
@@ -285,11 +285,11 @@
color: @field-input-text;
}
-.Form-textInput:active{
+.Form-textInput:active {
border:1px solid @field-border-sel;
}
-.Form-monospace{
+.Form-monospace {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace!important;
}
@@ -316,30 +316,30 @@
border: 1px solid @default-link-hov;
}
-.ui-spinner{
+.ui-spinner {
height: 30px;
- background-color: @field-secondary-bg !important;
+ background-color: @f2grey !important;
border-radius: 5px;
border:1px solid @field-border !important;
color: @field-input-text;
width:100%
}
-.ui-spinner-input{
+.ui-spinner-input {
color: @field-input-text;
- background-color: @field-secondary-bg;
+ background-color: @f2grey;
}
-.ui-spinner-input:focus{
+.ui-spinner-input:focus {
outline: none;
}
-.ui-spinner-button{
+.ui-spinner-button {
border-left:1px solid @field-border!important;
background-color: @field-button-bg !important;
}
-.ui-spinner-button:hover{
+.ui-spinner-button:hover {
background-color:@field-button-hov !important;
cursor: pointer!important;
}
@@ -349,7 +349,7 @@
color: @default-data-txt;
}
-.Form-numberInputButton{
+.Form-numberInputButton {
color: @default-icon!important;
font-size: 14px;
@@ -362,36 +362,35 @@
color: @field-input-text!important;
}
-.select2-selection__arrow{
+.select2-selection__arrow {
border-left:1px solid @field-border;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
- background-color: @field-button-bg !important;
width: 30px!important;
height: 28px!important;
}
.select2-container--disabled .select2-selection__arrow {
- background: @egrey !important;
+ background: @ebgrey !important;
}
-.select2-results__option{
+.select2-results__option {
color: @field-label !important;
}
-.select2-container--default .select2-results__option--highlighted[aria-selected]{
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: @field-button-hov !important;
}
-.select2-container--default .select2-results__option[aria-selected=true]{
+.select2-container--default .select2-results__option[aria-selected=true] {
background-color: @default-white-button-bord !important;
}
-.select2-container--default .select2-selection--single .select2-selection__arrow b{
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: @field-dropdown-icon transparent transparent transparent !important;
}
-.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent @field-dropdown-icon transparent!important;
}
@@ -400,7 +399,7 @@
border-bottom-right-radius: 0 !important;
}
-.select2-dropdown{
+.select2-dropdown {
border:1px solid @field-border;
}
@@ -410,33 +409,33 @@
border-top: 1px solid @field-border;
}
-.Form-dropDown:focus{
+.Form-dropDown:focus {
outline: none!important;
}
-.Form-dropDown--scmType{
+.Form-dropDown--scmType {
width: 100%;
}
-.Form-passwordButton{
+.Form-passwordButton {
height: 30px;
- color: @field-lookup-btn-icon!important;
+ color: @default-interface-txt;
text-transform: uppercase;
line-height: 1;
padding-left: 7px;
padding-right: 7px;
- background-color: @field-lookup-btn-bg;
- border:1px solid @field-border;
+ background-color: @default-bg;
+ border:1px solid @b7grey;
}
.Form-passwordButton:hover {
cursor: pointer;
- background-color: @field-lookup-btn-hov-bg;
- border: 1px solid @field-border;
+ background-color: @f2grey;
+ border: 1px solid @b7grey;
color: @field-lookup-btn-icon;
}
-.Form-passwordButton:focus{
+.Form-passwordButton:focus {
border: 1px solid @field-border;
background-color: @field-lookup-btn-hov-bg;
}
@@ -471,13 +470,13 @@
border-right: 0px;
}
-.CodeMirror{
+.CodeMirror {
border-radius: 5px;
font-style: normal;
color: @field-input-text;
}
-.CodeMirror-gutters{
+.CodeMirror-gutters {
background-color:@code-mirror-gutter !important;
}
@@ -563,7 +562,7 @@ input[type='radio']:checked:before {
display: inline-block !important;
}
-.Form-inputLabel{
+.Form-inputLabel {
text-transform: uppercase;
color: @default-interface-txt;
font-weight: normal;
@@ -583,7 +582,7 @@ input[type='radio']:checked:before {
.noselect;
}
-.Form-buttons{
+.Form-buttons {
height: 30px;
display: flex;
justify-content: flex-end;
@@ -593,7 +592,7 @@ input[type='radio']:checked:before {
}
}
-.Form-button{
+.Form-button {
margin-left: 4px;
}
@@ -603,7 +602,7 @@ input[type='radio']:checked:before {
border-color: @default-border;
}
-.Form-saveButton, .Form-launchButton{
+.Form-saveButton, .Form-launchButton {
background-color: @submit-button-bg;
color: @submit-button-text;
text-transform: uppercase;
@@ -612,11 +611,11 @@ input[type='radio']:checked:before {
padding-right: 15px;
}
-.Form-saveButton:disabled, .Form-launchButton:disabled{
+.Form-saveButton:disabled, .Form-launchButton:disabled {
background-color: @submit-button-bg-dis;
}
-.Form-saveButton:hover, .Form-launchButton:hover{
+.Form-saveButton:hover, .Form-launchButton:hover {
background-color: @submit-button-bg-hov;
color: @submit-button-text;
}
@@ -633,7 +632,7 @@ input[type='radio']:checked:before {
margin-left: 20px;
}
-.Form-cancelButton:hover{
+.Form-cancelButton:hover {
background-color: @btn-bg-hov;
color: @btn-txt;
}
@@ -754,3 +753,8 @@ input[type='radio']:checked:before {
:-moz-placeholder { /* Firefox 18- */
color: @b7grey;
}
+
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+ border-color: @b7grey;
+ background: @ebgrey;
+}
diff --git a/awx/ui/client/legacy-styles/jquery-ui-overrides.less b/awx/ui/client/legacy-styles/jquery-ui-overrides.less
index c214c55979..79f7dd5931 100644
--- a/awx/ui/client/legacy-styles/jquery-ui-overrides.less
+++ b/awx/ui/client/legacy-styles/jquery-ui-overrides.less
@@ -223,5 +223,5 @@ table.ui-datepicker-calendar {
}
.ui-state-disabled.ui-widget-content {
- background-color: @egrey;
+ background-color: @ebgrey !important;
}
diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less
index 3669549531..90a898be9b 100644
--- a/awx/ui/client/lib/theme/_mixins.less
+++ b/awx/ui/client/lib/theme/_mixins.less
@@ -34,7 +34,7 @@
&, &:active, &:hover, &:focus {
color: @at-color-button-text-default;
border-color: @at-color-input-border;
- background-color: @at-color-default;
+ background-color: @at-gray-light-2x;
cursor: pointer;
}
}
diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less
index b006601d10..ea5240ebed 100644
--- a/awx/ui/client/lib/theme/_variables.less
+++ b/awx/ui/client/lib/theme/_variables.less
@@ -1,20 +1,20 @@
/**
* All variables used in the UI. Use these variables directly during the development of components
* and features. Be sure the context of the variable name applies to the work that's being done.
- * For example, it wouldn't make sense to use `@at-input-height` to describe the height of a
- * button. Either add an alias if it makes sense to use the same base variable, or add a new
+ * For example, it wouldn't make sense to use `@at-input-height` to describe the height of a
+ * button. Either add an alias if it makes sense to use the same base variable, or add a new
* base variable to reference.
*
- * Keep in mind the goal is to be able to modify an item by referencing its context instead of
- * an arbitrary variable name. For example, tt should be a simple change when an ask comes in to
+ * Keep in mind the goal is to be able to modify an item by referencing its context instead of
+ * an arbitrary variable name. For example, tt should be a simple change when an ask comes in to
* "increase the height of inputs"
*
* 1. Colors
* 2. Typography
* 3. Layout
* 4. Buttons
- * 5. Misc
- *
+ * 5. Misc
+ *
*/
// 1. Colors --------------------------------------------------------------------------------------
@@ -68,11 +68,11 @@
@at-color-input-disabled: @at-gray-light-2x;
@at-color-icon-dismiss: @at-gray-dark;
-@at-color-icon-popover: @at-gray-dark-3x;
+@at-color-icon-popover: @at-gray-dark-4x;
@at-color-icon-hover: @at-gray-dark-5x;
@at-color-panel-heading: @at-gray-dark-5x;
-@at-color-panel-border: @at-gray-dark;
+@at-color-panel-border: @at-gray-dark-2x;
@at-color-search-key-active: @at-blue;
@@ -140,4 +140,3 @@
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@at-line-height: 24px;
-
diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js
index fffaac55a4..1a2f427a85 100644
--- a/awx/ui/client/src/app.js
+++ b/awx/ui/client/src/app.js
@@ -206,7 +206,7 @@ var awApp = angular.module('awApp', [
LoadConfig, Store, pendoService, Prompt, Rest, Wait,
ProcessErrors, $state, GetBasePath, ConfigService, FeaturesService,
$filter, SocketService, AppStrings) {
-
+ console.log("This works fine!");
$rootScope.$state = $state;
$rootScope.$state.matches = function(stateName) {
return $state.current.name.search(stateName) > 0;
diff --git a/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less b/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less
index 4c548c20d3..411fd2e313 100644
--- a/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less
+++ b/awx/ui/client/src/home/dashboard/counts/dashboard-counts.block.less
@@ -19,7 +19,7 @@
padding-right: 15px;
border-radius: 5px;
background-color: @db-panel-bg;
- border: 1px solid @db-panel-border;
+ border: 1px solid @b7grey;
flex: 1 0 auto;
max-width: ~"calc(16.6% - 15px)";
flex-basis: ~"calc(16.6% - 15px)";
diff --git a/awx/ui/client/src/home/dashboard/dashboard.block.less b/awx/ui/client/src/home/dashboard/dashboard.block.less
index c5bb5a2082..ec509d1833 100644
--- a/awx/ui/client/src/home/dashboard/dashboard.block.less
+++ b/awx/ui/client/src/home/dashboard/dashboard.block.less
@@ -19,7 +19,7 @@
}
.Dashboard-list {
- border: 1px solid @default-border;
+ border: 1px solid @b7grey;
border-radius: 5px;
margin-top: 20px;
width: 50%;
diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
index c0821395bb..c33ebcf4b1 100644
--- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
+++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
@@ -2,7 +2,7 @@
.DashboardGraphs {
margin-top: 20px;
- border: solid 1px @db-panel-border;
+ border: solid 1px @b7grey;
border-radius: 5px;
background-color: @db-panel-bg;
padding-top:20px;
diff --git a/awx/ui/client/src/job-submission/job-submission.block.less b/awx/ui/client/src/job-submission/job-submission.block.less
index 350ffc4f86..5ddb90b628 100644
--- a/awx/ui/client/src/job-submission/job-submission.block.less
+++ b/awx/ui/client/src/job-submission/job-submission.block.less
@@ -106,7 +106,7 @@
cursor: default!important;
}
.JobSubmission-step--disabled {
- opacity: 0.4;
+ opacity: 0.65;
cursor: not-allowed!important;
}
.JobSubmission-formContainer {
diff --git a/awx/ui/client/src/management-jobs/card/mgmtcards.block.less b/awx/ui/client/src/management-jobs/card/mgmtcards.block.less
index cc601f814e..75a463dc82 100644
--- a/awx/ui/client/src/management-jobs/card/mgmtcards.block.less
+++ b/awx/ui/client/src/management-jobs/card/mgmtcards.block.less
@@ -8,7 +8,7 @@
background-color: @default-bg;
padding: 20px;
border-radius: 5px;
- border: 1px solid @default-border;
+ border: 1px solid @b7grey;
align-items: baseline;
margin-top: 20px;
width: 32%;
diff --git a/awx/ui/client/src/organizations/orgcards.block.less b/awx/ui/client/src/organizations/orgcards.block.less
index 370d1dd255..fe521a1677 100644
--- a/awx/ui/client/src/organizations/orgcards.block.less
+++ b/awx/ui/client/src/organizations/orgcards.block.less
@@ -33,7 +33,7 @@
padding: 20px;
padding-bottom: 0px;
border-radius: 5px;
- border: 1px solid @default-border;
+ border: 1px solid @b7grey;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
diff --git a/awx/ui/client/src/setup-menu/setup-item.block.less b/awx/ui/client/src/setup-menu/setup-item.block.less
index 092c40d171..7302ac752c 100644
--- a/awx/ui/client/src/setup-menu/setup-item.block.less
+++ b/awx/ui/client/src/setup-menu/setup-item.block.less
@@ -3,7 +3,7 @@
.SetupItem {
background-color: @panel-bg;
border-radius: 5px;
- border: 1px solid @btn-bord;
+ border: 1px solid @b7grey;
min-height: 120px;
padding: 20px;
margin-top: 20px;
diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less
index a685f8427e..af8286108f 100644
--- a/awx/ui/client/src/shared/branding/colors.default.less
+++ b/awx/ui/client/src/shared/branding/colors.default.less
@@ -16,7 +16,7 @@
@default-link: #337AB7;
@default-link-hov: #286090;
@default-list-header-bg:#EBEBEB;
-@default-no-items-bord: #F6F6F6; // also white button hovers
+@default-no-items-bord: #F6F6F6;
@default-stdout-txt: #707070;
@default-dark: #000000;
@b7grey: #B7B7B7;
@@ -25,6 +25,8 @@
@f7grey: #F7F7F7;
@insights-yellow: #dedc4f;
@f2grey: #f2f2f2;
+@f6grey: #f6f6f6;
+@ebgrey: #ebebeb;
@default-warning: #F0AD4E;
@@ -42,9 +44,9 @@
// buttons
@btn-bg: @default-bg;
-@btn-bord: @d7grey;
+@btn-bord: @b7grey;
@btn-txt: @default-interface-txt;
-@btn-bg-hov: @default-tertiary-bg;
+@btn-bg-hov: @f2grey;
@btn-bg-sel: @default-icon-hov;
@btn-bord-sel: @default-icon-hov;
@btn-txt-sel: @default-bg;
@@ -131,35 +133,35 @@
@radio-bg: @default-interface-txt;
@field-lookup-btn-icon: @default-icon;
@field-lookup-btn-bg: @default-bg;
-@field-lookup-btn-hov-bg:@default-tertiary-bg;
+@field-lookup-btn-hov-bg:@f2grey;
// footer
@copyright-text: @default-interface-txt;
// main menu
@menu-bg: @default-bg;
-@menu-btm: @default-border;
+@menu-btm: @b7grey;
@menu-link-bg: @default-bg;
@menu-link: @default-interface-txt;
@menu-link-sides: @default-bg;
@menu-link-bg-hov: @default-tertiary-bg;
@menu-link-sides-hov: @default-tertiary-bg;
-@menu-link-btm: @default-border;
-@menu-link-btm-hov: @default-border;
+@menu-link-btm: @b7grey;
+@menu-link-btm-hov: @b7grey;
@menu-link-icon: @default-icon;
// breadcrumbs
@bc-bg: @default-bg;
@bc-text: @default-interface-txt;
-@bc-border: @default-border;
+@bc-border: @b7grey;
@bc-link-icon: @default-icon;
-@bc-link-bg-hov: @default-tertiary-bg;
+@bc-link-bg-hov: @f2grey;
@bc-link-icon-focus: @default-link;
@bc-link-side: @default-border;
// dashboard
@db-panel-bg: @default-bg;
-@db-panel-border: @default-border;
+@db-panel-border: @b7grey;
// dashboard counts
@db-count-succ: @default-link;
@@ -179,7 +181,7 @@
// panel
@panel-bg: @default-bg;
-@panel-border: @default-border;
+@panel-border: @b7grey;
// activity stream details modal
@as-detail-changes-txt: @default-stdout-txt;
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index fd4f16c45f..771af06646 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -844,7 +844,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
if (field.genMD5) {
- html += "\n\n";
}
@@ -1371,7 +1371,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += ``;
html += "\n";
- html += ``;
diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
index 7fd6a8aecc..e6424a90e0 100644
--- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
@@ -69,7 +69,7 @@
}
.WorkflowResults-rightSide .WorkflowChart-svg {
- background-color: @default-secondary-bg;
+ background-color: @f6grey;
border: 1px solid @d7grey;
border-top: 0px;
border-bottom-right-radius: 5px;
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
index 0f860547b3..c506907a09 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
@@ -43,7 +43,7 @@
}
.WorkflowMaker-contentHolder {
display: flex;
- border: 1px solid @d7grey;
+ border: 1px solid @b7grey;
border-radius: 5px;
height: ~"calc(100% - 85px)";
}
@@ -54,7 +54,8 @@
}
.WorkflowMaker-contentRight {
flex: 0 0 400px;
- border-left: 1px solid @d7grey;
+ border-left: 1px solid @b7grey;
+ background: @default-bg;
padding: 20px;
height: 100%;
overflow-y: scroll;
@@ -157,7 +158,8 @@
height: 40px;
line-height: 40px;
color: @default-interface-txt;
- border-bottom: 1px solid @d7grey;
+ background: @default-bg;
+ border-bottom: 1px solid @b7grey;
}
.WorkflowLegend-maker--left {
flex: 1 0 auto;
@@ -246,7 +248,7 @@
width: 293px;
background-color: @default-bg;
display: flex;
- border: 1px solid @d7grey;
+ border: 1px solid @b7grey;
border-top: 0px;
border-bottom-left-radius: 5px;
margin-left: -1px;