Updated tutorial styling

[mikewheaton]

Updates the styling of the tutorial demo to match the latest Figma design. I went with the dark option, but we can always change that to light or have it be based on the user's preference.

In order to keep the demos focused on the functionality over styling, I've targeted styles based on element names rather than by adding classes. This is a somewhat fragile approach, as any change to the elements (e.g. changing a span to a div) can prevent the styles from being applied. But it's a good tradeoff for a demo where we want the JSX to be as clean as possible.

I've added a /shared folder with a global reset and CSS variables for colors, fonts, spacing, etc. The idea is to use this across all of the demos to reduce duplicate code, keep the demos consistent, and make updates easier in the future.

Before

After

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
0-hello-convex	❌ Failed (Inspect)			Feb 2, 2023 at 2:52PM (UTC)
convex-demos	❌ Failed (Inspect)			Feb 2, 2023 at 2:52PM (UTC)

[mikewheaton]

I tried updating the Vercel project by renaming it to 'convex-demos' and using 'tutorial' as the root directory. But we're getting build errors related to the --beta-key option: https://vercel.com/convex-dev/convex-demos/GBuoLp2XCKvRSexEDN2nB1GdH7ov

Since this is a monorepo I'm not actually sure how we want to handle deployments, or if it's necessary at all.

[mikewheaton]

Omg that is so much better!

A few thoughts on the implementation:

1. I'm not sure we can use a shared/styles.css file like this because we sync the tutorial into the demos repo at https://github.com/get-convex/convex-demos and it's own repo at https://github.com/get-convex/convex-tutorial. I suspect this will break during the syncing and maybe its easier to define the colors/sizes in the same css file?
2. We'll want to also update the other demos soon (could be a different PR). It should be mostly easy (most of them are just the tutorial with some tweaks). Hopefully this isn't too much work?

Ah interesting, I didn't realize the repos were connected like that. I'll go ahead and move all the styles within /tutorial for now. Worst case, we can always have a file duplicated across each of these packages and just be sure to update them all together when a change is needed.

I'll be going through all of the demos and updating the styles, just wanted to keep this PR small to start with.

[ianmacartney]

@alexcole this was merged but overwritten by the new code deploy. What's the right way to upstream these changes going forward?

[alexcole]

Oh I missed what repo this was in! We should be merging this into the main convex repo. This one is synced to match on deploys