orc-shared 5.99.0-dev.1 → 5.99.0-dev.10

package/dist/components/Scope/ScopeNode.js

@@ -29,10 +29,10 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     scopeIcon: {
-      fontSize: "20px",
-      verticalAlign: "middle",
-      paddingRight: "8px",
-      flexShrink: 0
+      paddingRight: theme.spacing(0.8),
+      marginRight: theme.spacing(0),
+      height: theme.spacing(2),
+      width: theme.spacing(2)
     },
     scopeText: {
       overflowWrap: "break-word"
@@ -42,9 +42,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         boxSizing: "border-box",
         display: "flex",
         alignItems: "center",
-        padding: "10px",
-        width: "100%",
-        textTransform: props.isGlobal ? "uppercase" : "none"
+        padding: theme.spacing(1),
+        width: "100%"
       }, props.isClickable ? {
         "&:hover": {
           backgroundColor: "#222"
@@ -62,7 +61,6 @@ var ScopeNode = exports.ScopeNode = function ScopeNode(_ref) {
     scopeId = _ref.scopeId,
     name = _ref.name,
     contentLabelClassName = _ref.contentLabelClassName,
-    iconClassName = _ref.iconClassName,
     onClick = _ref.onClick,
     children = _ref.children;
   var classes = useStyles({
@@ -77,7 +75,7 @@ var ScopeNode = exports.ScopeNode = function ScopeNode(_ref) {
     "data-qa": "content-label"
   }, /*#__PURE__*/_react.default.createElement(_TreeItem.ScopeIcon, {
     type: type,
-    className: (0, _classnames.default)(classes.scopeIcon, iconClassName)
+    scopeIconClass: classes.scopeIcon
   }), displayValue && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.scopeText
   }, displayValue), children);

package/dist/components/Sidepanel.js

@@ -25,41 +25,43 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var getModalRoot = function getModalRoot() {
   return document.getElementById("modal");
 };
-var useStyles = (0, _styles.makeStyles)({
-  panel: function panel(props) {
-    return {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      right: 0,
-      width: props.width,
-      "&.enter": {
-        transform: "translateX(".concat(props.width, ")")
-      },
-      "&.enter-active": {
-        transform: "translateX(0)",
-        transition: "transform ".concat(props.timeout, "ms ease-out")
-      },
-      "&.exit": {
-        transform: "translateX(0)"
-      },
-      "&.exit-active": {
-        transform: "translateX(".concat(props.width, ")"),
-        transition: "transform ".concat(props.timeout, "ms ease-out")
-      }
-    };
-  }
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    panel: function panel(props) {
+      return {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: theme.spacing(props.widthSpacing),
+        "&.enter": {
+          transform: "translateX(".concat(theme.spacing(props.widthSpacing), ")")
+        },
+        "&.enter-active": {
+          transform: "translateX(0)",
+          transition: "transform ".concat(props.timeout, "ms ease-out")
+        },
+        "&.exit": {
+          transform: "translateX(0)"
+        },
+        "&.exit-active": {
+          transform: "translateX(".concat(theme.spacing(props.widthSpacing), ")"),
+          transition: "transform ".concat(props.timeout, "ms ease-out")
+        }
+      };
+    }
+  };
 });
 var Sidepanel = function Sidepanel(_ref) {
   var inProp = _ref.in,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "300px" : _ref$width,
+    _ref$widthSpacing = _ref.widthSpacing,
+    widthSpacing = _ref$widthSpacing === void 0 ? 30 : _ref$widthSpacing,
     _ref$timeout = _ref.timeout,
     timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout,
     children = _ref.children,
     className = _ref.className;
   var classes = useStyles({
-    width: width,
+    widthSpacing: widthSpacing,
     timeout: timeout
   });
   var panel = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {

package/dist/components/Spritesheet.js

@@ -20,21 +20,23 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var useStyles = (0, _core.makeStyles)({
-  wrapper: {
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "space-around",
-    overflowY: "auto",
-    height: "100%"
-  },
-  iconBlock: {
-    flex: "0 0 30%",
-    border: "1px solid #999",
-    margin: "5px",
-    padding: "5px 10px",
-    fontSize: "24px"
-  }
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    wrapper: {
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "space-around",
+      overflowY: "auto",
+      height: "100%"
+    },
+    iconBlock: {
+      flex: "0 0 30%",
+      border: "1px solid #999",
+      margin: theme.spacing(0.5),
+      padding: theme.spacing(0.5, 1),
+      fontSize: theme.spacing(2.4)
+    }
+  };
 });
 var arrify = function arrify(thing) {
   return [].slice.call(thing);

package/dist/components/ToastList.js

@@ -40,11 +40,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       var toastColor = (0, _toastHelper.getToastColor)(theme, props.toastType);
       return {
         display: "flex",
-        width: "390px",
-        marginTop: "10px",
-        padding: "17px",
-        borderRadius: "5px",
-        fontSize: "14px",
+        width: theme.spacing(39),
+        marginTop: theme.spacing(1),
+        padding: theme.spacing(1.7),
+        borderRadius: theme.spacing(0.5),
+        fontSize: theme.spacing(1.4),
         color: "white",
         backgroundColor: toastColor,
         zIndex: 10000,
@@ -78,18 +78,18 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     listWrapper: {
       position: "absolute",
-      top: "40px",
-      right: "16px",
+      top: theme.spacing(4),
+      right: theme.spacing(1.6),
       display: "flex",
       flexDirection: "column"
     },
     closeIcon: {
-      padding: "2px",
-      borderRadius: "2px",
-      strokeWidth: "2px",
+      padding: theme.spacing(0.2),
+      borderRadius: theme.spacing(0.2),
+      strokeWidth: theme.spacing(0.2),
       cursor: "pointer",
       marginLeft: "auto",
-      fontSize: "20px"
+      fontSize: theme.spacing(2)
     }
   };
 });

package/dist/components/Treeview/Branch.js

@@ -29,7 +29,7 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   var base = {
     margin: 0,
-    fontSize: "13px",
+    fontSize: theme.spacing(1.3),
     listStyleType: "none",
     borderWidth: 0,
     borderStyle: "solid",
@@ -39,19 +39,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     branch: function branch(props) {
       return _objectSpread(_objectSpread({}, base), {}, {
-        marginLeft: "".concat(_settings.branchIndent, "px"),
+        marginLeft: "".concat(theme.spacing(_settings.branchIndentSpacing)),
         padding: "0",
-        paddingLeft: "".concat(_settings.branchLength, "px"),
-        borderLeftWidth: "1px",
+        paddingLeft: "".concat(theme.spacing(_settings.branchLengthSpacing)),
+        borderLeftWidth: theme.spacing(0.1),
         "&:last-child::after": {
           /* blocker - hides lowest part of vertical branch */
           content: '""',
           backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
           position: "absolute",
-          left: "-".concat(_settings.branchIndent + _settings.branchLength + 2, "px"),
+          left: "-".concat(theme.spacing(_settings.branchIndentSpacing + _settings.branchLengthSpacing + 0.2)),
           bottom: 0,
-          top: "-".concat(_settings.branchHeight, "px"),
-          width: "1px"
+          top: "-".concat(theme.spacing(_settings.branchHeightSpacing)),
+          width: theme.spacing(0.1)
         }
       });
     },
@@ -59,10 +59,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       overflowY: "auto",
       overflowX: "hidden",
       marginLeft: 0,
-      padding: "".concat(_settings.branchLength - 5, "px"),
+      padding: "".concat(theme.spacing(_settings.branchLengthSpacing - 0.5)),
       "& > $branch": {
         /* First Branch immediately under Wrapper needs margin adjusted to look right */
-        marginLeft: "".concat(1.5 * _settings.branchIndent, "px")
+        marginLeft: "".concat(theme.spacing(_settings.branchIndentSpacing * 1.5))
       }
     })
   };

