Skip to content

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
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
Contributor

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
Contributor

@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

3 participants