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

package/es/moderating/components/events/SessionStartEvent.js

@@ -3,11 +3,11 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import platform from 'platform';
+import { EventDetails } from "../resources/EventDetails.js";
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { Table } from '@instructure/ui-table';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { Text } from '@instructure/ui-text';
+import { sessionValidationErrorsPropType, eventDataPropType } from "../../../reporting/components/resources/common/propTypes.js";
 export var SessionStartEvent = /*#__PURE__*/function (_Component) {
   _inherits(SessionStartEvent, _Component);
   var _super = _createSuper(SessionStartEvent);
@@ -18,24 +18,25 @@ export var SessionStartEvent = /*#__PURE__*/function (_Component) {
   _createClass(SessionStartEvent, [{
     key: "render",
     value: function render() {
-      var event = this.props.event;
-      var userPlatform = platform.parse(event.getIn(['eventData', 'userAgent']));
+      var _this$props = this.props,
+        validationErrors = _this$props.validationErrors,
+        currentEventData = _this$props.currentEventData;
+      var summary = /*#__PURE__*/React.createElement(Text, {
+        color: validationErrors.isBreach ? 'danger' : 'primary'
+      }, t('Session started'));
       return /*#__PURE__*/React.createElement(ToggleDetails, {
-        summary: t('Session started')
-      }, /*#__PURE__*/React.createElement(Table, {
-        caption: t('System details')
-      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
-        id: "system-details-attribute"
-      }, t('attribute')), /*#__PURE__*/React.createElement(Table.ColHeader, {
-        id: "system-details-value"
-      }, t('value')))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Browser')), /*#__PURE__*/React.createElement(Table.Cell, null, // eslint-disable-next-line react/jsx-no-literals
-      "".concat(userPlatform.name, " ").concat(userPlatform.version))), /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Operating System')), /*#__PURE__*/React.createElement(Table.Cell, null, userPlatform.os.toString())))));
+        summary: summary
+      }, /*#__PURE__*/React.createElement(EventDetails, {
+        currentEventData: currentEventData,
+        validationErrors: validationErrors
+      }));
     }
   }]);
   SessionStartEvent.displayName = "SessionStartEvent";
   return SessionStartEvent;
 }(Component);
 SessionStartEvent.propTypes = {
-  event: ImmutablePropTypes.record.isRequired
+  validationErrors: sessionValidationErrorsPropType,
+  currentEventData: eventDataPropType
 };
 export default SessionStartEvent;

package/es/moderating/components/events/SessionSubmitEvent.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { EventDetails } from "../resources/EventDetails.js";
+import { ToggleDetails } from '@instructure/ui-toggle-details';
+import { Text } from '@instructure/ui-text';
+import { sessionValidationErrorsPropType, eventDataPropType } from "../../../reporting/components/resources/common/propTypes.js";
+export var SessionSubmitEvent = /*#__PURE__*/function (_Component) {
+  _inherits(SessionSubmitEvent, _Component);
+  var _super = _createSuper(SessionSubmitEvent);
+  function SessionSubmitEvent() {
+    _classCallCheck(this, SessionSubmitEvent);
+    return _super.apply(this, arguments);
+  }
+  _createClass(SessionSubmitEvent, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        validationErrors = _this$props.validationErrors,
+        currentEventData = _this$props.currentEventData;
+      var summary = /*#__PURE__*/React.createElement(Text, {
+        color: validationErrors.isBreach ? 'danger' : 'primary'
+      }, t('Session submitted'));
+      return /*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: summary
+      }, /*#__PURE__*/React.createElement(EventDetails, {
+        currentEventData: currentEventData,
+        validationErrors: validationErrors
+      }));
+    }
+  }]);
+  SessionSubmitEvent.displayName = "SessionSubmitEvent";
+  return SessionSubmitEvent;
+}(Component);
+SessionSubmitEvent.propTypes = {
+  validationErrors: sessionValidationErrorsPropType,
+  currentEventData: eventDataPropType
+};
+export default SessionSubmitEvent;

package/es/moderating/components/events/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     embeddedImageMargin: spacing.xSmall,
     embeddedImagePadding: spacing.small,
     mediaToggleMargin: spacing.xSmall,
-    mediaToggleColor: colors.contrasts.grey1214
+    mediaToggleColor: colors.tiara
   };
 };
 export default generateComponentTheme;

