refactor: override action buttons styles

Author: tumms2021389

angular.json

@@ -80,7 +80,7 @@
               },
               "src/assets/img"
             ],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "src/app/_samples/mediaco/mediaCoStyles.scss"],
             "scripts": ["./node_modules/tinymce/tinymce.min.js"],
             "customWebpackConfig": {
               "path": "./extra-webpack.config.js"

src/app/_samples/mediaco/components/action-buttons/action-buttons.component.html

@@ -0,0 +1,17 @@
+.mediaCoTheme {
+  // Action Buttons styles for MediaCo sample app - start
+  .button-bar {
+    gap: 1rem;
+    margin-top: 1.2rem;
+  }
+
+  .right-group {
+    margin-left: 0 !important;
+  }
+
+  .secondary-button {
+    background-color: var(--app-sys-secondary-button-background) !important;
+    border-color: var(--app-sys-secondary-button-border) !important;
+  }
+  // Action Buttons styles for MediaCo sample app - end
+}

src/app/_samples/mediaco/components/action-buttons/action-buttons.component.scss

@@ -1,5 +1,4 @@
 // Statically load all "MediaCo" components.
-import { ActionButtonsComponent } from './components/action-buttons/action-buttons.component';
 import { AppShellComponent } from './components/app-shell/app-shell.component';
 import { BannerComponent } from './components/banner/banner.component';
 import { ListViewComponent } from './components/list-view/list-view.component';
@@ -14,7 +13,6 @@ import { WssNavBarComponent } from './components/wss-nav-bar/wss-nav-bar.compone
 // specific to MediaCo application.
 
 const sdkMediaCoComponentMap = {
-  ActionButtons: ActionButtonsComponent,
   AppShell: AppShellComponent,
   Banner: BannerComponent,
   ListView: ListViewComponent,