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

Add Tailwind #543

Merged
merged 7 commits into from
Aug 12, 2024
Merged

Add Tailwind #543

merged 7 commits into from
Aug 12, 2024

Conversation

kmcginnes
Copy link
Collaborator

@kmcginnes kmcginnes commented Aug 8, 2024

Description

Tailwind CSS is a much better fit for this project than Emotion CSS. It's easier to code review, easier to refactor and split components, results in smaller CSS bundles, is more accepted by the community, and is collated with the components themselves rather than separate files.

I've configured the Tailwind theme to have the same values as the original Graph Explorer theme, so visually, nothing has changed. Once everything is converted over we can consider changing the theme values back to more Tailwind defaults.

To start off the transition, I converted the Workspace components and ModuleContainer components. These are root level components for the general Graph Explorer layout. This works as a great test case to make sure Tailwind has what we need for the conversion and the theme is configured properly.

I made a few small style changes that improve the layout a bit.

  • Removed the double bottom border for the top nav bar
  • Added a small gap between actions in ModuleContainerHeader
  • Added small vertical padding in ModuleContainerHeader so controls won't visually "hit the edge"
  • Modified entity filter max heights too more easily see content on small screens
  • Fixed horizontal padding in sidebar panels
  • Removed unused variants and components

Validation

  • Smoke test full app, especially sidebar and workspace layouts

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0
    license.
  • I have run pnpm checks to ensure code compiles and meets standards.
  • I have run pnpm test to check if all tests are passing.
  • I have covered new added functionality with unit tests if necessary.
  • I have added an entry in the Changelog.md.

@kmcginnes kmcginnes force-pushed the tailwind branch 3 times, most recently from 491029b to 3b2fee4 Compare August 9, 2024 01:36
@kmcginnes kmcginnes marked this pull request as ready for review August 9, 2024 01:41
@kmcginnes kmcginnes force-pushed the tailwind branch 2 times, most recently from d322340 to 8bd9902 Compare August 9, 2024 16:32
@kmcginnes kmcginnes requested a review from michaelnchin August 9, 2024 16:35
michaelnchin
michaelnchin previously approved these changes Aug 9, 2024
@kmcginnes kmcginnes merged commit b5ec5eb into aws:main Aug 12, 2024
1 check passed
@kmcginnes kmcginnes deleted the tailwind branch August 12, 2024 14:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants