fix: MUI Theme Base CSS Styles (#9636)

* fix body styles

* fix font size in tables @abailly-akamai

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

Author: bnussman-akamai

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -42,6 +42,7 @@ const useStyles = makeStyles<void, 'linkItem'>()(
       color: '#fff',
       display: 'flex',
       fontFamily: 'LatoWebBold', // we keep this bold at all times
+      fontSize: '1rem',
       opacity: 1,
       position: 'relative',
       transition: theme.transitions.create(['color']),

packages/manager/src/features/Footer/Footer.tsx

@@ -14,6 +14,7 @@ interface Props {
 const useStyles = makeStyles()((theme: Theme) => ({
   container: {
     backgroundColor: theme.bg.main,
+    fontSize: '1rem',
     margin: 0,
     padding: '4px 0px',
     [theme.breakpoints.down('sm')]: {

packages/manager/src/foundations/themes/dark.ts

@@ -552,6 +552,7 @@ export const darkTheme: ThemeOptions = {
   name: 'dark',
   palette: {
     background: {
+      default: customDarkModeOptions.bg.app,
       paper: '#2e3238',
     },
     divider: primaryColors.divider,

packages/manager/src/foundations/themes/light.ts

@@ -1405,6 +1405,9 @@ export const lightTheme: ThemeOptions = {
   },
   name: 'light', // @todo remove this because we leverage pallete.mode now
   palette: {
+    background: {
+      default: bg.app,
+    },
     divider: primaryColors.divider,
     error: {
       dark: '#cd2227',

packages/manager/src/index.tsx

@@ -20,6 +20,7 @@ import LinodeThemeWrapper from './LinodeThemeWrapper';
 import { loadDevTools, shouldEnableDevTools } from './dev-tools/load';
 import './index.css';
 import { queryClientFactory } from './queries/base';
+import CssBaseline from '@mui/material/CssBaseline';
 
 const queryClient = queryClientFactory();
 const store = storeFactory(queryClient);
@@ -58,6 +59,7 @@ const ContextWrapper = () => (
   <ReduxStoreProvider store={store}>
     <QueryClientProvider client={queryClient}>
       <LinodeThemeWrapper>
+        <CssBaseline />
         <React.Suspense fallback={<SplashScreen />}>
           <Switch>
             <Route component={OAuthCallbackPage} exact path="/oauth/callback" />