PM-1904 - show AI icon banner

Author: vas3a

src/apps/review/src/lib/assets/icons/icon-submission.svg

@@ -17,6 +17,7 @@ import classNames from 'classnames'
 import { Pagination, TableLoading } from '~/apps/admin/src/lib'
 import { Sort } from '~/apps/admin/src/platform/gamification-admin/src/game-lib'
 import { Button, IconOutline, InputText } from '~/libs/ui'
+import { NotificationContextType, useNotification } from '~/libs/shared'
 
 import { CHALLENGE_TYPE_SELECT_ALL_OPTION } from '../../../config/index.config'
 import {
@@ -39,6 +40,7 @@ import { SelectOption } from '../../../lib/models/SelectOption.model'
 import { getAllowedTypeAbbreviationsByTrack } from '../../../lib/utils/challengeTypesByTrack'
 
 import styles from './ActiveReviewsPage.module.scss'
+import { IconAiReview } from '../../../lib/assets/icons'
 
 interface Props {
     className?: string
@@ -50,6 +52,8 @@ const DEFAULT_SORT: Sort = {
 }
 
 export const ActiveReviewsPage: FC<Props> = (props: Props) => {
+    const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
+
     const {
         loginUserInfo,
     }: ReviewAppContextModel = useContext(ReviewAppContext)
@@ -193,6 +197,17 @@ export const ActiveReviewsPage: FC<Props> = (props: Props) => {
         })
     }, [loadActiveReviews, sort])
 
+
+    useEffect(() => {
+        const notification = showBannerNotification({
+            id: 'ai-review-icon-notification',
+            icon: <IconAiReview />,
+            message: `Challenges with this icon indicates that an ​​AI
+                review has been completed in particular phase.`,
+        })
+        return () => notification && removeNotification(notification.id)
+    }, [showBannerNotification])
+
     return (
         <PageWrapper
             pageTitle='My Active Challenges'

src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx

@@ -35,4 +35,7 @@
 .icon {
     flex: 0 0;
     margin-right: $sp-2;
+    > svg path {
+        fill: $tc-white;
+    }
 }

src/libs/ui/lib/components/notification/banner/NotificationBanner.module.scss

@@ -21,11 +21,11 @@ const NotificationBanner: FC<NotificationBannerProps> = props => {
     return (
         <div className={styles.wrap}>
             <div className={styles.inner}>
-                {props.icon || (
-                    <div className={styles.icon}>
+                <div className={styles.icon}>
+                    {props.icon || (
                         <InformationCircleIcon className='icon-xl' />
-                    </div>
-                )}
+                    )}
+                </div>
 
                 {props.content}