orc-shared 5.10.2-dev.4 → 5.99.0-dev.2

package/src/components/AppFrame/AppFrame.js

@@ -35,15 +35,15 @@ const useStyles = makeStyles(theme => ({
 	viewPort: props => ({
 		overflow: "hidden",
 		backgroundColor: "white",
-		borderTopLeftRadius: "10px",
-		height: "calc(100% - 40px)",
+		borderTopLeftRadius: theme.spacing(1),
+		height: `calc(100% - ${theme.spacing(4)})`,
 		position: "absolute",
 		bottom: 0,
 		right: 0,
 		display: "flex",
 		flexDirection: "column",
 		transition: "width 0.3s ease-out",
-		width: props.toggleOpen ? "calc(100% - 200px)" : "calc(100% - 50px)",
+		width: props.toggleOpen ? `calc(100% - ${theme.spacing(20)})` : `calc(100% - ${theme.spacing(5)})`,
 	}),
 }));
 

package/src/components/AppFrame/Help.js

@@ -6,13 +6,13 @@ import sharedMessages from "./../../sharedMessages";
 const useStyles = makeStyles(theme => ({
 	helpLink: {
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "12px",
+		fontSize: theme.spacing(1.2),
 		textTransform: "uppercase",
 		color: theme.palette.grey.borders,
-		width: "40px",
+		width: theme.spacing(4),
 		cursor: "pointer",
-		paddingTop: "14px",
-		paddingRight: "10px",
+		paddingTop: theme.spacing(1.4),
+		paddingRight: theme.spacing(1),
 		textDecoration: "none",
 		"&:hover": {
 			color: theme.palette.primary.light,

package/src/components/AppFrame/MenuItem.js

@@ -3,22 +3,14 @@ import { makeStyles } from "@material-ui/core/styles";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import Icon from "../MaterialUI/DataDisplay/Icon";
-
-const getToastColor = (theme, alertType) => {
-	const toastBorderColors = {
-		error: theme.palette.error.main,
-		warn: theme.palette.warning.main,
-		confirm: theme.palette.success.main,
-	};
-	return toastBorderColors[alertType] || "red";
-};
+import { getToastColor } from "../../utils/toastHelper";
 
 const useStyles = makeStyles(theme => ({
 	block: props => ({
 		display: "block",
 		position: "relative",
-		padding: "0 10px",
-		marginBottom: "35px",
+		padding: theme.spacing(0, 1),
+		marginBottom: theme.spacing(3.5),
 		textDecoration: "none",
 		cursor: "pointer",
 		color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
@@ -32,10 +24,10 @@ const useStyles = makeStyles(theme => ({
 
 		return {
 			borderRadius: "50%",
-			border: `4px solid ${toastColor}`,
+			border: `${theme.spacing(0.4)} solid ${toastColor}`,
 			position: "absolute",
 			top: 0,
-			left: "27px",
+			left: theme.spacing(2.7),
 			visibility: "hidden",
 
 			"&.show": {
@@ -49,15 +41,15 @@ const useStyles = makeStyles(theme => ({
 		return {
 			position: "absolute",
 			zIndex: 10000,
-			top: "calc(-10px - 0.7em)",
-			left: "22px",
+			top: `calc(${theme.spacing(-1)} - 0.7em)`,
+			left: theme.spacing(2.2),
 			width: "max-content",
-			borderRadius: "5px",
-			padding: "10px 15px",
-			boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.5)",
+			borderRadius: theme.spacing(0.5),
+			padding: theme.spacing(1, 1.5),
+			boxShadow: `${theme.spacing(0, 0.2, 0.4, 0)} rgba(0, 0, 0, 0.5)`,
 			color: theme.palette.grey.light,
 			backgroundColor: toastColor,
-			fontSize: "11px",
+			fontSize: theme.spacing(1.1),
 			fontWeight: "bold",
 			lineHeight: 1.2,
 			transition: `transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 100ms 50ms ease-out`,
@@ -67,7 +59,7 @@ const useStyles = makeStyles(theme => ({
 			"&::before": {
 				content: "",
 				position: "absolute",
-				top: "calc(10px + 0.2em)",
+				top: `calc(${theme.spacing(1)} + 0.2em)`,
 				left: "-0.9em",
 				border: "solid transparent",
 				borderWidth: "0.4em 0.9em 0.4em 0",
@@ -81,16 +73,16 @@ const useStyles = makeStyles(theme => ({
 		};
 	},
 	menuIcon: props => ({
-		fontSize: "24px",
+		fontSize: theme.spacing(2.4),
 		verticalAlign: "middle",
 		color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
 	}),
 	label: props => ({
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "13px",
+		fontSize: theme.spacing(1.3),
 		verticalAlign: "middle",
 		textTransform: "uppercase",
-		paddingLeft: "10px",
+		paddingLeft: theme.spacing(1),
 		transition: "opacity 0.3s ease-out",
 		opacity: props.showLabel ? 1 : 0,
 	}),

package/src/components/AppFrame/Preferences.js

@@ -27,19 +27,19 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: "#f7f7f7",
 		borderLeft: `1px solid ${theme.palette.grey.borders}`,
 		borderTop: `1px solid ${theme.palette.grey.borders}`,
-		borderTopLeftRadius: "5px",
-		top: "40px",
-		boxShadow: "-3px 2px 5px 0px rgba(0, 0, 0, 0.2)",
+		borderTopLeftRadius: theme.spacing(0.5),
+		top: theme.spacing(4),
+		boxShadow: `${theme.spacing(-0.3, 0.2, 0.5, 0)} rgba(0, 0, 0, 0.2)`,
 		zIndex: 9998,
 		transition: "right 400ms ease-out",
 	},
 	header: {
 		flex: "0 0 auto",
 		borderBottom: `1px solid ${theme.palette.grey.borders}`,
-		borderTopLeftRadius: "5px",
-		padding: "15px 30px",
-		height: "18px",
-		fontSize: "15px",
+		borderTopLeftRadius: theme.spacing(0.5),
+		padding: theme.spacing(1.5, 3),
+		height: theme.spacing(1.8),
+		fontSize: theme.spacing(1.5),
 		fontFamily: theme.typography.button.fontFamily,
 		textTransform: "uppercase",
 		color: theme.palette.primary.main,
@@ -49,8 +49,8 @@ const useStyles = makeStyles(theme => ({
 		flex: "1 1 auto",
 		display: "flex",
 		flexDirection: "column",
-		padding: "20px 30px",
-		fontSize: "12px",
+		padding: theme.spacing(2, 3),
+		fontSize: theme.spacing(1.2),
 	},
 	footer: {
 		flex: "0 0 auto",
@@ -59,12 +59,12 @@ const useStyles = makeStyles(theme => ({
 		justifyContent: "flex-end",
 		backgroundColor: "#ffffff",
 		borderTop: `1px solid ${theme.palette.grey.borders}`,
-		paddingRight: "10px",
-		height: "60px",
+		paddingRight: theme.spacing(1),
+		height: theme.spacing(6),
 	},
 	prefButton: {
-		marginRight: "20px",
-		minWidth: "110px",
+		marginRight: theme.spacing(2),
+		minWidth: theme.spacing(11),
 	},
 	wrapper: {
 		display: "flex",
@@ -139,7 +139,7 @@ export const Preferences = () => {
 	const { show, save, clear, languageOptions, languageSelectProps, applicationOptions, applicationSelectProps } =
 		usePreferenceSetup();
 	return (
-		<Sidepanel in={show} width="380px" timeout={400} className={classes.prefPanel}>
+		<Sidepanel in={show} widthSpacing={38} timeout={400} className={classes.prefPanel}>
 			<Wrapper onClickOutside={clickOutsideHandler}>
 				<div className={classes.header}>
 					<FormattedMessage {...sharedMessages.preferences} />

package/src/components/AppFrame/Sidebar.js

@@ -9,9 +9,9 @@ import { getScopeModuleInformationSelector } from "../../selectors/modules";
 const useStyles = makeStyles(theme => ({
 	bar: {
 		boxSizing: "border-box",
-		paddingTop: "60px",
-		height: "calc(100% - 40px)",
-		width: "200px",
+		paddingTop: theme.spacing(6),
+		height: `calc(100% - ${theme.spacing(4)})`,
+		width: theme.spacing(20),
 		display: "flex",
 		flexDirection: "column",
 		justifyContent: "flex-start",
@@ -19,9 +19,9 @@ const useStyles = makeStyles(theme => ({
 	},
 	logoSvg: {
 		flex: "0 0 auto",
-		margin: "auto 12.5px 7px",
-		height: "25px",
-		width: "25px",
+		margin: `auto ${theme.spacing(1.25, 0.7)}`,
+		height: theme.spacing(2.5),
+		width: theme.spacing(2.5),
 		fillRule: "evenodd",
 		clipRule: "evenodd",
 		fill: "#666666",

package/src/components/AppFrame/Topbar.js

@@ -17,7 +17,7 @@ import { areEqualCaseInsensitive } from "../../utils/comparisonHelper";
 
 const useStyles = makeStyles(theme => ({
 	wrapper: {
-		height: "40px",
+		height: theme.spacing(4),
 		color: theme.palette.text.hint,
 		display: "flex",
 		justifyContent: "space-between",
@@ -32,16 +32,16 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: "#000000",
 		color: theme.palette.primary.light,
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "14px",
+		fontSize: theme.spacing(1.4),
 		textTransform: "uppercase",
-		paddingRight: "20px",
-		paddingLeft: "6px",
+		paddingRight: theme.spacing(2),
+		paddingLeft: theme.spacing(0.6),
 		display: "flex",
 		alignItems: "center",
 	},
 	appLogo: {
-		height: "30px",
-		marginRight: "10px",
+		height: theme.spacing(3),
+		marginRight: theme.spacing(1),
 	},
 	qaContainerColor: {
 		backgroundColor: "#9F0F18",

package/src/components/ApplicationModuleLoader.js

@@ -6,9 +6,9 @@ import {
 	getApplicationModulesSelector,
 	getLoadedModulesScopeSelector,
 } from "../selectors/settings";
-import { Loader } from "./Authenticate";
 import { overtureModule, scopeTypes } from "../constants";
 import { initializeFirstModuleScope } from "../actions/modules";
+import LoadingIcon from "./LoadingIcon";
 
 const ApplicationModuleLoader = ({ children }) => {
 	const dispatch = useDispatch();
@@ -43,7 +43,7 @@ const ApplicationModuleLoader = ({ children }) => {
 	const applicationModuleReady = scopeLoadedFromAllModules && defaultScope != null;
 
 	if (!applicationModuleReady) {
-		return <Loader />;
+		return <LoadingIcon />;
 	}
 
 	return React.Children.only(children);

package/src/components/ApplicationModuleLoader.test.js

@@ -1,14 +1,13 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import { Loader } from "./Authenticate";
 import ApplicationModuleLoader from "./ApplicationModuleLoader";
 import { mount } from "enzyme";
 import { getDefaultScope, getScopes } from "../actions/scopes";
 import sinon from "sinon";
 import { initializeFirstModuleScope } from "../actions/modules";
 import { scopeTypes } from "../constants";
+import LoadingIcon from "./LoadingIcon";
 
 const TestComp = () => {
 	return <div className="test" />;
@@ -66,17 +65,13 @@ describe("ApplicationModuleLoader", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -84,17 +79,13 @@ describe("ApplicationModuleLoader", () => {
 		state = state.setIn(["settings", "loadedModulesScope"], Immutable.fromJS(["moduleA"]));
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -103,11 +94,9 @@ describe("ApplicationModuleLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>
 		);
 
@@ -128,11 +117,9 @@ describe("ApplicationModuleLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>
 		);
 

package/src/components/Authenticate.js

@@ -1,12 +1,23 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp, safeGet } from "../utils";
-import Placeholder from "../components/Placeholder";
+import { makeStyles } from "@material-ui/core/styles";
+import { safeGet } from "../utils";
 import { useSelector } from "react-redux";
 import { unwrapImmutable } from "../utils";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
 import { ERROR, LOGOUT } from "../reducers/request";
 import ApplicationModuleLoader from "./ApplicationModuleLoader";
+import LoadingIcon from "./LoadingIcon";
+
+const useStyles = makeStyles({
+	wrapper: {
+		display: "flex",
+		width: "60%",
+		height: "100%",
+		padding: "0 20vw",
+		flexDirection: "column",
+		justifyContent: "center",
+	},
+});
 
 export const useAuthenticationData = () => ({
 	loading: useSelector(state => state.getIn(["requests", "actives", GET_AUTHENTICATION_PROFILE])),
@@ -15,34 +26,21 @@ export const useAuthenticationData = () => ({
 	needLogin: useSelector(state => state.getIn(["requests", LOGOUT])),
 });
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-export const Loader = withTheme(props => (
-	<Wrapper>
-		<Placeholder icon={getThemeProp(["icons", "loading"], "loading")(props)} animate />
-	</Wrapper>
-));
-
 export const Error = ({ requestError, needLogin }) => {
+	const classes = useStyles();
+
 	if (needLogin) {
 		return (
-			<Wrapper>
+			<div className={classes.wrapper}>
 				<h1>Not logged in</h1>
-			</Wrapper>
+			</div>
 		);
 	}
 	return (
-		<Wrapper>
+		<div className={classes.wrapper}>
 			<h1>{safeGet(requestError, "payload", "message") || "An error occurred"}</h1>
 			Last failing action: <pre>{JSON.stringify(requestError, null, 2)}</pre>
-		</Wrapper>
+		</div>
 	);
 };
 
@@ -50,7 +48,7 @@ const Authenticate = ({ children }) => {
 	const { loading, authedUser, requestError, needLogin } = useAuthenticationData();
 
 	if (loading) {
-		return <Loader />;
+		return <LoadingIcon />;
 	}
 	if (!authedUser) {
 		return <Error {...{ requestError, needLogin }} />;

package/src/components/Authenticate.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Authenticate, { Loader, Wrapper } from "./Authenticate";
+import Authenticate from "./Authenticate";
 import { ERROR, LOGOUT } from "../reducers/request";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
+import LoadingIcon from "./LoadingIcon";
 
 const TestComp = () => {
 	return <div className="test" />;
@@ -64,17 +64,13 @@ describe("Authenticate", () => {
 		state = state.setIn(["requests", "actives", GET_AUTHENTICATION_PROFILE], true);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<Authenticate>
-						<TestComp />
-					</Authenticate>
-				</ThemeProvider>
+				<Authenticate>
+					<TestComp />
+				</Authenticate>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -82,17 +78,13 @@ describe("Authenticate", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<Authenticate applicationModuleReady={false}>
-						<TestComp />
-					</Authenticate>
-				</ThemeProvider>
+				<Authenticate applicationModuleReady={false}>
+					<TestComp />
+				</Authenticate>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<LoadingIcon />,
 		);
 	});
 
@@ -105,10 +97,10 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>Not logged in</h1>
-			</Wrapper>,
+			</div>,
 		);
 	});
 
@@ -127,8 +119,8 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>404 - NotFound</h1>
 				{"Last failing action: "}
 				<pre>
@@ -140,7 +132,7 @@ describe("Authenticate", () => {
 						"  }\n" +
 						"}"}
 				</pre>
-			</Wrapper>,
+			</div>,
 		);
 	});
 
@@ -158,11 +150,11 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>An error occurred</h1>
 				Last failing action: <pre>{'{\n  "type": "TEST_ACTION"\n}'}</pre>
-			</Wrapper>,
+			</div>,
 		);
 	});
 });

package/src/components/DropMenu/Menu.js

@@ -7,7 +7,7 @@ const useStyles = makeStyles(theme => ({
 	drawer: {
 		position: "absolute",
 		zIndex: 19999,
-		margin: "4px 0 0",
+		margin: theme.spacing(0.4, 0, 0),
 		left: props => (props.alignRight ? "auto" : "0"),
 		right: props => (props.alignRight ? "0" : "auto"),
 		transition: "opacity 100ms ease-out",
@@ -25,19 +25,19 @@ const useStyles = makeStyles(theme => ({
 		color: theme.palette.text.primary,
 		backgroundColor: "white",
 		border: `1px solid ${theme.palette.text.hint}`,
-		borderRadius: "5px",
+		borderRadius: theme.spacing(0.5),
 		listStyleType: "none",
-		padding: "5px 0",
+		padding: theme.spacing(0.5, 0),
 		margin: "0",
 		fontFamily: "Open Sans, sans-serif",
-		fontSize: "12px",
+		fontSize: theme.spacing(1.2),
 		width: "max-content",
 	},
 	item: {
 		boxSizing: "border-box",
-		height: "30px",
-		minWidth: "178px",
-		padding: "9px 12px",
+		height: theme.spacing(3),
+		minWidth: theme.spacing(17.8),
+		padding: theme.spacing(0.9, 1.2),
 		display: "flex",
 		alignItems: "center",
 		cursor: "pointer",
@@ -47,8 +47,8 @@ const useStyles = makeStyles(theme => ({
 		},
 	},
 	itemIcon: {
-		paddingRight: "11px",
-		fontSize: "17px",
+		paddingRight: theme.spacing(1.1),
+		fontSize: theme.spacing(1.7),
 	},
 }));
 

package/src/components/ErrorPlaceholder.js

@@ -1,25 +1,8 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp } from "../utils";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-const ErrorPlaceholder = withTheme(({ message, description, onClick, ...props }) => (
-	<Placeholder
-		icon={getThemeProp(["icons", "reportProblem"], "error")(props)}
-		warn
-		title={message}
-		subtitle={description}
-		onClick={onClick}
-	/>
-));
+const ErrorPlaceholder = ({ message, description }) => (
+	<Placeholder icon="report-problem-triangle" error title={message} subtitle={description} />
+);
 
 export default ErrorPlaceholder;