@instructure/quiz-core 20.38.0 → 21.0.1-rc.0

package/lib/banks/components/EditBankModal/presenter.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiButtons = require("@instructure/ui-buttons");
 var _uiHeading = require("@instructure/ui-heading");
@@ -18,25 +19,23 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _instUIMessages = require("../../../common/util/instUIMessages.js");
 var _quizCommon = require("@instructure/quiz-common");
 var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
-var _dec, _class, _EditBankModal;
+var _EditBankModal;
 /** @jsx jsx */
-var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_EditBankModal = /*#__PURE__*/function (_Component) {
+var EditBankModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EditBankModal, _Component);
   var _super = (0, _createSuper2.default)(EditBankModal);
-  function EditBankModal() {
+  function EditBankModal(props) {
     var _this;
     (0, _classCallCheck2.default)(this, EditBankModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     _this.continueAction = function () {
       _this.props.showError(_this.props.errorKey);
       if (_this.props.workingBank.isValid()) {
         _this.props.updateBank(_this.props.workingBank);
         _this.closeAction();
+      } else {
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -58,6 +57,7 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
         return (0, _instUIMessages.toErrors)(_this.props.workingBank.errorsFor('title').toJS());
       }
     };
+    _this.bankNameInput = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(EditBankModal, [{
@@ -82,17 +82,16 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.bankNameInput
-      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+      return (0, _emotion.jsx)(_quizCommon.TextInput, {
         value: this.props.workingBank.title,
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: (0, _emotion.jsx)("div", null, (0, _formatMessage.default)('Bank Name')),
+        renderLabel: (0, _formatMessage.default)('Bank Name'),
         type: "text",
-        placeholder: (0, _formatMessage.default)('Enter a name...'),
-        "data-automation": "sdk-edit-bank-name-textinput"
-      }));
+        isRequired: true,
+        "data-automation": "sdk-edit-bank-name-textinput",
+        ref: this.bankNameInput
+      });
     }
   }, {
     key: "render",
@@ -104,7 +103,6 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
         label: (0, _formatMessage.default)('Item Bank'),
         "data-automation": "sdk-edit-bank-modal"
       }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
-        level: "reset",
         as: "h2"
       }, (0, _formatMessage.default)('Edit Item Bank')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
@@ -116,7 +114,12 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }]);
   EditBankModal.displayName = "EditBankModal";
   return EditBankModal;
-}(_react.Component), _EditBankModal.displayName = 'EditBankModal', _EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName), _EditBankModal.propTypes = {
+}(_react.Component);
+exports.EditBankModal = EditBankModal;
+_EditBankModal = EditBankModal;
+EditBankModal.displayName = 'EditBankModal';
+EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName);
+EditBankModal.propTypes = {
   modalOpen: _propTypes.default.bool.isRequired,
   modalTrigger: _propTypes.default.instanceOf(_react.Component),
   workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
@@ -129,10 +132,10 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   hideError: _propTypes.default.func.isRequired,
   closeModal: _propTypes.default.func.isRequired,
   styles: _propTypes.default.object
-}, _EditBankModal.defaultProps = {
+};
+EditBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null
-}, _EditBankModal)) || _class);
-exports.EditBankModal = EditBankModal;
+};
 var _default = EditBankModal;
 exports.default = _default;

package/lib/banks/components/NavWrapper/theme.js

@@ -14,9 +14,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     navPaddingTopBottom: spacing.small,
     navPaddingLeftRight: spacing.xLarge,
     navBorderWidth: borders.widthSmall,
-    navBorderColor: colors.tiara,
-    navBackgroundColor: colors.white,
-    bankIconColor: colors.electric,
+    navBorderColor: colors.contrasts.grey1214,
+    navBackgroundColor: colors.contrasts.white1010,
+    bankIconColor: colors.contrasts.blue4570,
     bankIconFontSize: typography.fontSizeLarge,
     bankIconPadding: spacing.xSmall
   };

package/lib/banks/components/SharingModal/presenter.js

@@ -28,7 +28,6 @@ var _uiGrid = require("@instructure/ui-grid");
 var _uiTabs = require("@instructure/ui-tabs");
 var _uiText = require("@instructure/ui-text");
 var _emotion = require("@instructure/emotion");