package/es/moderating/components/resources/AccommodationsModal/ExtraTimeMultiplier/index.js

@@ -83,8 +83,8 @@ var ExtraTimeMultiplier = /*#__PURE__*/function (_withI18nSupport) {
     return _this;
   }
   _createClass(ExtraTimeMultiplier, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
       var multiplierValue = Math.max(this.props.timerMultiplierValue, this.props.minMultiplier);
       var multiplierValueString = this.formatDecimal2FractionDigits(multiplierValue);
       this.setState({

package/es/moderating/components/resources/EventDetails.js

@@ -0,0 +1,43 @@
+import { Table } from '@instructure/ui-table';
+import { Text } from '@instructure/ui-text';
+import { IconButton } from '@instructure/ui-buttons';
+import t from '@instructure/quiz-i18n/es/format-message';
+import React from 'react';
+import { SessionBreachAlert } from "./SessionBreachAlert.js";
+import { IconInfoLine } from '@instructure/ui-icons';
+import { Tooltip } from '@instructure/ui-tooltip';
+var _ref2 = /*#__PURE__*/React.createElement(SessionBreachAlert, null);
+export var EventDetails = function EventDetails(_ref) {
+  var currentEventData = _ref.currentEventData,
+    validationErrors = _ref.validationErrors,
+    _ref$answerValue = _ref.answerValue,
+    answerValue = _ref$answerValue === void 0 ? null : _ref$answerValue;
+  var eventTimeString = "".concat(t('Event time'), ": ").concat(currentEventData.eventDate);
+  var renderTooltip = function renderTooltip(message) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      renderTip: message,
+      placement: "end",
+      on: ['click', 'hover', 'focus']
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: message,
+      renderIcon: IconInfoLine,
+      withBackground: false,
+      withBorder: false
+    }));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationErrors.isBreach && _ref2, /*#__PURE__*/React.createElement("h4", null, eventTimeString), /*#__PURE__*/React.createElement(Table, {
+    caption: t('System details')
+  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+    id: "system-details-attribute"
+  }, t('Attribute')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+    id: "system-details-value"
+  }, t('Value')))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Client IP address')), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Text, {
+    color: validationErrors.ipAddress ? 'danger' : 'primary'
+  }, currentEventData.ipAddress), validationErrors.ipAddress && renderTooltip(validationErrors.ipAddress))), /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Browser session ID')), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Text, {
+    color: validationErrors.browserSessionID ? 'danger' : 'primary'
+  }, currentEventData.browserSessionID), validationErrors.browserSessionID && renderTooltip(validationErrors.browserSessionID))), /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Browser')), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Text, {
+    color: validationErrors.browserString ? 'danger' : 'primary'
+  }, currentEventData.browserString), validationErrors.browserString && renderTooltip(validationErrors.browserString))), /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Operating System')), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Text, {
+    color: validationErrors.userPlatform ? 'danger' : 'primary'
+  }, currentEventData.userPlatform), validationErrors.userPlatform && renderTooltip(validationErrors.userPlatform))), answerValue && /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, t('Answer value')), /*#__PURE__*/React.createElement(Table.Cell, null, answerValue)))));
+};

package/es/moderating/components/resources/ModerateTable/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     emptyTextMargin: spacing.small,
-    pageBackgroundColor: colors.contrasts.white1010
+    pageBackgroundColor: colors.white
   };
 };
 export default generateComponentTheme;

package/es/moderating/components/resources/SessionBreachAlert.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Alert } from '@instructure/ui-alerts';
+import t from '@instructure/quiz-i18n/es/format-message';
+var _ref = /*#__PURE__*/React.createElement("br", null);
+export var SessionBreachAlert = function SessionBreachAlert() {
+  return /*#__PURE__*/React.createElement(Alert, {
+    variant: "warning",
+    margin: "small"
+  }, t('Potential breach: This Quiz appears to have been accessed from multiple devices or browsers.'), _ref, t('Review the activity log and take appropriate action.'));
+};

package/es/moderating/components/resources/util/checkIsBreach.js

