fix(buttons): improve actions group styles

src/app/pages/ui-features/buttons/action-groups/action-groups.component.html

@@ -0,0 +1,17 @@
+<div class="action-groups">
+  <div class="action-groups-header">
+    <span>Action Groups</span>
+  </div>
+  <nga-actions size="medium">
+    <nga-action icon="ion-navicon"></nga-action>
+    <nga-action>
+      <nga-search type="rotate-layout"></nga-search>
+    </nga-action>
+    <nga-action icon="ion-ios-email-outline"></nga-action>
+    <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+    <nga-action>
+      <nga-user [menu]="userMenu" name="Han Solo"></nga-user>
+    </nga-action>
+    <nga-action icon="ion-ios-gear-outline"></nga-action>
+  </nga-actions>
+</div>

src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss

@@ -0,0 +1,14 @@
+@import '../../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/components/card/card.component.theme';
+
+@include nga-install-component() {
+  .action-groups {
+    display: flex;
+  }
+
+  .action-groups-header {
+    flex: 1;
+
+    @include nga-card-header();
+  }
+}

src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-action-groups',
+  styleUrls: ['./action-groups.component.scss'],
+  templateUrl: './action-groups.component.html',
+})
+export class ActionGroupsComponent {
+
+  userMenu = [{
+    title: 'Profile',
+  }, {
+    title: 'Log out',
+  }];
+}

src/app/pages/ui-features/buttons/actions-groups/actions-groups.component.html

@@ -1,21 +0,0 @@
-<nga-card>
-  <nga-card-body>
-    <div class="actions-groups">
-      <div class="container-title">
-        <span>Action Groups</span>
-      </div>
-      <nga-actions size="medium">
-        <nga-action icon="ion-navicon"></nga-action>
-        <nga-action>
-          <nga-search type="rotate-layout"></nga-search>
-        </nga-action>
-        <nga-action icon="ion-ios-email-outline"></nga-action>
-        <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
-        <nga-action>
-          <nga-user [menu]="userMenu" name="Han Solo"></nga-user>
-        </nga-action>
-        <nga-action icon="ion-ios-gear-outline"></nga-action>
-      </nga-actions>
-    </div>
-  </nga-card-body>
-</nga-card>

src/app/pages/ui-features/buttons/actions-groups/actions-groups.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-actions-groups',
-  templateUrl: './actions-groups.component.html',
-})
-
-export class ActionsGroupsComponent {
-
-  userMenu = [
-    {
-      title: 'Profile',
-    },
-    {
-      title: 'Log out',
-    },
-  ];
-}

src/app/pages/ui-features/buttons/buttons.component.html

@@ -4,7 +4,9 @@
   </div>
   <div class="col-lg-6">
     <ngx-shape-buttons></ngx-shape-buttons>
-    <ngx-actions-groups></ngx-actions-groups>
+    <nga-card>
+      <ngx-action-groups></ngx-action-groups>
+    </nga-card>
     <nga-card>
       <nga-card-body>
         <ngx-labeled-actions-group></ngx-labeled-actions-group>

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -59,18 +59,6 @@
       margin-bottom: 1.5rem;
     }
 
-    .actions-groups {
-      display: flex !important;
-    }
-
-    .actions-groups .container-title {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      justify-content: center;
-      color: white;
-    }
-
     .block-level-buttons .btn-group {
       margin-bottom: 1rem;
     }

src/app/pages/ui-features/buttons/buttons.module.ts

@@ -8,7 +8,7 @@ import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
 import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
 import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
 import { ButtonsComponent } from './buttons.component';
-import { ActionsGroupsComponent } from './actions-groups/actions-groups.component';
+import { ActionGroupsComponent } from './action-groups/action-groups.component';
 import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
 import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
 import { ButtonGroupsComponent } from './button-groups/button-groups.component';
@@ -21,7 +21,7 @@ const components = [
   HeroButtonComponent,
   ShapeButtonsComponent,
   SizeButtonsComponent,
-  ActionsGroupsComponent,
+  ActionGroupsComponent,
   DropdownButtonsComponent,
   BlockLevelButtonsComponent,
   ButtonGroupsComponent,