-var _ElementsForSelectors = _interopRequireDefault(require("../../../common/util/ElementsForSelectors.js"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
 var _index = _interopRequireDefault(require("./ShareList/index.js"));
 var _index2 = _interopRequireDefault(require("../AsyncSearch/index.js"));
@@ -62,9 +61,6 @@ var SharingModalPresenter = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.
     };
     _this.shareListRef = null;
     _this.shareButtonRef = null;
-    _this.applicationElement = function () {
-      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
-    };
     // =============
     //   LIFECYCLE
     // =============

package/lib/banks/components/SharingModal/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     spacing = _ref.spacing;
   return {
-    separatorColor: colors.tiara,
+    separatorColor: colors.contrasts.grey1214,
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };

package/lib/building/components/resources/ActionButtons/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     buttonsZIndex: '3333',
-    buttonsColor: colors.oxford,
+    buttonsColor: colors.contrasts.grey100100,
     buttonsPadding: spacing.xSmall
   };
 };

package/lib/building/components/resources/AddToBankOptions/theme.js

@@ -8,8 +8,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
     colors = _ref.colors;
   return {
-    addToBankBackgroundColor: colors.porcelain,
-    addToBankBorderColor: colors.oxford
+    addToBankBackgroundColor: colors.contrasts.grey1111,
+    addToBankBorderColor: colors.contrasts.grey100100
   };
 };
 var _default = generateComponentTheme;

package/lib/building/components/resources/quiz/instructions/Instructions/theme.js

@@ -13,7 +13,7 @@ function generator(_ref) {
     labelLeftPadding: spacing.large,
     labelBottomPadding: spacing.xxSmall,
     labelFontSize: typography.fontSizeSmall,
-    labelColor: colors.slate,
+    labelColor: colors.contrasts.grey4570,
     editButtonWrapperRightMargin: spacing.large
   };
 }

package/lib/building/components/resources/quiz/title/Edit/theme.js

@@ -16,7 +16,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     titleEditInputFontSize: typography.fontSizeXLarge,
     errorBorderMargin: spacing.xxSmall,
     errorBorderPadding: spacing.xxSmall,
-    errorBorderColor: colors.crimson,
+    errorBorderColor: colors.contrasts.red4570,
     errorBorderBorderRadius: borders.radiusSmall
   };
 };

package/lib/building/components/resources/quiz/title/Title/theme.js

@@ -14,10 +14,10 @@ function generator(_ref) {
     labelLeftPadding: spacing.large,
     labelBottomPadding: spacing.xxSmall,
     labelFontSize: typography.fontSizeSmall,
-    labelColor: colors.slate,
+    labelColor: colors.contrasts.grey4570,
     editButtonWrapperRightMargin: spacing.large,
-    titleShowWrapperBottomBorder: "".concat(borders.widthMedium, " ").concat(borders.style, " ").concat(colors.porcelain),
+    titleShowWrapperBottomBorder: "".concat(borders.widthMedium, " ").concat(borders.style, " ").concat(colors.contrasts.grey1111),
     titleEditWrapperBorderWidth: borders.widthSmall,
-    titleEditWrapperBorderColor: colors.ash
+    titleEditWrapperBorderColor: colors.contrasts.grey4570
   };
 }

package/lib/building/components/resources/quizEntry/QuizEntry/theme.js

@@ -12,7 +12,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     footerPadding: spacing.small,
     footerBorderWidth: borders.widthSmall,
-    footerBorderColor: colors.tiara,
+    footerBorderColor: colors.contrasts.grey1214,
     footerFontSize: typography.fontSizeXSmall
   };
 };

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/theme.js

@@ -11,9 +11,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     marginAddMargin: spacing.xSmall,
-    quizEntryBankEditBackgroundColor: colors.white,
+    quizEntryBankEditBackgroundColor: colors.contrasts.white1010,
     quizEntryBankEditBorderSize: borders.widthSmall,
-    quizEntryBankEditBorderColor: colors.oxford,
+    quizEntryBankEditBorderColor: colors.contrasts.grey100100,
     quizEntryBankEditPadding: borders.small,
     quizEntryBankEditMargin: spacing.medium,
     numberInputFontSize: typography.fontSizeMedium,
@@ -22,7 +22,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borderLineTopMargin: spacing.small,
     borderLineBottomMargin: spacing.small,
     borderLineBottomBorderSize: borders.widthSmall,
