From 95ea391cc1de40974b6f87f3d8b3687ffda85255 Mon Sep 17 00:00:00 2001
From: Raghunandan Balachandran <raghunandan@spotify.com>
Date: Wed, 5 Feb 2020 14:47:09 +0100
Subject: [PATCH] remove createGlobalStyles from theme

---
 frontend/packages/app/src/App.tsx             | 21 +++++++++++++-----
 frontend/packages/core/src/index.ts           |  2 --
 .../packages/core/src/theme/BackstageTheme.js | 22 +------------------
 .../LoginComponent/LoginComponent.tsx         |  2 +-
 4 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index 0f22c76671..a814c94a57 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/frontend/packages/app/src/App.tsx
@@ -6,7 +6,6 @@ import {
   InfoCard,
   Page,
   theme,
-  withGlobalStyles,
 } from '@backstage/core';
 import helloWorld, { MyComponent } from '@backstage/plugin-hello-world';
 //import PageHeader from './components/PageHeader';
@@ -25,6 +24,20 @@ import SideBar from './components/SideBar';
 import entities from './entities';
 
 const useStyles = makeStyles(theme => ({
+  '@global': {
+    html: {
+      height: '100%',
+      fontFamily: theme.typography.fontFamily,
+    },
+    body: {
+      height: '100%',
+      fontFamily: theme.typography.fontFamily,
+    },
+    a: {
+      color: 'inherit',
+      textDecoration: 'none',
+    },
+  },
   root: {
     display: 'grid',
     // FIXME: Don't used a fixed width here
@@ -95,8 +108,6 @@ const AppShell: FC<{}> = ({ children }) => {
   );
 };
 
-const AppContent = withGlobalStyles(AppShell);
-
 const app = createApp();
 
 app.registerEntityKind(...entities);
@@ -107,7 +118,7 @@ const App: FC<{}> = () => {
   return (
     <CssBaseline>
       <ThemeProvider theme={BackstageTheme}>
-        <AppContent>
+        <AppShell>
           <Router>
             <Switch>
               <Route path="/login">
@@ -118,7 +129,7 @@ const App: FC<{}> = () => {
               </Route>
             </Switch>
           </Router>
-        </AppContent>
+        </AppShell>
       </ThemeProvider>
     </CssBaseline>
   );
diff --git a/frontend/packages/core/src/index.ts b/frontend/packages/core/src/index.ts
index 45110734fb..5619dab3e8 100644
--- a/frontend/packages/core/src/index.ts
+++ b/frontend/packages/core/src/index.ts
@@ -9,5 +9,3 @@ export { default as InfoCard } from '../src/layout/InfoCard';
 export { default as ErrorBoundary } from '../src/layout/ErrorBoundary';
 
 export { default as BackstageTheme } from '../src/theme/BackstageTheme';
-export { withGlobalStyles } from '../src/theme/BackstageTheme';
-
diff --git a/frontend/packages/core/src/theme/BackstageTheme.js b/frontend/packages/core/src/theme/BackstageTheme.js
index fbf521abe0..1c0f4cd2b7 100644
--- a/frontend/packages/core/src/theme/BackstageTheme.js
+++ b/frontend/packages/core/src/theme/BackstageTheme.js
@@ -1,4 +1,4 @@
-import { createMuiTheme, withStyles } from '@material-ui/core';
+import { createMuiTheme } from '@material-ui/core';
 import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
 import { blue, yellow } from '@material-ui/core/colors';
 
@@ -332,24 +332,4 @@ const BackstageTheme = { ...extendedTheme, ...createOverrides(extendedTheme) };
 
 // Temporary workaround for files incorrectly importing the theme directly
 export const V1 = BackstageTheme;
-
-// Default styles for the application other than the built in mui components
-const styles = theme => ({
-  '@global': {
-    html: {
-      height: '100%',
-      fontFamily: theme.typography.fontFamily,
-    },
-    body: {
-      height: '100%',
-      fontFamily: theme.typography.fontFamily,
-    },
-    a: {
-      color: 'inherit',
-      textDecoration: 'none',
-    },
-  },
-});
-
-export const withGlobalStyles = withStyles(styles);
 export default BackstageTheme;
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
index 31caa7d4db..8826eceda7 100644
--- a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
+++ b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
@@ -23,7 +23,7 @@ const LoginComponent: FC<{}> = () => {
         style={{ marginTop: '24px', marginBottom: '24px' }}
       >
         <Button
-          variant="outlined"
+          variant="contained"
           color="primary"
           style={{ textTransform: 'none' }}
         >