package/dist/components/Treeview/Label.js

@@ -26,16 +26,16 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     beforeIndicator: {
       backgroundColor: "#666",
-      marginLeft: "-".concat(_settings.branchLength + 1, "px"),
-      width: "".concat(_settings.branchLength + 1, "px"),
-      height: "1px",
+      marginLeft: "-".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
+      width: "".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
+      height: theme.spacing(0.1),
       zIndex: 99,
       position: "absolute"
     },
     nonIndicator: {
-      height: "1px",
-      width: "".concat(_settings.branchLength + 21, "px"),
-      margin: "auto 0 auto -".concat(_settings.branchLength + 1, "px"),
+      height: theme.spacing(0.1),
+      width: "".concat(theme.spacing(_settings.branchLengthSpacing + 2.1)),
+      margin: "auto 0 auto -".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
       backgroundColor: "#666",
       alignSelf: "stretch",
       flex: "0 0 auto",
@@ -52,8 +52,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     indicator: function indicator(props) {
       return {
-        fontSize: "10px",
-        padding: "10px 0 10px 10px",
+        fontSize: theme.spacing(1),
+        padding: theme.spacing(1, 0, 1, 1),
         cursor: "pointer",
         flex: "0 0 auto",
         color: props.open ? props.dark ? theme.palette.primary.light : theme.palette.text.primary : theme.palette.primary.main

package/dist/components/Treeview/Leaf.js

@@ -36,9 +36,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
           backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
           position: "absolute",
           top: "calc(50%)",
-          left: "-".concat(_settings.branchLength + 1, "px"),
+          left: "-".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
           bottom: 0,
-          width: "1px",
+          width: theme.spacing(0.1),
           height: "50%"
         }
       };

package/dist/components/Treeview/settings.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.branchLength = exports.branchIndent = exports.branchHeight = void 0;
+exports.branchLengthSpacing = exports.branchLength = exports.branchIndentSpacing = exports.branchIndent = exports.branchHeightSpacing = exports.branchHeight = void 0;
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -19,10 +19,13 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 // in px
 // How far from parent left edge to vertical branch under it
 var branchIndent = exports.branchIndent = 14;
+var branchIndentSpacing = exports.branchIndentSpacing = 1.4;
 // How far from vertical branch to children's left edge
 var branchLength = exports.branchLength = 15;
+var branchLengthSpacing = exports.branchLengthSpacing = 1.5;
 // How far up from bottom edge of node should horizontal branch sit
 var branchHeight = exports.branchHeight = 20;
+var branchHeightSpacing = exports.branchHeightSpacing = 2;
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -30,8 +33,11 @@ var branchHeight = exports.branchHeight = 20;
     return;
   }
   reactHotLoader.register(branchIndent, "branchIndent", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchIndentSpacing, "branchIndentSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchLength, "branchLength", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchLengthSpacing, "branchLengthSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchHeight, "branchHeight", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchHeightSpacing, "branchHeightSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
 })();
 ;
 (function () {
@@ -45,8 +51,11 @@ var branchHeight = exports.branchHeight = 20;
     return;
   }
   reactHotLoader.register(branchIndent, "branchIndent", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchIndentSpacing, "branchIndentSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchLength, "branchLength", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchLengthSpacing, "branchLengthSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchHeight, "branchHeight", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchHeightSpacing, "branchHeightSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
 })();
 ;
 (function () {

package/dist/hocs/withScrollBox.js

@@ -37,21 +37,16 @@ var withScrollBox = function withScrollBox(WrappedComp) {
     var onScroll = _ref.onScroll,
       otherProps = _objectWithoutProperties(_ref, _excluded);
     var classes = useStyles();
-    var mergeRef = function mergeRef(node, measureRef) {
-      measureRef(node);
-      if (externalRef) externalRef.current = node;
-    };
     return /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-      bounds: true
+      bounds: true,
+      innerRef: externalRef
     }, function (_ref2) {
       var measureRef = _ref2.measureRef,
         contentRect = _ref2.contentRect;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.scrollbox,
         onScroll: onScroll,
-        ref: function ref(node) {
-          return mergeRef(node, measureRef);
-        }
+        ref: measureRef
       }, /*#__PURE__*/_react.default.createElement(WrappedComp, _extends({}, otherProps, {
         height: (0, _utils.safeGet)(contentRect, "bounds", "height"),
         width: (0, _utils.safeGet)(contentRect, "bounds", "width")

package/dist/hooks/useWindowSize.js

@@ -0,0 +1,88 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useWindowSize = exports.default = void 0;
+var _react = require("react");
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+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__(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;
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  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 () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  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 () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.99.0-dev.1",
+	"version": "5.99.0-dev.10",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

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,