-    borderLineBottomBorderColor: colors.ash
+    borderLineBottomBorderColor: colors.contrasts.grey4570
   };
 };
 var _default = generateComponentTheme;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/theme.js

@@ -10,8 +10,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography,
     borders = _ref.borders;
   return {
-    quizEntryBankBackgroundColor: colors.white,
-    quizEntryBankBorder: "".concat(borders.widthSmall, " dashed ").concat(colors.oxford),
+    quizEntryBankBackgroundColor: colors.contrasts.white1010,
+    quizEntryBankBorder: "".concat(borders.widthSmall, " dashed ").concat(colors.contrasts.grey100100),
     quizEntryBankPadding: "".concat(spacing.xxSmall, " ").concat(spacing.medium),
     quizEntryBankTopMargin: spacing.small,
     alertWrapperMargin: spacing.small

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/theme.js

@@ -9,8 +9,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     typography = _ref.typography;
   return {
-    headerBackgroundColor: colors.porcelain,
-    headerColor: colors.oxford,
+    headerBackgroundColor: colors.contrasts.grey1111,
+    headerColor: colors.contrasts.grey100100,
     headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small)
   };
 };

package/lib/building/components/resources/quizEntry/QuizEntryShow/theme.js

@@ -12,13 +12,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     quizEntryShowPadding: "".concat(spacing.large, " ").concat(spacing.small),
-    quizEntryShowBackgroundColor: colors.white,
+    quizEntryShowBackgroundColor: colors.contrasts.white1010,
     headerHeight: '2rem',
     headerRightPadding: spacing.xSmall,
-    dndBorder: "".concat(borders.style, " ").concat(borders.widthSmall, " ").concat(colors.brand),
+    dndBorder: "".concat(borders.style, " ").concat(borders.widthSmall, " ").concat(colors.contrasts.blue4570),
     rightHeaderZIndex: '3333',
-    rightHeaderColor: colors.oxford,
-    titleInteractionTypeNamePointsColor: colors.slate,
+    rightHeaderColor: colors.contrasts.grey100100,
+    titleInteractionTypeNamePointsColor: colors.contrasts.grey4570,
     titleInteractionTypeNamePointsFontSize: typography.fontSizeSmall,
     titleInteractionTypeNamePointsLeftMargin: spacing.xSmall,
     titleInteractionTypeNamePointsRightMargin: spacing.xSmall,
@@ -26,7 +26,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     optionsButtonDragDropHandleFontSize: typography.fontSizeMedium,
     optionsButtonDragDropHandleMargin: spacing.xSmall,
     phoneConnectingLinesBorderWidth: borders.widthSmall,
-    phoneConnectingLinesBorderColor: colors.ash,
+    phoneConnectingLinesBorderColor: colors.contrasts.grey4570,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 };

package/lib/common/components/ConfirmationModal/presenter.js

@@ -65,19 +65,20 @@ var ConfirmationModal = /*#__PURE__*/function (_Component) {
         continueText = _this$props2.continueText,
         size = _this$props2.size,
         shouldReturnFocus = _this$props2.shouldReturnFocus,
-        continueVariant = _this$props2.continueVariant;
+        continueVariant = _this$props2.continueVariant,
+        automationPrefix = _this$props2.automationPrefix;
       return /*#__PURE__*/_react.default.createElement(_quizCommon.ImportantModal, {
         open: this.props.modalOpen,
         size: size || 'small',
         label: title || (0, _formatMessage.default)('Confirm'),
         onDismiss: this.cancelAction,
-        "data-automation": "sdk-confirmation-modal",
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal") : 'sdk-confirmation-modal',
         shouldReturnFocus: shouldReturnFocus,
         onClose: this.doAction
       }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         level: "reset",
         as: "h2",
-        "data-automation": "sdk-confirmation-modal-heading"
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-heading") : 'sdk-confirmation-modal-heading'
       }, title || (0, _formatMessage.default)('Confirm')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
         onClick: this.cancelAction,
         placement: "end",
@@ -88,12 +89,12 @@ var ConfirmationModal = /*#__PURE__*/function (_Component) {
       }, text || (0, _formatMessage.default)('Are you sure?'))), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         onClick: this.cancelAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-confirmation-modal-cancel"
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-cancel") : 'sdk-confirmation-modal-cancel'
       }, cancelText || (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         color: continueVariant || 'primary',
         onClick: this.continueAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-confirmation-modal-confirm"
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-confirm") : 'sdk-confirmation-modal-confirm'
       }, continueText || (0, _formatMessage.default)('Confirm'))));
     }
   }]);
