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

styling: sync tab styling with Figma design #595

Merged
merged 16 commits into from
Jan 15, 2025
Merged

styling: sync tab styling with Figma design #595

merged 16 commits into from
Jan 15, 2025

Conversation

0xAlunara
Copy link
Collaborator

@0xAlunara 0xAlunara commented Jan 13, 2025

  • I tried to match the Figma design as much as possible.
  • I've added some transitions.
  • Decided to use a ::after pseudo element for the borders, see docs in mui-tabs.ts for the reasons why.
  • Default tabswitcher size changed to small, text variants when not configured match tabswitcher size (small, medium or large).
  • Storybook tab page has only one story, play around with variant & sizes.
  • Also affects disclaimer page tabs and navigation pages tab in the header.

Man, this one was finicky as HELL, I spent a lot of times getting it right. Looked very easy but the details took 90% of the time. Haven't look at scrolling yet.

Copy link

vercel bot commented Jan 13, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
curve-dapp ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 3:31pm
curve-dapp-crvusd ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 3:31pm
curve-dapp-dao ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 3:31pm
curve-dapp-lend ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 3:31pm
curve-dapp-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 3:31pm

0xtutti
0xtutti previously approved these changes Jan 13, 2025
Copy link
Contributor

@0xtutti 0xtutti left a comment

Choose a reason for hiding this comment

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

Inverted theme is displaying funny, but it's not an issue as there's currently no setup where tabs would need to be inverted.

@0xAlunara 0xAlunara merged commit 49ee97e into main Jan 15, 2025
11 checks passed
@0xAlunara 0xAlunara deleted the styling/tabs branch January 15, 2025 17:02
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.

4 participants