From e5472c46fc64d323a15b50bd4c1468a7ed0a2c7e Mon Sep 17 00:00:00 2001
From: Raghunandan Balachandran <raghunandan@spotify.com>
Date: Wed, 5 Feb 2020 13:53:20 +0100
Subject: [PATCH] remove tinycolor. remove muithemeprovider

---
 frontend/packages/app/src/App.tsx             | 40 +++++++------------
 frontend/packages/core/package.json           |  1 -
 frontend/packages/core/src/testUtils/index.js | 15 ++-----
 .../packages/core/src/theme/BackstageTheme.js |  5 +--
 4 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index 0d82f79aca..cd85cb85eb 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/frontend/packages/app/src/App.tsx
@@ -12,15 +12,9 @@ import {
   Link as RouterLink,
 } from 'react-router-dom';
 import { BackstageTheme, withGlobalStyles, theme } from '@backstage/core';
-import { CssBaseline, MuiThemeProvider, makeStyles } from '@material-ui/core';
-import { ThemeProvider } from '@material-ui/styles';
-import { StylesProvider, createGenerateClassName } from '@material-ui/styles';
+import { CssBaseline, ThemeProvider, makeStyles } from '@material-ui/core';
 import HomePageTimer from './components/HomepageTimer';
 
-const generateClassName = createGenerateClassName({
-  productionPrefix: 'stajl',
-});
-
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'grid',
@@ -45,24 +39,20 @@ const useStyles = makeStyles(theme => ({
 const App: FC<{}> = () => {
   return (
     <CssBaseline>
-      <MuiThemeProvider theme={BackstageTheme}>
-        <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider theme={BackstageTheme}>
-            <AppContent>
-              <Router>
-                <Switch>
-                  <Route exact path="/">
-                    <Home />
-                  </Route>
-                  <Route path="/login">
-                    <Login />
-                  </Route>
-                </Switch>
-              </Router>
-            </AppContent>
-          </ThemeProvider>
-        </StylesProvider>
-      </MuiThemeProvider>
+      <ThemeProvider theme={BackstageTheme}>
+        <AppContent>
+          <Router>
+            <Switch>
+              <Route exact path="/">
+                <Home />
+              </Route>
+              <Route path="/login">
+                <Login />
+              </Route>
+            </Switch>
+          </Router>
+        </AppContent>
+      </ThemeProvider>
     </CssBaseline>
   );
 };
diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json
index 7e6782bbb2..9c1016141c 100644
--- a/frontend/packages/core/package.json
+++ b/frontend/packages/core/package.json
@@ -15,7 +15,6 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet":"5.2.1",
-    "tinycolor2": "1.4.1",
     "react-addons-text-content": "0.0.4",
     "recompose": "0.30.0"
   },
diff --git a/frontend/packages/core/src/testUtils/index.js b/frontend/packages/core/src/testUtils/index.js
index ae521780e7..99e94c624d 100644
--- a/frontend/packages/core/src/testUtils/index.js
+++ b/frontend/packages/core/src/testUtils/index.js
@@ -14,10 +14,7 @@ import ErrorBoundary from '../layout/ErrorBoundary';
 export { default as Keyboard } from './Keyboard';
 export { default as mockBreakpoint } from './mockBreakpoint';
 
-export function wrapInTestApp(
-  Component,
-  initialRouterEntries,
-) {
+export function wrapInTestApp(Component, initialRouterEntries) {
   const Wrapper = Component instanceof Function ? Component : () => Component;
 
   return (
@@ -30,16 +27,10 @@ export function wrapInTestApp(
 }
 
 export function wrapInThemedTestApp(component, initialRouterEntries) {
-  const themed = (
-    <MuiThemeProvider theme={V1}>
-      <ThemeProvider theme={V1}>{component}</ThemeProvider>
-    </MuiThemeProvider>
-  );
+  const themed = <ThemeProvider theme={V1}>{component}</ThemeProvider>;
   return wrapInTestApp(themed, initialRouterEntries);
 }
 
 export const wrapInTheme = (component, theme = V1) => (
-  <MuiThemeProvider theme={theme}>
-    <ThemeProvider theme={theme}>{component}</ThemeProvider>
-  </MuiThemeProvider>
+  <ThemeProvider theme={theme}>{component}</ThemeProvider>
 );
diff --git a/frontend/packages/core/src/theme/BackstageTheme.js b/frontend/packages/core/src/theme/BackstageTheme.js
index 5185aa8cd7..fbf521abe0 100644
--- a/frontend/packages/core/src/theme/BackstageTheme.js
+++ b/frontend/packages/core/src/theme/BackstageTheme.js
@@ -1,14 +1,11 @@
 import { createMuiTheme, withStyles } from '@material-ui/core';
 import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
 import { blue, yellow } from '@material-ui/core/colors';
-import tinycolor from 'tinycolor2';
 
 export const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
-  DEFAULT_PAGE_THEME_LIGHT_COLOR: tinycolor('#7C3699')
-    .lighten(50)
-    .toString(),
+  DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',