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

🪟 🎨 New design and cleanup for CircleLoader #17582

Merged
merged 3 commits into from
Oct 5, 2022
Merged

Conversation

timroes
Copy link
Collaborator

@timroes timroes commented Oct 4, 2022

What

Improve the design of the StatusIcon circular loader:

Peek.2022-10-04.23-00.mp4
Peek.2022-10-04.23-20.mp4

This also cleans up the CircleLoader component and move it from styled-component to SCSS.

Note: The CSS classes in the snapshots seemed to change just as part of compiling new SCSS. We should exclude them from being matched, but I think that should be separate from this PR.

@timroes timroes requested a review from a team as a code owner October 4, 2022 21:19
@github-actions github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Oct 4, 2022
@timroes timroes added ui/components and removed area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Oct 4, 2022

:export {
// Export colors to be used in SVG gradients
gradientStart: colors.$blue;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ℹ️ linear-gradient doesn't work for fill on SVG elements, thus the gradient still need to be defined in SVG. To get access to the colors in JS, I exported them from here explicitally. They are already exported from the theme.ts file, but I consider this still to be going away once we're removing styled components, so in this case where we'll need to have this export even with SASS, I wanted to make it more explicit.

Copy link
Contributor

@josephkmh josephkmh left a comment

Choose a reason for hiding this comment

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

Just one minor comment, otherwise looks good to me 👍

Copy link
Contributor

@edmundito edmundito left a comment

Choose a reason for hiding this comment

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

Tested locally and LGTM

@github-actions github-actions bot added the area/platform issues related to the platform label Oct 5, 2022
@timroes timroes merged commit 515f1e5 into master Oct 5, 2022
@timroes timroes deleted the tim/circular-loader branch October 5, 2022 11:50
jhammarstedt pushed a commit to jhammarstedt/airbyte that referenced this pull request Oct 31, 2022
* New design and cleanup for CircleLoader

* Adjust snapshots
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 team/platform-move ui/components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants