Replace all buttons with shadcn buttons #65
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -268,22 +267,6 @@ const useStyles = makeStyles((theme: Theme) => | |||
| height: "60vh", | |||
| width: "100%", | |||
| }, | |||
| hideTextOnMed: { | |||
There was a problem hiding this comment.
This is replaced by className="hidden md:inline" on the spans that wrap the text.
| @@ -11,8 +11,7 @@ import { useZedTerminalService } from "../spicedb-common/services/zedterminalser | |||
| import { parseValidationYAML } from "../spicedb-common/validationfileformat"; | |||
| import { LinearProgress, Tab, Tabs, Tooltip } from "@material-ui/core"; | |||
| import AppBar from "@material-ui/core/AppBar"; | |||
| import Button from "@material-ui/core/Button"; | |||
| import ButtonGroup from "@material-ui/core/ButtonGroup"; | |||
There was a problem hiding this comment.
I decided to remove these - I think it looks fine with just the buttons as they are.
| @@ -295,18 +278,6 @@ const useStyles = makeStyles((theme: Theme) => | |||
| gridTemplateColumns: "1fr auto", | |||
| alignItems: "center", | |||
| }, | |||
| btnAccept: { | |||
There was a problem hiding this comment.
Replaced these with variants
| size="small" | ||
| href={AppConfig().discord.inviteUrl} | ||
| startIcon={ | ||
| <Button asChild variant="link" size="sm"> |
There was a problem hiding this comment.
asChild retains the styling of a button but renders the child as the primary element, which makes links behave as expected.
the link variant gives some nice styling. I don't think we should use this for all links, but it looks nice and works well for the buttonlinks we've got.
| <a | ||
| href={AppConfig().discord.inviteUrl} | ||
| target="_blank" | ||
| rel="noreferrer" |
There was a problem hiding this comment.
noreferrer isn't necessary but is generally recommended when opening new tabs. It prevents the target tab from gaining context about the parent.
| className={classes.hideTextOnMed} | ||
| size="small" | ||
| href={AppConfig().discord.inviteUrl} | ||
| startIcon={ |
There was a problem hiding this comment.
startIcon is moot - you just put it as the first child of a shadcn button.
| [ | ||
| DataStoreItemKind.ASSERTIONS, | ||
| DataStoreItemKind.EXPECTED_RELATIONS, | ||
| ].includes(currentItem.kind) && ( |
There was a problem hiding this comment.
Modified the conditional to be this rather than separate conditionals that render the same thing
tstirrat15
force-pushed
the
replace-buttons-with-shadcn-buttons
branch
from
21bbecf to
90db38a
Compare
tstirrat15
force-pushed
the
replace-buttons-with-shadcn-buttons
branch
from
90db38a to
868e54c
Compare
Description
Part of migrating off of Material UI. This seemed like a piece of work that was both big enough and small enough.
Changes
Will annotate.
Testing
Review. See that buttons look fine and work as expected.