Add a notice bar to the preview page of a listing

[jaredcwhite]

Pull Request Template

Issue

Addresses #1507

• This change addresses the issue in full
• This change addresses only certain aspects of the issue
• This change is a dependency for another issue
• This change has a dependency from another issue

Description

When previewing a listing from the partners portal, a preview banner is shown at the top of the listing.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Prototype/POC (not to merge)
• This change is a refactor/address technical debt
• This change requires a documentation update
• This change requires a SQL Script

How Can This Be Tested/Reviewed?

Sign into the portal and then preview a listing! 😉 Alternatively go to a public listing and then change the url format to preview/listings/[id]

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have reviewed the changes in a desktop view
• I have reviewed the changes in a mobile view
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have assigned reviewers
• I have updated the changelog to include a description of my changes

[netlify]

✔️ Deploy Preview for dev-bloom ready!

🔨 Explore the source changes: d4d4f55

🔍 Inspect the deploy log: https://app.netlify.com/sites/dev-bloom/deploys/61001c72892b56000795c0b7

😎 Browse the preview: https://deploy-preview-1532--dev-bloom.netlify.app

[netlify]

✔️ Deploy Preview for dev-partners-bloom ready!

🔨 Explore the source changes: d4d4f55

🔍 Inspect the deploy log: https://app.netlify.com/sites/dev-partners-bloom/deploys/61001c722bb133000858d211

😎 Browse the preview: https://deploy-preview-1532--dev-partners-bloom.netlify.app

[netlify]

✔️ Deploy Preview for dev-storybook-bloom ready!

🔨 Explore the source changes: d4d4f55

🔍 Inspect the deploy log: https://app.netlify.com/sites/dev-storybook-bloom/deploys/61001c72bdc80d0008cb838e

😎 Browse the preview: https://deploy-preview-1532--dev-storybook-bloom.netlify.app

[netlify]

✔️ Deploy Preview for jovial-davinci-1d67a0 ready!

🔨 Explore the source changes: d4d4f55

🔍 Inspect the deploy log: https://app.netlify.com/sites/jovial-davinci-1d67a0/deploys/61001c72ca8c0300089a8c75

😎 Browse the preview: https://deploy-preview-1532--jovial-davinci-1d67a0.netlify.app

[slowbot]

@jaredcwhite Originally I had designed this to be a top of the page element. Was that not possible or did you think this new placement was more appropriate?

[seanmalbert]

This looks good, @jaredcwhite , and matches the comps.

[jaredcwhite]

@jaredcwhite Originally I had designed this to be a top of the page element. Was that not possible or did you think this new placement was more appropriate?

@slowbot I would say it's easier to implement this within the individual page region, rather than try to monkey with the overall layout (aka header/footer).