orc-shared 5.10.2 → 5.99.0-dev.10

package/dist/{components/Modal/index.js → hooks/useWindowSize.js}

@@ -1,15 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.Modal = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Wrapper = _interopRequireDefault(require("./Wrapper"));
-var _Background = _interopRequireDefault(require("./Background"));
-var _Dialog = _interopRequireDefault(require("./Dialog"));
-var _useToggle3 = _interopRequireDefault(require("../../hooks/useToggle"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+exports.useWindowSize = exports.default = void 0;
+var _react = require("react");
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -30,30 +23,39 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Modal = exports.Modal = function Modal(_ref) {
-  var initShow = _ref.initShow,
-    anchor = _ref.anchor,
-    content = _ref.content,
-    look = _ref.look;
-  var _useToggle = (0, _useToggle3.default)(initShow),
-    _useToggle2 = _slicedToArray(_useToggle, 2),
-    show = _useToggle2[0],
-    toggle = _useToggle2[1];
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, anchor(toggle), /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
-    in: show,
-    timeout: 300
-  }, /*#__PURE__*/_react.default.createElement(_Background.default, null), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-    look: look,
-    onClickOutside: toggle
-  }, content(toggle))));
+var useWindowSize = exports.useWindowSize = function useWindowSize() {
+  var _useState = (0, _react.useState)({
+      innerWidth: window.innerWidth,
+      innerHeight: window.innerHeight,
+      outerWidth: window.outerWidth,
+      outerHeight: window.outerHeight
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      var haveChanged = windowSize.innerWidth !== window.innerWidth || windowSize.innerHeight !== window.innerHeight || windowSize.outerWidth !== window.outerWidth || windowSize.outerHeight !== window.outerHeight;
+      if (haveChanged) {
+        setWindowSize({
+          innerWidth: window.innerWidth,
+          innerHeight: window.innerHeight,
+          outerWidth: window.outerWidth,
+          outerHeight: window.outerHeight
+        });
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, [windowSize]);
+  return windowSize;
 };
-__signature__(Modal, "useToggle{[show, toggle]}", function () {
-  return [_useToggle3.default];
-});
-__signature__(Modal, "useToggle{[show, toggle]}", function () {
-  return [_useToggle3.default];
-});
-var _default = Modal;
+__signature__(useWindowSize, "useState{[windowSize, setWindowSize]({\n\t\tinnerWidth: window.innerWidth,\n\t\tinnerHeight: window.innerHeight,\n\t\touterWidth: window.outerWidth,\n\t\touterHeight: window.outerHeight,\n\t})}\nuseEffect{}");
+__signature__(useWindowSize, "useState{[windowSize, setWindowSize]({\n\t\tinnerWidth: window.innerWidth,\n\t\tinnerHeight: window.innerHeight,\n\t\touterWidth: window.outerWidth,\n\t\touterHeight: window.outerHeight,\n\t})}\nuseEffect{}");
+var _default = useWindowSize;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
 ;
@@ -62,8 +64,8 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Modal, "Modal", "/home/vsts/work/1/s/src/components/Modal/index.js");
-  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Modal/index.js");
+  reactHotLoader.register(useWindowSize, "useWindowSize", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
+  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
 })();
 ;
 (function () {
@@ -76,8 +78,8 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Modal, "Modal", "/home/vsts/work/1/s/src/components/Modal/index.js");
-  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Modal/index.js");
+  reactHotLoader.register(useWindowSize, "useWindowSize", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
+  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
 })();
 ;
 (function () {

package/dist/sharedMessages.js

@@ -497,6 +497,14 @@ var sharedMessages = (0, _reactIntl.defineMessages)({
   december: {
     id: "orc-shared.december",
     defaultMessage: "December"
+  },
+  selectAll: {
+    id: "orc-shared.selectAll",
+    defaultMessage: "Select All"
+  },
+  clear: {
+    id: "orc-shared.clear",
+    defaultMessage: "Clear"
   }
 });
 var _default = sharedMessages;

package/dist/utils/index.js

@@ -3,10 +3,6 @@
 exports.__esModule = true;
 var _safeGet = _interopRequireDefault(require("./safeGet"));
 exports.safeGet = _safeGet.default;
-var _styledPropFuncs = require("./styledPropFuncs");
-exports.getThemeProp = _styledPropFuncs.getThemeProp;
-exports.ifFlag = _styledPropFuncs.ifFlag;
-exports.switchEnum = _styledPropFuncs.switchEnum;
 var _unwrapImmutable = _interopRequireDefault(require("./unwrapImmutable"));
 exports.unwrapImmutable = _unwrapImmutable.default;
 var _logPass = _interopRequireDefault(require("./logPass"));

package/dist/utils/testUtils.js

@@ -3,9 +3,8 @@
 exports.__esModule = true;
 exports.createMuiTheme = exports.TestWrapper = exports.PropStruct = void 0;
 exports.extractMessages = extractMessages;
-exports.spyOnConsole = exports.ignoreConsoleError = exports.getStyledClassSelector = exports.getElmClasses = exports.getClassSelector = exports.getClassName = exports.generateClassName = exports.firstItemComparator = void 0;
+exports.spyOnConsole = exports.ignoreConsoleError = exports.getElmClasses = exports.getClassSelector = exports.getClassName = exports.generateClassName = exports.firstItemComparator = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
 var _unexpectedReaction = require("unexpected-reaction");
 var _muiThemes = _interopRequireDefault(require("./../components/MaterialUI/muiThemes"));
 var _reactRouterDom = require("react-router-dom");
@@ -85,14 +84,6 @@ var getClassSelector = exports.getClassSelector = function getClassSelector(elm,
     return className && "." + className;
   }
 };
-var getStyledClassSelector = exports.getStyledClassSelector = function getStyledClassSelector(elm) {
-  var component = elm.type || elm;
-  if (!(0, _styledComponents.isStyledComponent)(component)) {
-    throw new Error("<" + (component.name || component) + " /> is not a styled component");
-  }
-  // Styled component toString() function returns a stable class name
-  return component.toString();
-};
 var firstItemComparator = exports.firstItemComparator = function firstItemComparator(a, b) {
   return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0;
 };
@@ -231,7 +222,6 @@ var TestWrapper = exports.TestWrapper = function TestWrapper(_ref3) {
   reactHotLoader.register(getElmClasses, "getElmClasses", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassName, "getClassName", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassSelector, "getClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
-  reactHotLoader.register(getStyledClassSelector, "getStyledClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(firstItemComparator, "firstItemComparator", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(PropStruct, "PropStruct", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(ignoreConsoleError, "ignoreConsoleError", "/home/vsts/work/1/s/src/utils/testUtils.js");
@@ -256,7 +246,6 @@ var TestWrapper = exports.TestWrapper = function TestWrapper(_ref3) {
   reactHotLoader.register(getElmClasses, "getElmClasses", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassName, "getClassName", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassSelector, "getClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
-  reactHotLoader.register(getStyledClassSelector, "getStyledClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(firstItemComparator, "firstItemComparator", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(PropStruct, "PropStruct", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(ignoreConsoleError, "ignoreConsoleError", "/home/vsts/work/1/s/src/utils/testUtils.js");

package/dist/{components/Modal/Background.js → utils/toastHelper.js}

@@ -1,9 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.getToastColor = void 0;
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -18,21 +16,21 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Background = _styledComponents.default.div.withConfig({
-  displayName: "Background",
-  componentId: "sc-vgfi8m-0"
-})(["position:absolute;background-color:rgba(127,127,127,0.5);height:100%;width:100%;"]);
-var _default = Background;
-var _default2 = _default;
-var _default3 = exports.default = _default2;
+var getToastColor = exports.getToastColor = function getToastColor(theme, alertType) {
+  var toastBorderColors = {
+    error: theme.palette.error.main,
+    warn: theme.palette.warning.main,
+    confirm: theme.palette.success.main
+  };
+  return toastBorderColors[alertType] || "red";
+};
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Background, "Background", "/home/vsts/work/1/s/src/components/Modal/Background.js");
-  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Modal/Background.js");
+  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
 })();
 ;
 (function () {
@@ -45,8 +43,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Background, "Background", "/home/vsts/work/1/s/src/components/Modal/Background.js");
-  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Modal/Background.js");
+  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
 })();
 ;
 (function () {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.2",
+	"version": "5.99.0-dev.10",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {
@@ -56,7 +56,7 @@
 		"@testing-library/react": "^10.4.9"
 	},
 	"dependencies": {
-		"orc-scripts": "4.0.8",
+		"orc-scripts": "5.0.0-dev.9",
 		"react-number-format": "^5.3.0"
 	},
 	"sideEffects": false,

package/src/components/AppFrame/About.js

@@ -17,19 +17,19 @@ export const ABOUT_NAME = "__aboutBox";
 
 const getModalRoot = () => document.getElementById("modal");
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
 	aboutBox: props => ({
 		boxSizing: "border-box",
 		zIndex: 9999,
 		position: "absolute",
-		top: "calc(50% - 210px)",
-		left: "calc(50% - 210px)",
-		height: "420px",
-		width: "420px",
-		padding: "15px 20px",
+		top: `calc(50% - ${theme.spacing(21)})`,
+		left: `calc(50% - ${theme.spacing(21)})`,
+		height: theme.spacing(42),
+		width: theme.spacing(42),
+		padding: theme.spacing(1.5, 2),
 		color: "#ffffff",
-		fontSize: "13px",
-		lineHeight: "16px",
+		fontSize: theme.spacing(1.3),
+		lineHeight: theme.spacing(1.6),
 		background: `#0a0a07 url(${props.bgImage})`,
 
 		"&.enter-active": {
@@ -47,8 +47,8 @@ const useStyles = makeStyles(() => ({
 		zIndex: 9999,
 		position: "absolute",
 		color: "#ffffff",
-		top: "15px",
-		right: "20px",
+		top: theme.spacing(1.5),
+		right: theme.spacing(2),
 		margin: "0",
 		cursor: "pointer",
 		opacity: "1",
@@ -62,11 +62,11 @@ const useStyles = makeStyles(() => ({
 		textDecoration: "none",
 	},
 	aboutParagraph: {
-		marginTop: "20px",
+		marginTop: theme.spacing(2),
 	},
 	longAboutParagraph: props => ({
-		marginTop: "20px",
-		fontSize: props.lang?.toLowerCase().startsWith("fr") ? "10px" : undefined,
+		marginTop: theme.spacing(2),
+		fontSize: props.lang?.toLowerCase().startsWith("fr") ? theme.spacing(1) : undefined,
 	}),
 }));
 

package/src/components/AppFrame/Anchor.js

@@ -8,12 +8,12 @@ const useStyles = makeStyles(theme => ({
 		cursor: "pointer",
 		boxSizing: "border-box",
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "12px",
+		fontSize: theme.spacing(1.2),
 		textTransform: "uppercase",
-		height: "40px",
-		minWidth: "180px",
-		paddingTop: "14px",
-		paddingRight: "14px",
+		height: theme.spacing(4),
+		minWidth: theme.spacing(18),
+		paddingTop: theme.spacing(1.4),
+		paddingRight: theme.spacing(1.4),
 		color: props.open ? theme.palette.primary.light : theme.palette.text.disabled,
 
 		"&:hover": {
@@ -21,8 +21,8 @@ const useStyles = makeStyles(theme => ({
 		},
 	}),
 	indicator: props => ({
-		fontSize: "12px",
-		padding: "0 11px",
+		fontSize: theme.spacing(1.2),
+		padding: theme.spacing(0, 1.1),
 		color: props.open ? theme.palette.text.disabled : theme.palette.primary.light,
 	}),
 }));

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);