[Tech] Clean up MUI theming (#4803)

Clean up MUI theming

We can use MUI's own theming functionality to set the font family & colors to
use once. Doing it like this means MUI components will look right everywhere

There are probably more rules that can be removed now. I wasn't sure on how to
test most of them, so I just left them alone

Author: CommandMC

src/frontend/App.tsx

@@ -31,7 +31,18 @@ function Root() {
 
   const theme = createTheme({
     direction: isRTL ? 'rtl' : 'ltr',
+    typography: {
+      fontFamily: 'var(--primary-font-family)'
+    },
     components: {
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            color: 'var(--text-default)',
+            backgroundColor: 'var(--background)'
+          }
+        }
+      },
       MuiTooltip: {
         styleOverrides: {
           tooltip: {

src/frontend/components/UI/Dialog/components/Dialog.tsx

@@ -25,7 +25,6 @@ interface DialogProps {
 
 const StyledPaper = styled(Paper)(() => ({
   backgroundColor: 'var(--modal-background)',
-  color: 'var(--text-default)',
   maxWidth: '100%',
   '&:has(.settingsDialogContent):not(:has(.logs-wrapper))': {
     height: '80%'

src/frontend/components/UI/Dialog/components/DialogHeader.tsx

@@ -10,7 +10,6 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({ children }) => {
   return (
     <DialogTitle
       sx={{
-        fontFamily: 'var(--primary-font-family)',
         fontSize: 'var(--text-xl)',
         fontWeight: 'var(--bold)',
         paddingLeft: 0

src/frontend/components/UI/SelectField/index.css

@@ -10,7 +10,6 @@
   width: 100%;
   height: 40px;
   background: var(--input-background);
-  font-family: var(--primary-font-family), 'Noto Color Emoji';
   font-weight: normal;
   font-size: var(--text-md);
   color: var(--text-secondary);
@@ -42,10 +41,6 @@
 .MuiPopover-root .MuiPaper-root {
   color: var(--text-secondary);
   background-color: var(--input-background);
-
-  .MuiMenuItem-root {
-    font-family: var(--primary-font-family);
-  }
 }
 
 .selectStyle {

src/frontend/screens/Library/components/ContextMenu/index.css

@@ -8,10 +8,6 @@
   border-radius: 10px;
 }
 
-.contextMenu > .MuiPaper-root > .MuiMenu-list > .MuiMenuItem-root {
-  font-family: var(--primary-font-family);
-}
-
 .contextMenu > .MuiPaper-root > .MuiMenu-list > .MuiMenuItem-root:hover {
   text-decoration: none;
   background-color: var(--navbar-active-background);

src/frontend/screens/Settings/sections/SystemInfo/index.scss

@@ -1,9 +1,4 @@
 .systeminfo {
-  hr {
-    width: 100%;
-    background-color: var(--text-default);
-  }
-
   .logo {
     height: 100%;
     zoom: 2;
@@ -19,15 +14,6 @@
     }
   }
 
-  .MuiPaper-root {
-    color: var(--text-default);
-    background-color: var(--background);
-  }
-
-  .MuiTypography-root {
-    font-family: var(--primary-font-family);
-  }
-
   .MuiLinearProgress-bar {
     background-color: var(--success);
   }