From 65bec89d3cb959ba905d51ae9f232627d97a2244 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 11 Feb 2025 09:33:27 +0100
Subject: [PATCH] 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)
---
 frontend/src/themes/app.css  |  8 +-------
 frontend/src/themes/theme.ts | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 8 deletions(-)

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: {