Skip to content

Update to new color scheme#1180

Merged
jerelmiller merged 285 commits intomainfrom
update-color-scheme
Jan 24, 2024
Merged

Update to new color scheme#1180
jerelmiller merged 285 commits intomainfrom
update-color-scheme

Conversation

@jerelmiller
Copy link
Copy Markdown
Member

@jerelmiller jerelmiller commented Jan 8, 2024

Updates the dev tools to the new Apollo branding and color scheme. While working through this, I saw some opportunities for improvement in the layout and hierarchy so this contains some refactors of existing components to account for these changes.

Because I touched nearly every style in the app, this PR also full migrates to Tailwind and away from emotion for styling.

Closes #1094

Screenshots

Screenshot 2024-01-12 at 11 08 44 AM Screenshot 2024-01-12 at 11 09 00 AM Screenshot 2024-01-12 at 11 09 08 AM Screenshot 2024-01-12 at 11 09 22 AM Screenshot 2024-01-12 at 11 09 41 AM Screenshot 2024-01-12 at 11 10 06 AM Screenshot 2024-01-12 at 11 10 16 AM

Narrow screens
Screenshot 2024-01-12 at 11 11 02 AM

Light mode
Screenshot 2024-01-12 at 11 13 10 AM
Screenshot 2024-01-12 at 11 13 18 AM

Comment thread src/application/components/Cache/__tests__/Cache.test.tsx Outdated
Comment thread src/application/components/Explorer/Explorer.tsx Outdated
Comment thread src/application/components/Explorer/GraphRefModal.tsx Outdated
Comment thread src/application/components/Explorer/GraphRefModal.tsx Outdated
Comment thread src/application/components/Explorer/GraphRefModal.tsx
Comment on lines +44 to +49
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Do these actually do something on a Fragment?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I thought this too, but this is actually the recommendation straight from Headless UI: https://headlessui.com/react/dialog#transitions

Comment thread src/application/components/CodeBlock.tsx Outdated
Comment thread src/application/components/EmptyMessage.tsx Outdated
Comment thread src/application/App.tsx Outdated
Comment thread src/extension/devtools/panel.html Outdated
Copy link
Copy Markdown
Member

@phryneas phryneas left a comment

Choose a reason for hiding this comment

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

This looks very good already - my comments are mostly nitpicks.

Caveat: I only tested this in Chrome (Firefox didn't start for me today although it usually works), and I'm not a tailwind expert, so a lot of this is way over my level of expertise.

Copy link
Copy Markdown
Contributor

@alessbell alessbell left a comment

Choose a reason for hiding this comment

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

Very excited to get this out there - so many nice UX upgrades, and tech debt removed at the same time 🎉🎉🎉

Comment thread .eslintrc.js
root: true,
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint", "testing-library", "jest-dom", "@emotion"],
plugins: ["@typescript-eslint", "testing-library", "jest-dom"],
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🙏

Comment thread src/application/App.tsx
Comment thread src/application/components/EmptyMessage.tsx Outdated
Comment thread src/application/components/Modal/Modal.tsx Outdated
Comment thread src/application/components/Queries/RunInExplorerButton.tsx Outdated
@jerelmiller jerelmiller merged commit 3a5d8dd into main Jan 24, 2024
@jerelmiller jerelmiller deleted the update-color-scheme branch January 24, 2024 22:35
@github-actions github-actions bot mentioned this pull request Jan 24, 2024
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.

Finish Tailwind migration

3 participants