Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟 🎨 Connector Builder light yaml editor theme #19100

Merged
merged 7 commits into from
Nov 9, 2022

Conversation

lmossman
Copy link
Contributor

@lmossman lmossman commented Nov 8, 2022

What

Now that the Airbyte UI's theme has been updated to be a bit brighter, I felt that the Connector Builder yaml editor's dark theme no longer fit well with the rest of the Airbyte UI's colors.

This PR adds a new "airbyte-light" theme to our wrapped monaco editor and uses that in the connector builder, so that it matches better with Airbyte's new theme.

How

Defining a new monaco editor theme in code, exporting colors from the scss file.

Screenshot from BEFORE these changes:
Screen Shot 2022-11-07 at 3 44 05 PM

Screenshot AFTER these changes:
Screen Shot 2022-11-07 at 5 37 39 PM

🚨 User Impact 🚨

New look for embedded yaml editor in connector builder

@github-actions github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Nov 8, 2022
@lmossman lmossman marked this pull request as ready for review November 8, 2022 01:38
@lmossman lmossman requested a review from a team as a code owner November 8, 2022 01:38
@lmossman lmossman requested a review from timroes November 8, 2022 01:38
@@ -15,7 +14,7 @@ const queryClient = new QueryClient({

const StoreProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
{/* <ReactQueryDevtools initialIsOpen={false} position="bottom-right" /> */}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specific reason we commented this out?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, didn't mean to commit that. I had just commented it out while taking a screenshot to not detract from the color-focused demonstration :p

Will undo this

Copy link
Collaborator

@timroes timroes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Except the removal of the ReactQueryDeveloper mode looks fine for me. Once that's restored Code LGTM

@lmossman lmossman merged commit 0079620 into master Nov 9, 2022
@lmossman lmossman deleted the lmossman/light-yaml-editor-theme branch November 9, 2022 00:12
akashkulk pushed a commit that referenced this pull request Dec 2, 2022
* switch to light theme for yaml editor

* adjust colors again

* rename colors

* fix config menu theme

* use gradient again for background

* undo change to comment out react query dev tools
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp area/platform issues related to the platform
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants