CLXP-48 Addressing of glitchs and tweaks on the MyLearning template

[HuyIT9898]

Purpose: Addressing of glitchs and tweaks on the MyLearning template

• [x] ensuring that the platform color is used for the button notably (ex: skill picker)
• [x] progress and percentage on skill card should be based on score
• [x] The sorting of skills card should be based on score descending
• [ ] skills presented might be filtered from backend TBD (will be done in BE)
• [x] Graph dotted line are over the graph shape
• [x] After deselecting a skill on the graph the stats cards are still displaying the skill stats instead of focused skills stats

Review app: https://6628d2e0fd4aa63f3be2e1ab-ujmmoyfaps.chromatic.com/?path=/story/template-mylearning--default

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 94.11765% with 1 line in your changes missing coverage. Please review.

Project coverage is 94.24%. Comparing base (7dbf4b8) to head (9735f32). Report is 1 commits behind head on master.

:exclamation: Current head 9735f32 differs from pull request most recent head 1e07669

Please upload reports for the commit 1e07669 to get more accurate results.

Additional details and impacted files

[](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) ```diff @@ Coverage Diff @@ ## master #2855 +/- ## ======================================= Coverage 94.23% 94.24% ======================================= Files 396 396 Lines 6057 6065 +8 Branches 417 417 ======================================= + Hits 5708 5716 +8 Misses 277 277 Partials 72 72 ``` | [Files](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) | Coverage Δ | | |---|---|---| | [...cademy-components/src/molecule/base-modal/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fbase-modal%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9iYXNlLW1vZGFsL2luZGV4Lmpz) | `90.00% <100.00%> (+4.28%)` | :arrow_up: | | [...omponents/src/molecule/learner-skill-card/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Flearner-skill-card%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9sZWFybmVyLXNraWxsLWNhcmQvaW5kZXguanM=) | `100.00% <100.00%> (ø)` | | | [...rc/molecule/learning-profile-radar-chart/index.tsx](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Flearning-profile-radar-chart%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9sZWFybmluZy1wcm9maWxlLXJhZGFyLWNoYXJ0L2luZGV4LnRzeA==) | `86.66% <ø> (ø)` | | | [...omponents/src/molecule/skill-picker-modal/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fskill-picker-modal%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9za2lsbC1waWNrZXItbW9kYWwvaW5kZXguanM=) | `71.42% <ø> (ø)` | | | [...ademy-components/src/template/my-learning/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Ftemplate%2Fmy-learning%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy90ZW1wbGF0ZS9teS1sZWFybmluZy9pbmRleC5qcw==) | `85.33% <87.50%> (+0.61%)` | :arrow_up: | ------ [Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) > `Δ = absolute (impact)`, `ø = not affected`, `? = missing data` > Powered by [Codecov](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). Last update [b94153c...1e07669](https://app.codecov.io/gh/CoorpAcademy/components/pull/2855?dropdown=coverage&src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy).