Incorrect icons fill

[PKulkoRaccoonGang]

At the moment, Paragon provides a large number of icons for consumers. When using WarningFilled, @KristinAoki noticed that the icon was missing a color fill. After checking some Paragon icons, it was seen that this problem is not isolated and can occur in other icons.

• We will look for non-Alert usages of the above icons and document them.
• We will fix these icons to look as they should but in black/white.
• Verify the Alert styling, etc. works correctly with the updated icons.
• [consideration] Check in with an owning team using one of the these icons to QA.

Tasks

Beta Give feedback

1. Investigate this problem and find the necessary solution
2. Check all icons for the correct display

[adamstankiewicz]

Affected icons:

[adamstankiewicz]

• We will look for non-Alert usages of the above icons and document them.
• We will fix these icons to look as they should but in black/white.
• Verify the Alert styling, etc. works correctly with the updated icons.
• (consideration] Check in with an owning team using one of the these icons to QA.

[monteri]

Non-Alert usages:
WarningFilled
https://github.com/openedx/frontend-app-account/blob/master/src/account-settings/AccountSettingsPage.jsx#L383

https://github.com/openedx/frontend-app-admin-portal/blob/master/src/components/system-wide-banner/SystemWideWarningBanner.jsx#L8

https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/master/src/components/dashboard/sidebar/CouponCodesSummaryCard.jsx#L63

https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/master/src/components/dashboard/sidebar/SubscriptionSummaryCard.jsx#L99

https://github.com/openedx/frontend-app-learning/blob/master/src/course-home/progress-tab/credit-information/CreditInformation.jsx#L80

https://github.com/openedx/frontend-app-learning/blob/master/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx#L53

https://github.com/openedx/frontend-app-ora-grading/blob/master/src/containers/ResponseDisplay/SubmissionFiles.jsx#L88

[adamstankiewicz]

@monteri @PKulkoRaccoonGang I believe the next step here is to try to get the impacted icons running in at least one of these example non-Alert usages. The quickest way might be to just temporarily override everything in those MFE's src/index.jsx file's APP_READY callback function to render just the necessary icon(s) as a quick sanity check (to avoid needing to figure out how to get to those specific usages in each MFE's user flows).

Ideally, we'd see the before (solid gray icons) initially, and (after) then once Paragon is upgraded in the MFE to account for the icons fix, the icons should look semantically correct.

[PKulkoRaccoonGang]

@adamstankiewicz I tested the corrected icons in the MFE Course Authoring. Each screenshot shows the version of the Paragon release being tested. As we can see the icons are now displayed correctly! 👍

[adamstankiewicz]

Thanks for verifying, @PKulkoRaccoonGang! Closing this issue.