@@ -112,7 +113,8 @@ ConfirmationModal.propTypes = {
   size: _propTypes.default.string,
   shouldReturnFocus: _propTypes.default.bool,
   onContinue: _propTypes.default.func,
-  onCancel: _propTypes.default.func
+  onCancel: _propTypes.default.func,
+  automationPrefix: _propTypes.default.string
 };
 ConfirmationModal.defaultProps = {
   title: null,
@@ -123,7 +125,8 @@ ConfirmationModal.defaultProps = {
   size: null,
   shouldReturnFocus: true,
   onContinue: null,
-  onCancel: null
+  onCancel: null,
+  automationPrefix: null
 };
 var _default = ConfirmationModal;
 exports.default = _default;

package/lib/common/components/ImportModal/ImportFileSelector/theme.js

@@ -9,15 +9,15 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     typography = _ref.typography;
   return {
-    uploadIconContainerColor: colors.ash,
+    uploadIconContainerColor: colors.contrasts.grey4570,
     uploadIconContainerColorFontSize: typography.fontSizeXLarge,
     checkIconContainerFontSize: typography.fontSizeXLarge,
-    checkIconContainerColor: colors.shamrock,
+    checkIconContainerColor: colors.contrasts.green4570,
     smallTextFontSize: typography.fontSizeXSmall,
-    smallTextColor: colors.ash,
+    smallTextColor: colors.contrasts.grey4570,
     smallTextPadding: spacing.xSmall,
     selectorMargin: spacing.xSmall,
-    fileListSuccessColor: colors.shamrock
+    fileListSuccessColor: colors.contrasts.green4570
   };
 };
 var _default = generateComponentTheme;

package/lib/common/components/PrintFontSizeModal/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     spacing = _ref.spacing;
   return {
-    separatorColor: colors.tiara,
+    separatorColor: colors.contrasts.grey1214,
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };

package/lib/common/components/layout/header/HeaderMenuButton/theme.js

@@ -11,7 +11,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     menuButtonFontSize: typography.fontSizeLarge,
-    menuButtonColor: colors.licorice,
+    menuButtonColor: colors.contrasts.grey125125,
     menuButtonHoverOpacity: '0.6'
   };
 };

package/lib/common/components/layout/header/Timer/theme.js

@@ -10,10 +10,10 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     typography = _ref.typography;
   return {
-    timerBackgroundColor: colors.porcelain,
-    timerColor: colors.ash,
+    timerBackgroundColor: colors.contrasts.grey1111,
+    timerColor: colors.contrasts.grey4570,
     timerBorderWidth: borders.widthSmall,
-    timerBorderColor: colors.tiara,
+    timerBorderColor: colors.contrasts.grey1214,
     timerBorderRadius: borders.radiusMedium,
     timerFontSize: typography.fontSizeMedium,
     timerPadding: spacing.xxSmall,

package/lib/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -14,12 +14,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
 var _emotion = require("@instructure/emotion");
 var _uiReactUtils = require("@instructure/ui-react-utils");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
-var _quizCommon = require("@instructure/quiz-common");
-var _dec, _class, _SecondaryNavBarButton;
+var _SecondaryNavBarButton;
 /** @jsx jsx */
-var SecondaryNavBarButton = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_SecondaryNavBarButton = /*#__PURE__*/function (_Component) {
+var SecondaryNavBarButton = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SecondaryNavBarButton, _Component);
   var _super = (0, _createSuper2.default)(SecondaryNavBarButton);
   function SecondaryNavBarButton() {
@@ -27,39 +24,23 @@ var SecondaryNavBarButton = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.
     return _super.apply(this, arguments);
   }
   (0, _createClass2.default)(SecondaryNavBarButton, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.makeStyles();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.props.makeStyles();
-    }
-  }, {
     key: "render",
     value: function render() {
-      return (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
-        theme: {
-          componentOverrides: {
-            BaseButton: {
-              primaryColor: this.props.styles.textColor,
-              primaryBackground: this.props.styles.backgroundColor,
-              primaryHoverBackground: this.props.styles.backgroundHoverColor,
-              primaryBorderColor: this.props.styles.borderColor
-            }
-          }
-        }
-      }, (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes), this.props.children));
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, Object.assign({
+        color: "secondary"
+      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes)), this.props.children);
     }
   }]);
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(_react.Component), _SecondaryNavBarButton.displayName = 'TopNavBarItem', _SecondaryNavBarButton.componentId = "Quizzes".concat(_SecondaryNavBarButton.displayName), _SecondaryNavBarButton.propTypes = {
-  children: _propTypes.default.string.isRequired,
-  styles: _propTypes.default.object,
-  makeStyles: _propTypes.default.func
-}, _SecondaryNavBarButton)) || _class);
+}(_react.Component);
 exports.SecondaryNavBarButton = SecondaryNavBarButton;