@@ -0,0 +1,28 @@
+import t from '@instructure/quiz-i18n/es/format-message';
+export var checkIsBreach = function checkIsBreach(firstEventData, currentEventData) {
+  var result = {
+    isBreach: false
+  };
+  var checks = [{
+    key: 'ipAddress',
+    message: t('Client IP address is different from initial address')
+  }, {
+    key: 'browserSessionID',
+    message: t('Browser session ID is different from initial id')
+  }, {
+    key: 'browserString',
+    message: t('Browser is different from initial browser')
+  }, {
+    key: 'userPlatform',
+    message: t('Operating system is different from initial system')
+  }];
+  checks.forEach(function (_ref) {
+    var key = _ref.key,
+      message = _ref.message;
+    if (currentEventData[key] !== firstEventData[key]) {
+      result.isBreach = true;
+      result[key] = message;
+    }
+  });
+  return result;
+};

package/es/moderating/components/resources/util/extractSessionData.js

@@ -0,0 +1,20 @@
+import platform from 'platform';
+import { formatDateTimeSeconds } from '@instructure/quiz-i18n';
+export var extractSessionData = function extractSessionData(sourceData) {
+  if (!sourceData) return {
+    ipAddress: '',
+    browserSessionID: '',
+    eventDate: '',
+    browserString: '',
+    userPlatform: ''
+  };
+  var clientTimestamp = sourceData.getIn(['eventData', 'clientTimestamp']);
+  var userPlatform = platform.parse(sourceData.getIn(['eventData', 'userAgent']));
+  return {
+    ipAddress: sourceData.getIn(['eventData', 'ipAddress']),
+    browserSessionID: sourceData.getIn(['eventData', 'browserSessionId']),
+    eventDate: clientTimestamp ? formatDateTimeSeconds(clientTimestamp) : '',
+    browserString: "".concat(userPlatform.name, " ").concat(userPlatform.version),
+    userPlatform: userPlatform.os.toString()
+  };
+};

package/es/reporting/components/charts/Distribution/theme.js

