From 43a5d59225e5de91d4c0e7832191eb9206e84d74 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 11 Feb 2025 10:32:26 +0100
Subject: [PATCH] fix: add legacy button styles (#9283)

Adds the button styles that were removed from `app.css` into the
legacy theme file. These change very slightly when the flag is on, and
because the hardcoded `app.css` styles have been removed, we'll use
the legacy file as fallback.
---
 .../__snapshots__/FeedbackCESForm.test.tsx.snap      |  2 +-
 .../__snapshots__/TagTypeList.test.tsx.snap          |  2 +-
 frontend/src/themes/dark-theme.legacy.ts             |  4 +++-
 frontend/src/themes/theme.legacy.ts                  | 12 +++++++++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
index b3f11a443d..45eafb565c 100644
--- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
@@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
           hidden=""
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1bqn98c-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-l6m2tn-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index 557164a851..dd5892995a 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`renders an empty list correctly 1`] = `
               />
               <button
                 aria-labelledby="useId-0"
-                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1pzmo7x-MuiButtonBase-root-MuiButton-root"
+                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1xfu7h-MuiButtonBase-root-MuiButton-root"
                 disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
diff --git a/frontend/src/themes/dark-theme.legacy.ts b/frontend/src/themes/dark-theme.legacy.ts
index a3bd44de17..87b4e57ce2 100644
--- a/frontend/src/themes/dark-theme.legacy.ts
+++ b/frontend/src/themes/dark-theme.legacy.ts
@@ -39,7 +39,7 @@ const theme = {
         fontWeightBold: '700',
         fontWeightMedium: '700',
         allVariants: { lineHeight: 1.4 },
-        button: { lineHeight: 1.75 },
+        button: { lineHeight: 1.75, fontSize: '16px' },
         h1: {
             fontSize: '1.5rem',
             lineHeight: 1.875,
@@ -597,6 +597,8 @@ export default createTheme({
         MuiButton: {
             styleOverrides: {
                 root: ({ theme }) => ({
+                    borderRadius: '3px',
+                    textTransform: 'none',
                     '&:not(.Mui-disabled).MuiButton-containedPrimary': {
                         backgroundColor: theme.palette.background.alternative,
                         '&:hover': {
diff --git a/frontend/src/themes/theme.legacy.ts b/frontend/src/themes/theme.legacy.ts
index bb3f982d2d..75b3906b6a 100644
--- a/frontend/src/themes/theme.legacy.ts
+++ b/frontend/src/themes/theme.legacy.ts
@@ -31,7 +31,7 @@ export const theme = {
         fontWeightBold: '700',
         fontWeightMedium: '700',
         allVariants: { lineHeight: 1.4 },
-        button: { lineHeight: 1.75 },
+        button: { lineHeight: 1.75, fontSize: '16px' },
         h1: {
             fontSize: '1.5rem',
             lineHeight: 1.875,
@@ -325,6 +325,16 @@ export default createTheme({
             },
         },
 
+        // Buttons
+        MuiButton: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    borderRadius: '3px',
+                    textTransform: 'none',
+                }),
+            },
+        },
+
         // Links
         MuiLink: {
             styleOverrides: {