Updating colors to match Summit Demo/PF/PF-Next

app/js/components/actions/actionsRule/_rule-detail.scss

@@ -18,7 +18,9 @@
   }
 
   grid-gap: $global-margin;
-  @include rem('margin', 0 $global-margin);
+  margin: 0;
+  @include rem('padding', 0 $global-margin);
+  border-bottom: 1px solid #d1d1d1;
 
   .detail,
   .meta { @include rem('padding', 0 $global-padding); }
@@ -74,4 +76,12 @@
 
 .rule-detail-summary {
   grid-area: rule-detail;
+}
+
+.actions-rule {
+  .rule-detail-header {
+    border-bottom: 0;
+    .page-header { @include rem('padding', $global-padding*2 0); }
+  }
+  section.content { background: #fff; }
 }

app/js/components/feedback/feedbackButton.jade

@@ -1,3 +1,3 @@
-a.btn.btn-feedback(ng-click="openFeedbackPage()")
+a.md-button.md-button-sm.btn-feedback(ng-click="openFeedbackPage()")
   i.fa.fa-comments(aria-hidden="true")
   strong(translate) Provide feedback

app/js/components/incident/incidentLite/incidentLite.jade

@@ -1,7 +1,7 @@
 .text-center(ng-if='loading')
   .spinner.spinner-lg
 
-.incident-lite(ng-if='!loading')
+card.card-accent.incident-lite(ng-if='!loading')
   .cell.icon
     i.fa.fa-bullseye(aria-hidden="true")
 

app/js/components/pageHeader/pageHeader.jade

@@ -6,6 +6,6 @@ section.page-header(ng-transclude)
     a(ng-if="link.length > 0", href="{{:: link}}", target="_blank")
       i.fa.fa-external-link
   //- subtitle is an array
-  .page-subtitle
+  .page-subtitle(ng-if="subtitle")
     dl
       dd.text(ng-repeat="subtitle_part in subtitle") {{:: subtitle_part }}

app/js/components/primary-nav/_primary-nav.scss

@@ -1,5 +1,4 @@
 $primary-nav-bg: #292e34;
-$primary-nav-bg: #454853;
 $dashboard-nav-border-color: #403b3f;
 $dashboard-nav-header-bg: #4d464b;
 $dashboard-nav-input-bg: #322e31;
@@ -22,8 +21,12 @@ $aside_anchor_hover_bg: gray;
   a,
   button {
     color: #fff;
-    font-weight: 700;
+    font-weight: 400;
     position: relative;
+    align-items: center;
+    color: #d1d1d1;
+    span {@include font-size(14px); }
+    i { @include font-size(20px); }
   }
 
   ul {
@@ -41,7 +44,7 @@ $aside_anchor_hover_bg: gray;
     display: flex;
     flex-direction: row;
     margin: 0;
-    @include rem('padding', $global-padding $global-margin $global-padding $global-padding);
+    @include rem('padding', 17px 25px);
 
     text-align: center;
     @include font-size(14px, 1);
@@ -55,8 +58,9 @@ $aside_anchor_hover_bg: gray;
   ul li a.current,
   ul li button:hover {
     background: rgba(255,255,255,.075);
-    box-shadow: inset 6px 0 0 $blue-light;
-    text-decoration: none;    
+    box-shadow: inset 3px 0 0 $blue-light;
+    text-decoration: none;
+    color: #fff;
   }
 
   ul li a.current .fa {
@@ -74,7 +78,7 @@ $aside_anchor_hover_bg: gray;
 //==================================================================*/
 
 .primary-nav ul li a,
-.primary-nav ul li button { @include media-query(md) { @include rem('padding', 24px 34px 24px 24px); } }
+.primary-nav ul li button { @include media-query(md) { @include rem('padding', 17px 25px); } }
 
 .platform-grid.collapsed .primary-nav ul li a, 
 button.toggle-fullscreen {
@@ -102,7 +106,7 @@ topbar .toggle-fullscreen {
     @include rem('padding', $global-padding/2);
     border: none;
     box-shadow: none;
-    background: #292b31;
+    background: #1d1d1d;
   }
 
   .internal {

app/js/components/topbar/_topbar-insights-logo.scss

@@ -3,8 +3,14 @@ topbar .insights-logo {
 
   @include media-query(sm){ display: inline-flex; }
 
-  .home-link md-icon {
-    @include rem('width', 120px);
+  .home-link, .home-link md-icon {
+    .st0 { fill: #fff; }
+    @include rem('width', 180px);
+  }
+
+  button.toggle-fullscreen md-icon{
+    color: #fff;
+    @include font-size(20px);
   }
 
   button {

app/js/components/topbar/_topbar-utilities.scss

@@ -1,4 +1,7 @@
 .topbar-utilities {
   display: flex;
   align-items: center;
+  .md-button, .md-button *:hover {
+    color: #fff;
+  }
 }

app/js/components/topbar/_topbar.scss

@@ -1,13 +1,13 @@
-$topbar-bg: #F5F5F5;
-$topbar-text-color: $base-color;
+$topbar-bg: #1D1D1D;
+$topbar-text-color: #fff;
 $topbar-border-color: #ddd;
 
 
 topbar {
   display: block;
   @include rem('padding', $global-margin);
   background: $topbar-bg;
-  border-bottom: 4px solid $topbar-border-color;
+  //border-bottom: 4px solid $topbar-border-color;
 
   @include media-query(sm){
     @include rem('padding', 0 $global-padding 0 0);
@@ -59,8 +59,11 @@ topbar {
   .beta-switch { display: inline-block; }
 
   menu span + span { padding-left: 15px; }
-  menu.notifications{ 
+  menu.notifications{
     padding: 0;
+    .dropdown a:hover, .dropdown a:focus {
+      color: $blue-light;
+    }
   }
 
   .help, 

app/js/components/topbar/topbar.jade

@@ -1,6 +1,6 @@
 .cell.insights-logo
   button.toggle-fullscreen(ng-click='sidenavCollapsed = !sidenavCollapsed')
-    md-icon(md-font-icon="fa fa-indent")
+    md-icon(md-font-icon="fa fa-bars")
 
   md-button(ng-click="toggleLeft()",
     class="md-primary",
@@ -9,7 +9,7 @@
 
   a.home-link(ui-sref='app.overview')
     span.hidden(translate) Red Hat Insights
-    md-icon(md-svg-src="./static/images/l_insights.svg" aria-label="Red Hat Insights ")
+    md-icon(md-svg-src="./static/images/l_insights-inline.svg" aria-label="Red Hat Insights ")
 
 .cell.global-filters(ng-class='{disabled: disabled}', ng-if='isGroupsEnabled')
   group-select(disabled='disabled')

app/js/states/digests/digests.jade

@@ -1,6 +1,6 @@
 .digests-page
   page-header(title="Executive Report", icon="fa-bar-chart", ng-class="{'inactive': !expandBar, 'active': expandBar}", ng-transclude)
-    md-button.md-primary.pull-right(
+    md-button.md-primary(
       ng-click='downloadPdf()',
       ng-if="!downloading",
       ng-show='systemsTilTen < 1',

app/js/states/inventory/inventory.jade

@@ -6,7 +6,7 @@
     actions-select
 
   .rha-notifications
-  section.content
+  section.content.content-white
     .table-utilities
 
     inventory-actions

app/js/states/maintenance/maintenance.jade

@@ -1,17 +1,17 @@
 .maintenance-page
   page-header(title="Maintenance Planner", icon="fa-wrench", ng-class="{'inactive': !expandBar, 'active': expandBar}", ng-transclude)
-    .create-plan-actions.text-right.pull-right
+
+  table-filters
+    maintenance-category-select(category='category', on-select='setCategory(category, true)')
+    .create-plan-actions.text-right
       a.create-plan(ng-click='MaintenanceService.showMaintenanceModal()')
         span(translate)  Create a plan
         i.fa.fa-plus-circle
       a.create-plan(ng-click='newSuggestion()', ng-if='isInternal')
         small.red(translate) New suggested plan
           i.fa.fa-plus-circle
 
-  table-filters
-    maintenance-category-select(category='category', on-select='setCategory(category, true)')
-
-  section.content
+  section.content.content-white
     .table-header
       search-box(ng-model='searchTerm', placeholder="{{'Search plans' | translate}}")
     section

app/js/states/rules/list-rules.jade

@@ -1,7 +1,7 @@
 section
   page-header(title="Rules", icon="fa-institution")
   rule-filter
-  section.content
+  section.content.content-white
     a.btn.btn-sm.btn-app.pull-right(ui-sref='app.admin-topic', ng-show='user.is_internal') Topics Admin
 
     .table-header

app/js/states/topics/views/topic-list.jade

@@ -16,7 +16,7 @@
     total-risk-select
     risk-of-change-select
 
-  section.content.rule-groups
+  section.content.content-white.rule-groups
     .table-header
       list-type
 

app/js/states/vulnerabilities/styles/_view-cve.scss

@@ -32,7 +32,8 @@
 
   .page-header {
     grid-area: page-header;
-    margin-left: 0px;
+    margin-left: 0;
+    padding-left: 0;
     .page-title i { margin: 0px; }
   }
 

app/js/states/vulnerabilities/styles/_vulnerability-grid.scss

@@ -20,7 +20,8 @@
 
   .page-header {
     grid-area: page-header;
-    margin-left: 0px;
+    margin-left: 0;
+    padding-left: 0;
     .page-title i { margin: 0px; }
   }
 

app/styles/components/_breadcrumbs.scss

@@ -25,7 +25,9 @@ $breadcrumbs-border: #E2E2E2;
   }
 
   ol > li + li:before {
-    content: "/ ";
+    content: "\f054 ";
+    font-family: 'FontAwesome';
+    @include font-size(10px);
     padding: 0 5px;
     color: #ccc;
   }

app/styles/components/_dashboard-nav.scss

@@ -48,7 +48,7 @@ $dashboard-nav-input-bg: #322e31;
 		@include rem('padding', 2px 6px);
 		@include rem('margin-bottom', 5px);
 		float: right;
-		color: #999999;
+		color: #fff;
 
 		&:hover { color: #f0f0f0; }
 	}

app/styles/components/_gauges.scss

@@ -1,3 +1,9 @@
+.digests-page .page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .gauge.gauge-circle {
   width: 100px;
   height: 100px;

app/styles/components/_materials.scss

@@ -62,6 +62,16 @@ button.md-button.md-button-sm, a.md-button.md-button-sm{
 	// height: 20px !important;
 }
 
+.md-button.fab {
+  border-radius: 50px;
+  padding: 10px;
+  span a.dropdown-toggle { padding: 0; }
+}
+
+.md-button.fab + .md-button.fab {
+  @include rem('margin-left', 5px);
+}
+
 .md-dropdown-plain {
 	.md-button.md-default-theme:not([disabled]).md-focused, 
 	.md-button:not([disabled]).md-focused, 

app/styles/components/_page-header.scss

@@ -1,16 +1,9 @@
 .page-header {
+  //display: flex;
   position: relative;
-  @include rem ('margin', 0 $global-margin);
-  @include rem ('padding', $global-margin 0);
-  border: none;
-
-  &::before,
-  &::after {
-    content:"";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
+  margin: 0;
+  @include rem ('padding', $global-margin);
+  border-bottom: 1px solid #d1d1d1;
 
   &::before {
     width: 25vw;
@@ -30,6 +23,7 @@
   display: flex;
   margin: 0;
   @include font-size(18px, 23px);
+  font-weight: 400;
 
   @include media-query(md){ @include font-size(24px, 1); }
 

app/styles/components/insights/_group-select.scss

@@ -10,6 +10,14 @@
 	}
 }
 
+.group-select a.link {
+  color: #00B7FF;
+}
+
+#group-select .text span, #group-select .caret {
+  color: #fff;
+}
+
 .table-filters {
 
 	select {
@@ -28,7 +36,7 @@
 }
 
 .group-select .add-group {
-  opacity: .5;
+  opacity: .8;
   transition: .2s;
 
   &:hover {

app/styles/components/maintenance-planner/_maintenance-plan.scss

@@ -658,6 +658,10 @@ $maintenance-tab-namespace: ".content-block.maintenance-plan .content-tabs";
   }
 }
 
+.maintenance-page .filters .create-plan-actions{
+  margin-left: auto;
+}
+
 
 .create-plan-actions {
     margin-top: 0px;

app/styles/elements/_section.scss

@@ -6,6 +6,7 @@ $bg-gray: $gray-light;
 section.content { 
   width: 100%;
   @include rem('padding', $global-margin); 
+  background: #F5F5F5;
 }
 section.content.content-gray { background: $gray-light; }
 
@@ -22,6 +23,10 @@ section.content.content-gray { background: $gray-light; }
 //   }
 // }
 
+section.content.content-white {
+  background: #fff;
+}
+
 section.gray {
 	background: $gray-light;
   @include rem('padding', $global-margin);