playground: Add left panel and use brand colors #5838
Conversation
|
Current dependencies on/for this PR:
This comment was auto-generated by Graphite. |
|
@charliermarsh feel free to make changes if you don't like specific details. This is just not-designer Micha who tried to follow our brand guideline |
PR Check ResultsEcosystem✅ ecosystem check detected no changes. BenchmarkLinuxWindows |
MichaReiser
force-pushed
the
merge-editor-states
branch
from
d1c2923 to
8e78005
Compare
| )} | ||
| {...otherProps} | ||
| > | ||
| {children} |
There was a problem hiding this comment.
Maybe we should use small caps for this, like the button on the top right of the homepage: https://astral.sh/. Maybe the same font too? Wdyt?
There was a problem hiding this comment.
I copied over some styles from astral. Is it okay to commit the fonts?
| <div className="hidden sm:block"> | ||
| <ShareButton key={edit} onShare={onShare} /> | ||
| </div> | ||
| <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" /> | ||
| <Divider /> |
There was a problem hiding this comment.
Are the dividers different colors? I assume it's just an artifact of the recording or something.
There was a problem hiding this comment.
I don't think so... They all render the same HTML
| type SideBarProps = { | ||
| selected: Tool; | ||
| onSelectTool(tool: Tool): void; | ||
| }; |
There was a problem hiding this comment.
I always just inline single-use definitions like this, e.g.:
export default function SideBar({ selected, onSelectTool }: { selected: Tool, ... } { ... }But it's entirely subjective :)
There was a problem hiding this comment.
I can't do that. 😛
I find it extremely hard to read, always mess up the syntax when writing the types, and you need to refactor them out once you start adding new props.
There was a problem hiding this comment.
...you need to refactor them out once you start adding new props.
Why?
There was a problem hiding this comment.
Lol, don't get me started. I'm more opinionated on that than using nightly :P
There was a problem hiding this comment.
Hahahaha. Okay I'm moving on. But I love "Charlie's style" for prop types.
|
I'm triggered by the juxtaposition of the dark purple (header and sidebar) against the black (editor) but I can take on this burden: 
|
I'm not sure if I made it worse 😅 My idea was to use Black code Galaxy code This would match the light theme where the header and code area have the same background.
Subject: [PATCH] Add right panel
---
Index: playground/src/Editor/MonacoThemes.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/playground/src/Editor/MonacoThemes.tsx b/playground/src/Editor/MonacoThemes.tsx
--- a/playground/src/Editor/MonacoThemes.tsx (revision 6e1b1c0f364b369f0aebe511a0d70a87e5199f66)
+++ b/playground/src/Editor/MonacoThemes.tsx (date 1689751756944)
@@ -389,7 +389,7 @@
"tab.inactiveForeground": "#565b66",
"tab.unfocusedActiveForeground": "#565b66",
"tab.unfocusedInactiveForeground": "#565b66",
- "editor.background": "#0b0e14",
+ "editor.background": "#261230",
"editor.foreground": "#bfbdb6",
"editorLineNumber.foreground": "#6c738099",
"editorLineNumber.activeForeground": "#6c7380e6",
@@ -408,7 +408,7 @@
"editor.findMatchHighlightBorder": "#5f4c7266",
"editor.findRangeHighlightBackground": "#6c598040",
"editor.rangeHighlightBackground": "#6c598033",
- "editor.lineHighlightBackground": "#131721",
+ "editor.lineHighlightBackground": "#30173D",
"editorLink.activeForeground": "#e6b450",
"editorWhitespace.foreground": "#6c738099",
"editorIndentGuide.background": "#6c738033",
Index: playground/src/Editor/SideBar.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/playground/src/Editor/SideBar.tsx b/playground/src/Editor/SideBar.tsx
--- a/playground/src/Editor/SideBar.tsx (revision 6e1b1c0f364b369f0aebe511a0d70a87e5199f66)
+++ b/playground/src/Editor/SideBar.tsx (date 1689751464419)
@@ -10,7 +10,7 @@
export default function SideBar({ selected, onSelectTool }: SideBarProps) {
return (
- <ul className="w-12 flex-initial border-r bg-galaxy flex flex-col items-stretch">
+ <ul className="w-12 flex-initial border-r bg-space flex flex-col items-stretch">
<SideBarEntry
title="Source"
onClick={() => onSelectTool("Source")}
|
MichaReiser
force-pushed
the
left-panel
branch
2 times, most recently
from
6e1b1c0 to
fd4d6b7
Compare
|
Let's run with what you had initially, I need to think on it a bit more and maybe play around with it but I def don't want to block shipping. |
Feel free to delegate the changes once you know how you want them to be. I enjoyed this a lot (feel free to do it yourself, if you find it fun too) |
Summary
This PR uses Astral's brand color in the playground more consistently and adds a left panel to switch between file and settings.
Test Plan
Screencast.from.2023-07-17.19-35-11.webm
I promise it shows an error when the settings file contains a syntax errors. It just happens that it wasn't part of the selection that I recorded.