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/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>