+_SecondaryNavBarButton = SecondaryNavBarButton;
+SecondaryNavBarButton.displayName = 'TopNavBarItem';
+SecondaryNavBarButton.componentId = "Quizzes".concat(_SecondaryNavBarButton.displayName);
+SecondaryNavBarButton.propTypes = {
+  children: _propTypes.default.string.isRequired,
+  styles: _propTypes.default.object
+};
 var _default = SecondaryNavBarButton;
 exports.default = _default;

package/lib/common/components/layout/navbar/index.js

@@ -100,9 +100,6 @@ var NavBar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme
             desktopBottomBorderInverse: false
           } : {}),
           navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
-          desktopConfig: {
-            hideActionsUserSeparator: true
-          },
           smallViewportConfig: {
             dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
             dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')

package/lib/common/components/layout/navbar/theme.js

@@ -8,7 +8,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
     colors = _ref.colors;
   return {
-    backgroundColor: colors.porcelain,
+    backgroundColor: colors.contrasts.grey1111,
     phoneBreakPoint: breakpoints.medium
   };
 };

package/lib/common/components/layout/sidebar/PositionSummary/theme.js

@@ -10,13 +10,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     typography = _ref.typography;
   return {
-    numberSummaryColor: colors.licorice,
+    numberSummaryColor: colors.contrasts.grey125125,
     numberSummaryFontSize: typography.fontSizeMedium,
     numberSummaryFontWeight: typography.fontWeightBold,
     firstNumberSummaryPadding: spacing.xxSmall,
     secondNumberSummaryPadding: spacing.xxSmall,
     verticalDotsBorderWidth: borders.widthSmall,
-    verticalDotsBorderColor: colors.licorice
+    verticalDotsBorderColor: colors.contrasts.grey125125
   };
 };
 var _default = generateComponentTheme;

package/lib/common/components/layout/sidebar/Sidebar/theme.js

@@ -15,30 +15,30 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     sidebarWidthClosed: spacing.xxLarge,
     sidebarWidthOpen: '22rem',
-    sidebarBackgroundColor: colors.white,
+    sidebarBackgroundColor: colors.contrasts.white1010,
     sidebarBorderWidth: borders.widthSmall,
-    sidebarBorderColor: colors.tiara,
-    sidebarColor: colors.oxford,
+    sidebarBorderColor: colors.contrasts.grey1214,
+    sidebarColor: colors.contrasts.grey100100,
     sidebarZIndex: '5555',
     sidebarTransitionDuration: transitions.duration,
     infoHolderFontSize: typography.fontSizeXSmall,
     infoHolderBorderWidth: borders.widthSmall,
-    infoHolderBorderColor: colors.tiara,
+    infoHolderBorderColor: colors.contrasts.grey1214,
     infoHolderPadding: spacing.small,
-    actionableInfoHoverBorderColor: colors.electric,
+    actionableInfoHoverBorderColor: colors.contrasts.blue4570,
     actionableInfoBorderWidth: borders.widthLarge,
     questionNavigatorPadding: spacing.xxxSmall,
     headerSpacingPadding: "".concat(spacing.small, " ").concat(spacing.xSmall),
-    pinnedSectionBackgroundColor: colors.porcelain,
+    pinnedSectionBackgroundColor: colors.contrasts.grey1111,
     pinnedQuestionSpacing: spacing.small,
     pinnedQuestionFontSize: typography.fontSizeSmall,
     sidebarHeaderBorderWidth: borders.widthSmall,
