Embed redesign 2/n: Sidebar sections + Sandbox info

[siddharthkp]

The goal of this PR is to move closer to the final design without making the experience worse. (n + 1 > n)

Built on top of #2678

Part 1

Changes the color of the shell without changing the components. The goal of this PR is to move closer to the final design without making the experience worse. (n + 1 > n)

Implementation detail: Created a new VSCode theme that matches our design

Using it in embed. Had to modify a few components (2) to use the right keys

Part 2

Changes the structure of the sidebar by adding foldable sections + redesigned the sandbox info tab

Added stats to the sandbox info section

Demo

https://pr2731.build.csb.dev/embed/5pj49

What steps did you take to test this?

• Testing embed applies new styles
• Testing sandbox remains the same

Checklist

• [NA] Documentation
• Testing
• Ready to be merged
• [NA] Added myself to contributors table

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/codesandbox/codesandbox-client/p96it9lj3
🌍 Preview: https://codesandbox-client-git-embed-sidebar.codesandbox1.now.sh

[siddharthkp]

@DannyRuchtie Quick question:

The redesign also introduces stats on an embedded sandbox. Should clicking on the like/fork icon trigger an action?

(for comparison, the heart on app triggers a like, the fork doesn't do anything)

[DannyRuchtie]

It would be nice!

[siddharthkp]

It would be nice!

• Good to have?

or

• It's silly to show the icons without an action because it's breaks expectation

[DannyRuchtie]

Let's say it's nice to have.
Not prio #1 but a really nice to have!
currently, we don't have the actions (explore, and viewing someone's sandbox)

[siddharthkp]

@DannyRuchtie Does this look like a good n+1 step to ship?

[CompuIves]

This looks awesome!! A couple things I'd like some discussion on:

1. Do we want to open the files item in the sidebar by default?
2. Does it make sense to have something on hover for the file tabs (in the editor)?

cc @DannyRuchtie

[CompuIves]

Nice that we're using themes here already!

[DannyRuchtie]

1) Do we want to open the files item in the sidebar by default?

Makes sense. But because of the big open in Codesandbox button and logo. It currently looks a bit cluttered.

_

2. Does it make sense to have something on hover for the file tabs (in the editor)?

_
I agree animate font color to white would be nice

Two things:

1. The tabbar height seems to be 35px (should be aligned with the sidebar headers)

2. Font size of the name is 12px (was 11px to small?)

[siddharthkp]

I agree animate font color to white would be nice

sounds good 👍

The tabbar height seems to be 35px (should be aligned with the sidebar headers)

Yep, haven't made my way to the tab bars yet. Does it look worse than what we have on production? Might make sense to wait for consistent heights before merging?

Font size of the name is 12px (was 11px to small?)

Of the sandbox name? I copied from the IDE file where it's 12. Just checked the Embed file to cross check and it's 11px there 😅. Can reduce that to 11

[siddharthkp]

Superseded by #2791