Break up Toolbar elements

[lindapaiste]

Changes:
Break up the Toolbar into 6 independent reusable components. Each component selects its own state from Redux.

1. PlayButton
2. StopButton
3. AutoRefreshCheckbox
4. EditableProjectName
5. ProjectOwner
6. PreferencesButton

I also had to change the Toolbar tests to keep them passing.

Includes the Sidebar changes from #2233 because I'm using the selectCanEditSketch selector from that PR.

---

Kind of a proof of concept. The idea is that we can export tiny pieces of the UI and use them in mobile components.
@dewanshDT do you think it's helpful to break things up this way?

@shujuuu's designs include a PlayButton which is the same button as on the web, but in a different place:

and also an EditableProjectName (needs styling overrides) and ProjectOwner:

---

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[dewanshDT]

Yeah, definitely this would allow us to use these components separately in different places, this is really needed. Thanks @lindapaiste

[dewanshDT]

instead of having a single file for the toolbar and exporting all the functions from a single file can we create a single folder inside of the components folder i.e. components/Toolbar inside of which we can create separate files for all the 6 components and an index file for the toolbar itself?
@lindapaiste what do you think, which approach is better? In my opinion, this would help structure the project better.

[lindapaiste]

instead of having a single file for the toolbar and exporting all the functions from a single file can we create a single folder inside of the components folder i.e. components/Toolbar inside of which we can create separate files for all the 6 components and an index file for the toolbar itself? @lindapaiste what do you think, which approach is better? In my opinion, this would help structure the project better.

I think this is a good idea. Will do. Sometimes I try to keep things in the same file as they were before for the sake of git history, so we can look back and see what changed when, but I changed so much that none of the lines match up anyways. 😝

[lindapaiste]

@raclim @dewanshDT I have it broken up into separate files but Git is considering the original Toolbar.jsx and Toolbar.test.jsx as "deleted". It would be better to merge it in two phases (one to change contents, the other to move) in order to keep the Git history. I might rollback the last commit and put it in a separate PR.