-    sidebarHeaderBorderColor: colors.tiara,
+    sidebarHeaderBorderColor: colors.contrasts.grey1214,
     descriptionFontSize: typography.fontSizeXSmall,
-    descriptionFontColor: colors.slate,
+    descriptionFontColor: colors.contrasts.grey4570,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
-    focusBorderColor: colors.brand,
-    focusOutlineColor: (0, _uiColorUtils.alpha)(colors.brand, 50)
+    focusBorderColor: colors.contrasts.blue4570,
+    focusOutlineColor: (0, _uiColorUtils.alpha)(colors.contrasts.blue4570, 50)
   };
 };
 var _default = generateComponentTheme;

package/lib/common/components/layout/sidebar/SidebarItem/theme.js

@@ -10,13 +10,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography,
     spacing = _ref.spacing;
   return {
-    borderColor: colors.white,
-    bottomBorderColor: colors.tiara,
+    borderColor: colors.contrasts.white1010,
+    bottomBorderColor: colors.contrasts.grey1214,
     bottomBorderWidth: borders.widthSmall,
-    darkTextColor: colors.licorice,
-    hoverBorderColor: colors.electric,
+    darkTextColor: colors.contrasts.grey125125,
+    hoverBorderColor: colors.contrasts.blue4570,
     hoverBorderWidth: borders.widthLarge,
-    infoHeaderColor: colors.slate,
+    infoHeaderColor: colors.contrasts.grey4570,
     infoHeaderFontSize: typography.fontSizeXSmall,
     itemBodyFontSize: typography.fontSizeSmall,
     itemBodyMarginTop: spacing.xxSmall,

package/lib/common/components/layout/sidebar/Stimulus/Collection/theme.js

@@ -10,7 +10,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     columnPadding: spacing.xSmall,
-    sidebarIsOpenBottomBorderColor: colors.slate,
+    sidebarIsOpenBottomBorderColor: colors.contrasts.grey4570,
     sidebarIsOpenBottomBorderWidth: borders.widthSmall
   };
 };

package/lib/common/components/layout/sidebar/Stimulus/Summary/theme.js

@@ -9,10 +9,10 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    itemContainerColor: colors.licorice,
+    itemContainerColor: colors.contrasts.grey125125,
     itemContainerPadding: spacing.xSmall,
     itemContainerBorderWidth: borders.widthSmall,
-    itemContainerBorderColor: colors.licorice,
+    itemContainerBorderColor: colors.contrasts.grey125125,
     summaryMargin: spacing.small,
     summaryMarginLeft: spacing.medium
   };

package/lib/common/components/layout/sidebar/Stimulus/theme.js

@@ -10,17 +10,17 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     typography = _ref.typography;
   return {
-    borderColor: colors.white,
-    hoverBorderColor: colors.electric,
+    borderColor: colors.contrasts.white1010,
+    hoverBorderColor: colors.contrasts.blue4570,
     hoverBorderWidth: borders.widthLarge,
     sidebarClosedButtonPadding: "".concat(spacing.xxSmall, " 0"),
     sidebarHeaderPadding: spacing.small,
     sidebarItemBorderWidth: borders.widthSmall,
-    sidebarItemBorderColor: colors.tiara,
+    sidebarItemBorderColor: colors.contrasts.grey1214,
     sidebarIsOpenInfoHeaderFontSize: typography.fontSizeXSmall,
     sidebarIsOpenInfoHeaderPadding: spacing.xSmall,
     sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
-    sidebarIsOpenInfoHeaderColor: colors.ash
+    sidebarIsOpenInfoHeaderColor: colors.contrasts.grey4570
   };
 };
 var _default = generateComponentTheme;

package/lib/common/components/resources/WarningWrapper/theme.js

@@ -12,7 +12,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     alertPadding: spacing.medium,
     alertZIndex: '8888',
     containerPadding: spacing.medium,
-    disabledChildrenBackgroundColor: colors.porcelain,
+    disabledChildrenBackgroundColor: colors.contrasts.grey1111,
     disabledChildrenOpacity: '0.6',
     disabledChildrenZIndex: '7777'
   };