Skip to content

fix: button styling#101

Merged
tstirrat15 merged 1 commit intomainfrom
fix-button-styling
Feb 5, 2026
Merged

fix: button styling#101
tstirrat15 merged 1 commit intomainfrom
fix-button-styling

Conversation

@tstirrat15
Copy link
Contributor

Description

In #99, I accidentally committed some in-progress work on swapping out material UI buttons for ShadCN buttons that left the UI in a kind of jank state:

image

This fixes that and finishes the migration.

Changes

  • Remove MaterialUI Button and Toggle usage from FullPlayground
  • Replace with ShadCN equivalents
  • Style appropriately

Testing

Review. Compare this preview to https://playground-git-temp-backout-authzed.vercel.app/ to see that things look good.

@vercel
Copy link

vercel bot commented Feb 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
playground Ready Ready Preview, Comment Feb 5, 2026 8:43pm

Request Review

Copy link
Contributor Author

@tstirrat15 tstirrat15 left a comment

Choose a reason for hiding this comment

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

See comments

Copy link
Contributor Author

Choose a reason for hiding this comment

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

New ShadCN components; don't need to review these

Comment on lines -195 to -199
docsLink: {
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This logic is now handled by tailwind classes on a span in DocLink.

Comment on lines -276 to -281
btnAccept: {
"& .MuiSvgIcon-root": {
fill: theme.palette.success.main,
},
color: theme.palette.getContrastText(theme.palette.success.main),
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is now handled with button variants

) => {
const type = value ? value.toString() : "grid";
if (type === "grid" && services.problemService.invalidRelationships.length > 0) {
const handleChangeRelationshipEditor = (value: string) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The ToggleGroup from ShadCN has a nicer handle with onValueChange, so we don't need the stuff that's checking for a string value

<DISCORD viewBox="0 0 71 55" style={{ height: "1em", width: "1em" }} />
{/* TODO: make sure this works and then do it elsewhere */}
<span className="md:hidden">Discuss on Discord</span>
<span className="hidden md:inline">Discuss on Discord</span>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the idiom for "hide text on small viewports"

title="Grid Editor"
disabled={services.problemService.invalidRelationships.length > 0}
>
<Tooltip title="Grid Editor">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Don't need Tooltips if you use the native title HTML feature

@tstirrat15 tstirrat15 merged commit 026605f into main Feb 5, 2026
5 checks passed
@github-actions github-actions bot locked and limited conversation to collaborators Feb 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments