[components] Fix design, unifying color & button usage on Coorp Manager

[adamska27]

https://go1web.atlassian.net/jira/software/projects/CLXP/boards/626?selectedIssue=CLXP-162

Detailed purpose of the PR

Result and observation

• fix add button to use primary type

  

• [ ] Breaking changes ?
  If checked, what have you broken ?

• [ ] Extra lib ? If checked, Which extra lib did you add ? (name, purpose, link ...).

Testing Strategy review app: https://6628d2e0fd4aa63f3be2e1ab-rudeexhhfs.chromatic.com/

• [ ] Already covered by tests
• [ ] Manual testing
• [ ] Unit testing

[codecov[bot]]

Codecov Report

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

Project coverage is 93.35%. Comparing base (cabd79c) to head (47317df). Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
...src/molecule/learning-priority-setup-item/index.js	50.00%	1 Missing :warning:

Additional details and impacted files

[](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) ```diff @@ Coverage Diff @@ ## master #2882 +/- ## ========================================== - Coverage 94.01% 93.35% -0.67% ========================================== Files 408 408 Lines 6335 6333 -2 Branches 435 436 +1 ========================================== - Hits 5956 5912 -44 - Misses 335 340 +5 - Partials 44 81 +37 ``` | [Files with missing lines](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) | Coverage Δ | | |---|---|---| | [...pacademy-components/src/atom/button-link/index.tsx](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fatom%2Fbutton-link%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9hdG9tL2J1dHRvbi1saW5rL2luZGV4LnRzeA==) | `95.83% <100.00%> (+0.08%)` | :arrow_up: | | [...rpacademy-components/src/atom/button-link/types.ts](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fatom%2Fbutton-link%2Ftypes.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9hdG9tL2J1dHRvbi1saW5rL3R5cGVzLnRz) | `100.00% <ø> (ø)` | | | [...demy-components/src/atom/input-doublestep/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fatom%2Finput-doublestep%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9hdG9tL2lucHV0LWRvdWJsZXN0ZXAvaW5kZXguanM=) | `96.96% <100.00%> (ø)` | | | [.../@coorpacademy-components/src/atom/select/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fatom%2Fselect%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9hdG9tL3NlbGVjdC9pbmRleC5qcw==) | `100.00% <ø> (ø)` | | | [...cademy-components/src/molecule/base-modal/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?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) | `88.23% <100.00%> (ø)` | | | [...components/src/molecule/brand-create-form/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fbrand-create-form%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9icmFuZC1jcmVhdGUtZm9ybS9pbmRleC5qcw==) | `100.00% <ø> (ø)` | | | [...omponents/src/molecule/brand-download-box/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fbrand-download-box%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9icmFuZC1kb3dubG9hZC1ib3gvaW5kZXguanM=) | `100.00% <ø> (ø)` | | | [...-components/src/molecule/brand-form-group/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fbrand-form-group%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9icmFuZC1mb3JtLWdyb3VwL2luZGV4Lmpz) | `95.34% <100.00%> (ø)` | | | [...src/molecule/discipline-associated-skills/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Fdiscipline-associated-skills%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9kaXNjaXBsaW5lLWFzc29jaWF0ZWQtc2tpbGxzL2luZGV4Lmpz) | `88.23% <ø> (ø)` | | | [...ents/src/molecule/learning-priority-modal/index.js](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree&filepath=packages%2F%40coorpacademy-components%2Fsrc%2Fmolecule%2Flearning-priority-modal%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy#diff-cGFja2FnZXMvQGNvb3JwYWNhZGVteS1jb21wb25lbnRzL3NyYy9tb2xlY3VsZS9sZWFybmluZy1wcmlvcml0eS1tb2RhbC9pbmRleC5qcw==) | `61.66% <100.00%> (-1.24%)` | :arrow_down: | | ... and [6 more](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) | | ... and [17 files with indirect coverage changes](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy) ------ [Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?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/2882?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=CoorpAcademy). Last update [03a0363...47317df](https://app.codecov.io/gh/CoorpAcademy/components/pull/2882?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).

[wernerdurand]

@HuyIT9898 I have some feedbacks also,

Can you change these yellow buttons with the button link secondary please?

Also the Red/danger buttons are still the old one

Thanks Huy!

[HuyIT9898]

Hi @AdrieanKhisbe @wernerdurand, the comments have been resolved and can be checked here: https://6628d2e0fd4aa63f3be2e1ab-rudeexhhfs.chromatic.com/