[#1760] Edit Project Name - SCSS to Styled Components

[smitbarmase]

Partially Fixes #1760

1. Abstracted Project Name from Toolbar into a new component for reusability in the future i.e. For the mobile version.
2. Migrated all Project Name related SCSS to Styled Components.
3. Added necessary theme color in theme.js
4. Converted Toolbar from class-based to the functional component as Toolbar does not have any state.

I have verified that there is no change in UI and it's working.

Before:

After:

I have verified that this pull request:

• has no linting errors (npm run lint)
• is from a uniquely-named feature branch and has been rebased on top of the latest develop branch. (If I was asked to make more changes, I have made sure to rebase onto develop then too)
• is descriptively named and links to an issue number, i.e. Fixes #123

[release-com]

Release Environments

p5.js-web-editor
app-ted7ff3-p5-js-web-editor.releaseapp.io

[smitbarmase]

Seems like the only component I worked on have tests integrated. What are the odds!
Okay, I'm looking into it.

[smitbarmase]

@catarak I looked into the test. I think jest tests are receiving undefined while accessing theme on using prop function. Do you have any idea about this?

[smitbarmase]

Fixed it. The test was not able to access the theme, so I wrapped the component with ThemeProvider and for it to work, as it needed store I had to wrap it with Provider. And it worked!

Ready for the review :)

[smitbarmase]

I have also added PR #1808 to ensures that any calls to render have a theme available.