From a27e1342d86f8ea56f8b0c5f4a325ac571c190de Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Tue, 21 Apr 2020 13:07:33 -0600
Subject: [PATCH] Use Theme and Styles provider to just flip all of the styles
---
__tests__/src/components/App.test.js | 7 ++++---
package.json | 2 ++
src/components/App.js | 28 ++++++++++++++++++----------
3 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js
index 512bbc72b..19b5827ed 100644
--- a/__tests__/src/components/App.test.js
+++ b/__tests__/src/components/App.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
import Fullscreen from 'react-full-screen';
import AccessTokenSender from '../../../src/containers/AccessTokenSender';
import AuthenticationSender from '../../../src/containers/AuthenticationSender';
@@ -27,7 +27,8 @@ function createWrapper(props) {
describe('App', () => {
it('should render all needed elements ', () => {
const wrapper = createWrapper();
- expect(wrapper.find(MuiThemeProvider).length).toBe(1);
+ expect(wrapper.find(ThemeProvider).length).toBe(1);
+ expect(wrapper.find(StylesProvider).length).toBe(1);
expect(wrapper.find(Fullscreen).length).toBe(1);
expect(wrapper.find('Suspense').length).toBe(1);
expect(wrapper.find(AuthenticationSender).length).toBe(1);
@@ -36,7 +37,7 @@ describe('App', () => {
it('sets up a theme based on the config passed in merged w/ MaterialUI', () => {
const wrapper = createWrapper();
- const { theme } = wrapper.find(MuiThemeProvider).props();
+ const { theme } = wrapper.find(ThemeProvider).props();
expect(theme.palette.type).toEqual('light');
expect(theme.typography.useNextVariants).toBe(true);
expect(Object.keys(theme).length).toBeGreaterThan(10);
diff --git a/package.json b/package.json
index ccb4174a4..13f8f2bbb 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
"immutable": "^4.0.0-rc.12",
"intersection-observer": "^0.7.0",
"isomorphic-unfetch": "^3.0.0",
+ "jss": "^10.1.1",
+ "jss-rtl": "^0.3.0",
"lodash": "^4.17.11",
"manifesto.js": "^4.0.1",
"normalize-url": "^4.2.0",
diff --git a/src/components/App.js b/src/components/App.js
index ca4f0da97..1a125a4c1 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,7 +1,11 @@
import React, { Component, lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import {
+ ThemeProvider, StylesProvider, createMuiTheme, jssPreset,
+} from '@material-ui/core/styles';
import Fullscreen from 'react-full-screen';
+import { create } from 'jss';
+import rtl from 'jss-rtl';
import { I18nextProvider } from 'react-i18next';
import { LiveAnnouncer } from 'react-aria-live';
import createI18nInstance from '../i18n';
@@ -62,15 +66,19 @@ export class App extends Component {
>
<I18nextProvider i18n={this.i18n}>
<LiveAnnouncer>
- <MuiThemeProvider theme={createMuiTheme(theme)}>
- <AuthenticationSender />
- <AccessTokenSender />
- <Suspense
- fallback={<div />}
- >
- <WorkspaceArea />
- </Suspense>
- </MuiThemeProvider>
+ <ThemeProvider
+ theme={createMuiTheme(theme)}
+ >
+ <StylesProvider jss={create({ plugins: [...jssPreset().plugins, rtl()] })}>
+ <AuthenticationSender />
+ <AccessTokenSender />
+ <Suspense
+ fallback={<div />}
+ >
+ <WorkspaceArea />
+ </Suspense>
+ </StylesProvider>
+ </ThemeProvider>
</LiveAnnouncer>
</I18nextProvider>
</Fullscreen>
--
GitLab