fix(components/pages): update needs-attention to match box design (#582) (#611)

* fix(components/pages): update needs-attention to match box design

* Add playground example to compare with box.

* Simplify change.

Author: johnhwhite

apps/playground/src/app/components/pages/action-hub/action-hub.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { SkyIdModule } from '@skyux/core';
 import { SkyInputBoxModule } from '@skyux/forms';
-import { SkyFluidGridModule } from '@skyux/layout';
+import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
 import { SkyModalModule } from '@skyux/modals';
 import { SkyActionHubModule } from '@skyux/pages';
 
@@ -25,6 +25,7 @@ import { SettingsComponent } from './settings/settings.component';
     SkyIdModule,
     SkyInputBoxModule,
     SkyModalModule,
+    SkyBoxModule,
   ],
 })
 export class ActionHubModule {

apps/playground/src/app/components/pages/action-hub/recent/action-hub-recent-links.component.html

@@ -39,4 +39,12 @@
       Undefined
     </button>
   </sky-action-hub-buttons>
+  <sky-action-hub-content>
+    <sky-box>
+      <sky-box-header> Content </sky-box-header>
+      <sky-box-content>
+        <p>This is the content area.</p>
+      </sky-box-content>
+    </sky-box>
+  </sky-action-hub-content>
 </sky-action-hub>

libs/components/pages/src/lib/modules/needs-attention/needs-attention.component.html

@@ -2,7 +2,7 @@
   class="sky-needs-attention-container sky-box"
   [skyThemeClass]="{
     'sky-padding-even-large sky-shadow': 'default',
-    'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'
+    'sky-elevation-1-bordered sky-padding-even-xl': 'modern'
   }"
 >
   <h2 class="sky-font-heading-2">