diff --git a/frontend/src/themes/app.css b/frontend/src/themes/app.css index 3377f5464e..ffea84e478 100644 --- a/frontend/src/themes/app.css +++ b/frontend/src/themes/app.css @@ -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. */ diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index dacdfbd0c7..7fc0b85aba 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -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: {