1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

chore(1-3356): make mui buttons respect font size changes (#9275)

Makes the MUI buttons use `body1.fontSize` for their own font size.

Turns out we had a hardcoded `16px` in the `app.css` file, which made it
hard to override. This change removes mui button styling in `app.css`
and puts it into the `theme.ts` file instead.

Also updates the border radius to match the one we use in the theme
(from 3px to 4px). It's a subtle change:

before:

![image](https://github.com/user-attachments/assets/a6f94250-9b4b-43e0-aa65-280f3fa007bb)


after:

![image](https://github.com/user-attachments/assets/3ef205c8-8119-4bf1-9541-39371b26dda9)
This commit is contained in:
Thomas Heartman 2025-02-11 09:33:27 +01:00 committed by GitHub
parent fd1ad5ac5b
commit 65bec89d3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 8 deletions

View File

@ -27,12 +27,6 @@ button {
margin: 0;
}
.MuiButton-root {
border-radius: 3px;
text-transform: none;
font-size: 16px;
}
.skeleton {
position: relative;
overflow: hidden;
@ -161,7 +155,7 @@ input.hide-clear[type="search"]::-webkit-search-results-decoration {
/*
This style is to hide the error message block from "vanilla-jsoneditor" package.
The package has another minmal way to show error inline with the editor. And so we are hiding this block
The package has another minimal way to show error inline with the editor. And so we are hiding this block
which shows at the bottom of the editor and does not have the best UX - because it shows errors even as user
is typing in the editor.
*/

View File

@ -18,7 +18,10 @@ export const baseTheme = {
fontWeightBold: '700',
fontWeightMedium: '700',
allVariants: { lineHeight: 1.4 },
button: { lineHeight: 1.75 },
button: {
fontSize: `${15 / 16}rem`,
lineHeight: 1.75,
},
h1: {
fontSize: '1.5rem',
lineHeight: 1.875,
@ -332,6 +335,16 @@ export const lightTheme = createTheme({
},
},
// Buttons
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
borderRadius: theme.shape.borderRadius,
textTransform: 'none',
}),
},
},
// Links
MuiLink: {
styleOverrides: {