chore: Cleanup page-top-bar style conflicts (#2407)

* chore: Class name cleanup page-top-bar.

* prettier spacing fixes

* Review fixes and adds storybook

* Circleci fixes

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -1,9 +1,5 @@
 .settings {
   overflow: auto;
-
-  .page-top-bar {
-    @include padding($space-normal $space-two $zero);
-  }
 }
 
 // Conversation header - Light BG
@@ -27,7 +23,6 @@
     @include flex-align($x: center, $y: middle);
     @include margin($zero);
   }
-
 }
 
 .wizard-box {

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -264,10 +264,6 @@ export default {
   .modal-container {
     width: 40rem;
   }
-
-  .page-top-bar {
-    padding-bottom: $space-two;
-  }
 }
 
 .account-selector {

app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js

@@ -0,0 +1,30 @@
+import SettingIntroBanner from './SettingIntroBanner';
+
+export default {
+  title: 'Components/Settings/Banner',
+  component: SettingIntroBanner,
+  argTypes: {
+    headerTitle: {
+      defaultValue: 'Acme Support',
+      control: {
+        type: 'text',
+      },
+    },
+    headerContent: {
+      defaultValue:
+        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SettingIntroBanner },
+  template: '<setting-intro-banner v-bind="$props" ></setting-intro-banner>',
+});
+
+export const Banner = Template.bind({});
+Banner.args = {};

app/javascript/dashboard/components/widgets/SettingIntroBanner.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="column page-top-banner">
+    <h2 class="page-sub-title">
+      {{ headerTitle }}
+    </h2>
+    <p v-if="headerContent" class="small-12 column">
+      {{ headerContent }}
+    </p>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page-top-banner {
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-background-light);
+  padding: var(--space-normal) var(--space-large) 0;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settings columns container">
-    <woot-modal-header
+    <setting-intro-banner
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
     >
@@ -12,7 +12,7 @@
           :show-badge="false"
         />
       </woot-tabs>
-    </woot-modal-header>
+    </setting-intro-banner>
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="settings--content">
       <settings-section
@@ -265,6 +265,7 @@ import { mapGetters } from 'vuex';
 import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
 import configMixin from 'shared/mixins/configMixin';
 import alertMixin from 'shared/mixins/alertMixin';
+import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner';
 import SettingsSection from '../../../../components/SettingsSection';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize';
@@ -274,6 +275,7 @@ import Campaign from './components/Campaign';
 
 export default {
   components: {
+    SettingIntroBanner,
     SettingsSection,
     FacebookReauthorize,
     PreChatFormSettings,
@@ -518,15 +520,9 @@ export default {
     }
   }
 
-  .page-top-bar {
-    @include background-light;
-    @include border-normal-bottom;
-    padding: $space-normal $space-large 0;
-
-    .tabs {
-      padding: 0;
-      margin-bottom: -1px;
-    }
+  .tabs {
+    padding: 0;
+    margin-bottom: -1px;
   }
 }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue

@@ -207,8 +207,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.content-box .page-top-bar::v-deep {
-  padding: var(--space-large) var(--space-large) var(--space-zero);
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue

@@ -239,8 +239,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.content-box .page-top-bar::v-deep {
-  padding: var(--space-large) var(--space-large) var(--space-zero);
-}
-</style>