@coorpacademy/components 11.35.2-alpha.4 → 11.35.2-forcedeploy.13

package/lib/template/common/dashboard/index.d.ts

@@ -19,7 +19,7 @@ declare namespace Dashboard {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -27,7 +27,17 @@ declare namespace Dashboard {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -114,8 +124,8 @@ declare namespace Dashboard {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -553,7 +563,7 @@ declare namespace Dashboard {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -561,7 +571,17 @@ declare namespace Dashboard {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -776,7 +796,7 @@ declare namespace Dashboard {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -784,7 +804,17 @@ declare namespace Dashboard {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -871,8 +901,8 @@ declare namespace Dashboard {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -1310,7 +1340,7 @@ declare namespace Dashboard {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -1318,7 +1348,17 @@ declare namespace Dashboard {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -1521,4 +1561,5 @@ declare namespace Dashboard {
     };
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/lib/template/common/search-page/index.d.ts

@@ -200,7 +200,7 @@ declare namespace SearchPage {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -208,7 +208,17 @@ declare namespace SearchPage {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -295,8 +305,8 @@ declare namespace SearchPage {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -734,7 +744,7 @@ declare namespace SearchPage {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -742,7 +752,17 @@ declare namespace SearchPage {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -945,4 +965,5 @@ declare namespace SearchPage {
     }
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/lib/template/external-course/index.d.ts

@@ -37,7 +37,7 @@ declare namespace ExternalCourse {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -45,7 +45,17 @@ declare namespace ExternalCourse {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -132,8 +142,8 @@ declare namespace ExternalCourse {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -571,7 +581,7 @@ declare namespace ExternalCourse {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -579,7 +589,17 @@ declare namespace ExternalCourse {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -805,4 +825,5 @@ declare namespace ExternalCourse {
     }
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/lib/template/my-learning/index.d.ts

@@ -46,7 +46,6 @@ declare namespace MyLearning {
         const learnerFeature: PropTypes.Requireable<boolean>;
         const isLoading: PropTypes.Requireable<boolean>;
         const onSkillFocusConfirm: PropTypes.Requireable<(...args: any[]) => any>;
-        const onReviewSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const onExploreSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const learningPriorities: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;

package/lib/template/my-learning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAgHA,mEA+ZC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAmHA,mEAwZC"}

package/lib/template/my-learning/index.js

@@ -30,11 +30,13 @@ var _searchValueIncluded = _interopRequireDefault(require("../../util/search-val
 var _timeFormat = require("../../util/time-format");
 var _cardsList = _interopRequireDefault(require("../../molecule/dashboard/cards-list"));
 var _title = _interopRequireDefault(require("../../atom/title"));
+var _colors = require("../../variables/colors");
 var _style = _interopRequireDefault(require("./style.css"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const roundScore = value => Math.round(value * 10) / 10;
 const ChangeSkillFocusButton = (props, context) => {
   const {
     onClick
@@ -53,7 +55,7 @@ const ChangeSkillFocusButton = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
     hoverBackgroundColor: primarySkinColor,
-    hoverColor: "#FFFFFF",
+    hoverColor: _colors.COLORS.white,
     onClick: onClick,
     label: translate('skills_change_focus'),
     "data-name": "change-skill-focus-button",
@@ -89,14 +91,14 @@ const FilterButton = (props, context) => {
   const Content = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, filter, /*#__PURE__*/_react.default.createElement("span", {
     className: active ? _style.default.skillFilterNumber : _style.default.skillFilterNumberInActive,
     style: {
-      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
-      color: active ? primarySkinColor : '#515161'
+      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : _colors.COLORS.gray,
+      color: active ? primarySkinColor : _colors.COLORS.cm_grey_500
     }
   }, skillTotal)), [filter, skillTotal, active, primarySkinColor]);
   const buttonProps = {
     customStyle: {
-      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',
-      color: active ? primarySkinColor : '#9999A8',
+      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : _colors.COLORS.white,
+      color: active ? primarySkinColor : _colors.COLORS.cm_grey_400,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
@@ -125,7 +127,6 @@ const MyLearning = (props, context) => {
     learnerFeature = true,
     isLoading,
     onSkillFocusConfirm,
-    onReviewSkill,
     onExploreSkill,
     learningPriorities
   } = props;
@@ -143,7 +144,7 @@ const MyLearning = (props, context) => {
   const skillsReviewReady = (0, _react.useMemo)(() => {
     return searchResults.filter(skill => skillsInformation[skill] ? skillsInformation[skill].availableForReview : false);
   }, [searchResults, skillsInformation]);
-  const graphDatas = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, (0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
+  const graphDatas = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, roundScore((0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation))]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
   const graphLegends = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, skillsLocales[skill]]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsLocales]);
   const filters = (0, _react.useMemo)(() => {
     return {
@@ -167,7 +168,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'book-open-cover',
-      backgroundColor: '#D9F4F7'
+      backgroundColor: _colors.COLORS.turquoise_100
     }
   }, {
     title: translate('skill_chart_side_panel_learning_hours'),
@@ -175,7 +176,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'clock',
-      backgroundColor: '#FAD6DE'
+      backgroundColor: _colors.COLORS.pink_100
     }
   }, {
     title: translate('skill_chart_side_panel_questions_to_review'),
@@ -183,7 +184,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'circle-question',
-      backgroundColor: '#FFDCD1'
+      backgroundColor: _colors.COLORS.orange_100
     }
   }];
   const skillsScore = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, (0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs2.default)(skills), [skills, skillsInformation]);
@@ -217,9 +218,9 @@ const MyLearning = (props, context) => {
       subtitle: translate('learning_priorities_description'),
       icon: {
         iconName: 'sign-post',
-        iconColor: '#A32700',
+        iconColor: _colors.COLORS.cm_orange_800,
         borderRadius: '12px',
-        backgroundColor: '#FFDCD1'
+        backgroundColor: _colors.COLORS.orange_100
       },
       tag: {
         label: `${(0, _size2.default)(learningPriorities.cards)}`,
@@ -250,7 +251,7 @@ const MyLearning = (props, context) => {
     className: _style.default.skillFocusHeaderIcon
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "bullseye-arrow",
-    backgroundColor: "#DDD1FF",
+    backgroundColor: _colors.COLORS.purple_100,
     borderRadius: "12px",
     size: {
       faSize: 20,
@@ -318,7 +319,7 @@ const MyLearning = (props, context) => {
     className: _style.default.skillListHeaderIcon
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "dumbbell",
-    backgroundColor: "#FFF9D1",
+    backgroundColor: _colors.COLORS.yellow_100,
     size: {
       faSize: 20,
       wrapperSize: 48
@@ -373,7 +374,7 @@ const MyLearning = (props, context) => {
     onClick: handleSearchReset
   }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillListContainer
-  }, activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+  }, activeFilter === 'review' && filters[activeFilter].length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillListEmptyContainer
   }, /*#__PURE__*/_react.default.createElement(_reviewNoSkills.default, {
     titleNoSkills: translate('review_skill_empty'),
@@ -387,9 +388,6 @@ const MyLearning = (props, context) => {
       contentCompleted: 0,
       questionsToReview: 0
     };
-    function handleReviewSkill() {
-      onReviewSkill(skill);
-    }
     function handleExploreSkill() {
       onExploreSkill(skill);
     }
@@ -398,18 +396,25 @@ const MyLearning = (props, context) => {
       content,
       questionsToReview
     } = skillsInformation[skill] ? skillsInformation[skill].stats : defaultStats;
+    const {
+      color,
+      name
+    } = (0, _get2.default)([skill, 'icon'], skillsInformation);
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index
     }, /*#__PURE__*/_react.default.createElement(_learnerSkillCard.default, {
       skillTitle: skillsLocales[skill],
+      cardIndex: index,
       focus: selectedSkills.includes(skill),
       metrics: {
-        score: score.toFixed(1),
+        score,
         content,
         questionsToReview
       },
-      review: skillsInformation[skill] ? skillsInformation[skill].availableForReview : false,
-      onReviewClick: handleReviewSkill,
+      icon: {
+        color,
+        name
+      },
       onExploreClick: handleExploreSkill
     }));
   }))));
@@ -435,7 +440,6 @@ MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
   learnerFeature: _propTypes.default.bool,
   isLoading: _propTypes.default.bool,
   onSkillFocusConfirm: _propTypes.default.func,
-  onReviewSkill: _propTypes.default.func,
   onExploreSkill: _propTypes.default.func,
   learningPriorities: _propTypes.default.shape(_cardsList.default.propTypes)
 } : {};