Update Header UI

[austincondiff]

Based on the design in #2557, update the header UI in the project. Feel free to use this CodeSandbox for reference.

• Change styles to match design
• Add to Storybook
• Write tests
• Ensure tests pass
• Open a pull request

[tinfoil-knight]

@austincondiff Can I claim this issue?

[austincondiff]

Of course!

[tinfoil-knight]

@austincondiff I took a look around the CodeSandbox and your thread on UI changes. Do I refer the first image or the second one for making changes to the UI?
Also, can you please assign the issue to me so that I can access it easily from my Github homepage.

[austincondiff]

The first dark image. The editor header is separate from the app header FYI. The app header will be on the collection pages and the workflow page, but won’t be on the editor page. I will update the issue with the latest mockups.

[tinfoil-knight]

@austincondiff

1. Are the React components going to be class based(like they are currently) or functional (as they are in your CodeSandbox)?
2. What about the Save, Delete unpublished entry, Set status buttons which are currently not in the mockup?
3. How would Unsaved Changes be depicted?
4. Would the Publish button change to Published as it does now or will there only be a toast confirmation as in the sandbox?

[austincondiff]

1. Are the React components going to be class based(like they are currently) or functional (as they are in your CodeSandbox)?

Functional with hooks.

2. What about the Save, Delete unpublished entry, 'Set status` buttons which are currently not in the mockup?

For now, put them in the more menu.

3. How would Unsaved Changes be depicted?

I will have to think about that and get back to you. We can discuss on Slack and then I will post a final mockup.

4. Would the Publish button change to Published as it does now or will there only be a toast confirmation as in the sandbox?

The Publish button should say Published and be disabled when it has been published. As soon as the user makes another change though the button should be enabled and say Publish again.

[tinfoil-knight]

@austincondiff
Sorry for the delay!
The LogoTile from the AppBar has been deleted as discussed on Slack.

For the SearchBar, I looked at previously defined SearchContainer in Collection and MediaLibrary component and tried to create a SearchBar component that can be used everywhere. Take a look and tell me if you have some feedback.

It uses the renderEnd value to render optional EndContent just like in AppBar.
I'll complete the component with tests and make a PR soon.

[austincondiff]

Looks fantastic. Way to go. Looking forward to the PR! 🚀

[tinfoil-knight]

WIP: #3926