@@ -2,8 +2,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     typography = _ref.typography;
   return {
-    barFillColor: colors.contrasts.blue4570,
-    barStarFillColor: colors.contrasts.orange4570,
+    barFillColor: colors.electric,
+    barStarFillColor: colors.fire,
     barLabelColor: colors.textDarkest,
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall,

package/es/reporting/components/charts/Legend/theme.js

@@ -5,11 +5,11 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     containerBorderWidth: borders.widthSmall,
-    containerBorderColor: colors.contrasts.grey1214,
+    containerBorderColor: colors.tiara,
     seriesContainerMargin: spacing.small,
     seriesContainerRowMargin: spacing.medium,
     seriesSwatchMargin: spacing.small,
-    seriesSwatchBackgroundColor: colors.contrasts.blue4570,
+    seriesSwatchBackgroundColor: colors.electric,
     seriesLabelFontFamily: typography.fontFamily,
     seriesLabelFontSize: typography.fontSizeXSmall,
     seriesLabelColor: colors.textDarkest

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     transitions = _ref.transitions;
   return {
-    contentCellBorderColor: colors.contrasts.grey1214,
+    contentCellBorderColor: colors.tiara,
     answerRowCellPadding: spacing.xSmall,
-    answerRowCorrectBackgroundColor: colors.contrasts.white1010,
-    answerRowAnswerIconColor: colors.contrasts.green4570,
+    answerRowCorrectBackgroundColor: colors.white,
+    answerRowAnswerIconColor: colors.shamrock,
     answerRowCorrectTextFieldFontWeight: typography.fontWeightBold,
-    answerRowCorrectBarBackgroundColor: colors.contrasts.green4570,
+    answerRowCorrectBarBackgroundColor: colors.shamrock,
     answerIconFontSize: typography.fontSizeXSmall,
-    answerIconColor: colors.contrasts.grey4570,
+    answerIconColor: colors.ash,
     answerTextfieldFontWeight: typography.fontWeightNormal,
-    respondentLinkColor: colors.contrasts.grey4570,
-    respondentLinkPresentColor: colors.contrasts.blue4570,
+    respondentLinkColor: colors.ash,
+    respondentLinkPresentColor: colors.electric,
     answerRatioPaddingLeft: spacing.small,
     barMinWidth: borders.widthSmall,
-    barBackgroundColor: colors.contrasts.grey125125,
+    barBackgroundColor: colors.licorice,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     barTransition: "width ".concat(transitions.duration)
   };

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     itemAnalysisRowPadding: spacing.small,
     itemAnalysisRowMargin: spacing.small,
-    headerTextColor: colors.contrasts.grey4570,
+    headerTextColor: colors.ash,
     headerTextFontSize: typography.fontSizeXSmall,
     metricNoteFontSize: typography.fontSizeMedium,
-    metricNoteColor: colors.contrasts.grey4570,
+    metricNoteColor: colors.ash,
     metricsRowLowerPadding: spacing.large,
     stemFontSize: typography.fontSizeXSmall,
     stemLineHeight: typography.lineHeight,
     stemMargin: spacing.small,
     emptyTextPadding: spacing.small,
-    emptyTextColor: colors.contrasts.grey4570,
+    emptyTextColor: colors.ash,
     answerDistributionPadding: spacing.small,
     answerDistributionChartPadding: spacing.small,
     answerDistributionLegendPadding: spacing.small,
-    answerDistributionSwatchColor: colors.contrasts.blue4570,
+    answerDistributionSwatchColor: colors.electric,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/ChoiceTypeTableRow/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    colorGreen: colors.contrasts.green4570,
+    colorGreen: colors.shamrock,
     cellPadding: '0.75rem 0.75rem'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/theme.js

@@ -1,11 +1,11 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    colorGreen: colors.contrasts.green4570,
-    colorBlue: colors.contrasts.blue4570,
-    colorRed: colors.contrasts.red4570,
-    colorGrey: colors.contrasts.grey4570,
-    colorHeaderBottomBorder: colors.contrasts.grey1214,
+    colorGreen: colors.shamrock,
+    colorBlue: colors.brand,
+    colorRed: colors.crimson,
+    colorGrey: colors.ash,
+    colorHeaderBottomBorder: colors.tiara,
     cellPadding: '13.5px 13.5px;'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/theme.js

@@ -3,8 +3,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     tableBottomPadding: spacing.medium,
-    colorGreen: colors.contrasts.green4570,
-    colorGray: colors.contrasts.grey1214,
+    colorGreen: colors.shamrock,
+    colorGray: colors.tiara,
     cellPadding: '0.75rem 0.75rem'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    blankBorderColor: colors.contrasts.grey1214,
+    blankBorderColor: colors.tiara,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     viewPaddingRight: spacing.xxSmall,
     metricNumberContextFontSize: typography.fontSizeMedium,
     metricNumberContextFontWeight: typography.fontWeightNormal,
-    blankBorderColor: colors.contrasts.grey1214,
+    blankBorderColor: colors.tiara,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js

@@ -7,7 +7,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
-    quizSummaryBorderBottomColor: colors.contrasts.grey1214
+    quizSummaryBorderBottomColor: colors.tiara
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -3,9 +3,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     typography = _ref.typography;
   return {
-    legendRectFillColor: colors.contrasts.blue4570,
+    legendRectFillColor: colors.electric,
     legendPadding: spacing.small,
-    legendBorderColor: colors.contrasts.grey4570,
+    legendBorderColor: colors.ash,
     legendFontSize: typography.fontSizeXSmall,
     legendMargin: spacing.medium
   };

package/es/reporting/components/resources/QuizAndItemAnalysis/presenter.js

@@ -40,8 +40,8 @@ export var QuizAndItemAnalysis = (_dec = withStyleOverrides(generateStyle, gener
       this.getAnalyses(this.props.activeQuizId);
     }
   }, {
-    key: "componentWillUpdate",
-    value: function componentWillUpdate(nextProps) {
+    key: "UNSAFE_componentWillUpdate",
+    value: function UNSAFE_componentWillUpdate(nextProps) {
       if (this.props.activeQuizId !== nextProps.activeQuizId) {
         this.getAnalyses(nextProps.activeQuizId);
       }

package/es/reporting/components/resources/QuizAndItemAnalysis/theme.js

@@ -8,7 +8,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     titleMarginBottom: spacing.xSmall,
     emptyTextPadding: spacing.small,
     emptyTextFontSize: typography.fontSizeLarge,
-    emptyTextColor: colors.contrasts.grey4570
+    emptyTextColor: colors.ash
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/resources/StudentAnalysis/ReportCard/theme.js

@@ -9,6 +9,6 @@ export var generateComponentTheme = function generateComponentTheme(_ref) {
     cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
-    quizSummaryBorderBottomColor: colors.contrasts.grey1214
+    quizSummaryBorderBottomColor: colors.tiara
   };
 };

package/es/reporting/components/resources/common/propTypes.js

@@ -163,4 +163,18 @@ export var afsFlags = PropTypes.shape({
   numericEnabled: PropTypes.bool.isRequired,
   essayEnabled: PropTypes.bool.isRequired,
   fileUploadEnabled: PropTypes.bool.isRequired
+});
+export var sessionValidationErrorsPropType = PropTypes.shape({
+  isBreach: PropTypes.bool,
+  ipAddress: PropTypes.string,
+  browserSessionID: PropTypes.string,
+  browserString: PropTypes.string,
+  userPlatform: PropTypes.string
+});
+export var eventDataPropType = PropTypes.shape({
+  ipAddress: PropTypes.string,
+  browserSessionID: PropTypes.string,
+  eventDate: PropTypes.string,
+  browserString: PropTypes.string,
+  userPlatform: PropTypes.string
 });

package/es/taking/api/taking.js

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 // =============================================
 // =============================================
 
@@ -25,6 +27,7 @@ import { getSessionItems, handleQuizSessionFetch } from "../../common/actions/qu
 import { handleSessionItemsResponse, handleResumeDataResponse, handleQuizSessionResponse } from "../../common/api/callHandlers.js";
 import * as modalActions from "../../common/actions/modal.js";
 import { backtrackingNextQuestion, sessionStartOrResumeEvent, setCurrentSessionItemPosition, submitQuizSessionEvent, updateQuizSubmitFlag, updateQuizSessionStatusOnPageLoad, updateTimerInfo } from "../../common/actions/taking.js";
+import { getClientIpAddress } from "../../common/util/getClientIpAddress.js";
 var getQuizSessionConfig = function getQuizSessionConfig(quizSession) {
   // these should be handled by existing functions
   var oneQuestionAtATime = quizSession.isOneQuestionAtATime();
@@ -144,9 +147,29 @@ export function newQuizTakingSession(quizSessionId) {
   };
 }
 export function onQuizSessionReadyForTaking(quizSession) {
-  return function (dispatch) {
-    dispatch([makeSessionItemCall(quizSession), getResumeData(quizSession.id), sessionStartOrResumeEvent(navigator.userAgent), updateQuizSessionStatusOnPageLoad(quizSession.status)]);
-  };
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(dispatch) {
+      var ipAddress;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return getClientIpAddress(quizSession.id);
+            case 2:
+              ipAddress = _context.sent;
+              dispatch([makeSessionItemCall(quizSession), getResumeData(quizSession.id), sessionStartOrResumeEvent(navigator.userAgent, ipAddress), updateQuizSessionStatusOnPageLoad(quizSession.status)]);
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 }
 
 // ====================================

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

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     breakpoints = _ref.breakpoints;
   return {
-    contentBackgroundColor: colors.contrasts.white1010,
+    contentBackgroundColor: colors.white,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.medium,
     breadCrumbMarginBottom: spacing.large,

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

@@ -219,8 +219,8 @@ var BankEntry = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _th
       this.props.setShouldClone(false);
     }
   }, {
-    key: "componentWillMount",
-    value: function componentWillMount() {
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
       this.props.setShouldClone(false);
     }
   }, {

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

@@ -10,17 +10,17 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography,
     borders = _ref.borders;
   return {
-    contentBackgroundColor: colors.contrasts.white1010,
+    contentBackgroundColor: colors.white,
     contentPaddingTopBottom: 0,
     contentPaddingLeftRight: 0,
     breadCrumbMarginBottom: spacing.large,
     entryRowMargin: spacing.small,
-    headerRowColor: colors.contrasts.grey4570,
+    headerRowColor: colors.ash,
     headerRowPadding: spacing.small,
     headerTextFontSize: typography.fontSizeSmall,
     leftHeaderMargin: spacing.small,
-    headerBackgroundColor: colors.contrasts.grey1111,
-    headerColor: colors.contrasts.grey125125,
+    headerBackgroundColor: colors.porcelain,
+    headerColor: colors.licorice,
     headerPaddingTopBottom: spacing.xSmall,
     headerPaddingLeftRight: spacing.small,
     footerPaddingBottom: spacing.xSmall,
@@ -28,7 +28,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     rightHeaderPaddingLeft: spacing.xSmall,
     rightFooterPaddingLeftRight: spacing.small,
     entryEditBorderWidth: borders.widthSmall,
-    entryEditBorderColor: colors.contrasts.grey1214
+    entryEditBorderColor: colors.tiara
   };
 };
 var _default = generateComponentTheme;

package/lib/banks/components/BankEntryRow/styles.js

@@ -38,6 +38,7 @@ var generateStyle = function generateStyle(componentTheme) {
       fontSize: componentTheme.headerTextFontSize
     },
     stem: {
+      overflowX: 'auto',
       fontSize: componentTheme.stemFontSize,
       lineHeight: componentTheme.stemLineHeight,
       '& p': {

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

@@ -11,18 +11,18 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     entryDetailPadding: spacing.small,
-    headerRowColor: colors.contrasts.grey4570,
+    headerRowColor: colors.ash,
     buttonsZIndex: '3333',
     expandButtonContainerBorderWidth: borders.widthMedium,
-    expandButtonContainerBorderColor: colors.contrasts.grey1214,
+    expandButtonContainerBorderColor: colors.tiara,
     addButtonMargin: spacing.small,
-    headerTextColor: colors.contrasts.grey4570,
+    headerTextColor: colors.ash,
     headerTextFontSize: typography.fontSizeXSmall,
     stemFontSize: typography.fontSizeMedium,
     stemLineHeight: typography.lineHeight,
     footerPadding: spacing.medium,
     footerBorderWidth: borders.widthSmall,
-    footerBorderColor: colors.contrasts.grey1214,
+    footerBorderColor: colors.tiara,
     footerFontSize: typography.fontSizeXSmall,
     deletePrefaceMargin: spacing.xxSmall
   };

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

@@ -9,13 +9,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    contentBackgroundColor: colors.contrasts.white1010,
+    contentBackgroundColor: colors.white,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.xLarge,
     breadCrumbMarginBottom: spacing.large,
     headerPaddingBottom: spacing.large,
     headerBorderWidth: borders.widthSmall,
-    headerBorderColor: colors.contrasts.grey1214
+    headerBorderColor: colors.tiara
   };
 };
 var _default = generateComponentTheme;

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

@@ -454,7 +454,7 @@ var BanksList = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _th
       }, (0, _emotion.jsx)(_uiTable.Table.Row, null, this.renderTableSortHeader('name', (0, _formatMessage.default)('Name')), this.renderTableSortHeader('updated_at', (0, _formatMessage.default)('Updated')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "header-num-questions",
         width: "1"
-      }, (0, _formatMessage.default)('Questions')), this.renderTableSortHeader('last_used', (0, _formatMessage.default)('Last Used')), this.renderTableSortHeader('created_at', (0, _formatMessage.default)('Created')), !this.props.isCompact && (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Questions')), this.renderTableSortHeader('last_used', (0, _formatMessage.default)('Last Used')), this.renderTableSortHeader('created_at', (0, _formatMessage.default)('Created')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "header-option-links",
         width: "1"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank option links'))))), (0, _emotion.jsx)(_uiTable.Table.Body, null, (this.props.banks.toArray() || []).map(function (bank) {

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

@@ -11,13 +11,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     bankRowBorderWidth: borders.widthSmall,
-    bankRowBorderColor: colors.contrasts.grey1214,
+    bankRowBorderColor: colors.tiara,
     bankInfoMargin: spacing.small,
     bankTitleFontSize: typography.fontSizeSmall,
     bankTitlePadding: spacing.xSmall,
-    bankTitleLinkColor: colors.contrasts.grey125125,
-    bankTitleLinkHoverColor: colors.contrasts.grey125125,
-    bankDetailsColor: colors.contrasts.grey4570,
+    bankTitleLinkColor: colors.licorice,
+    bankTitleLinkHoverColor: colors.licorice,
+    bankDetailsColor: colors.ash,
     bankDetailsFontSize: typography.fontSizeXSmall,
     bankOptionsMargin: spacing.small,
     BankOptionIconMargin: spacing.xSmall,