PROD-2754 - fix mobile download certificate

Author: vas3a

src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.module.scss

@@ -15,7 +15,7 @@
 }
 
 .badge {
-    svg {
+    img {
         display: block;
         @include icon-size(78);
     }

src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx

@@ -18,7 +18,7 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
         <div className={styles['wrap']}>
             <div className={styles['top-wrap']}>
                 <div className={styles['badge']}>
-                    <CourseBadge type={props.type} />
+                    <CourseBadge type={props.type} asImg />
                 </div>
                 <h5 className={classNames('details', styles['course-title'])}>
                     {props.course}

src-ts/tools/learn/learn-lib/course-badge/CourseBadge.tsx

@@ -1,16 +1,23 @@
-import { FC } from 'react'
+import { FC, SVGProps } from 'react'
 
 import { LearnCertificateTrackType } from '../all-certifications-provider'
 
-import { getBadge } from './badges.functions'
+import { getBadge, getBadgeImg } from './badges.functions'
 import styles from './CourseBadge.module.scss'
 
 interface CourseBadgeProps {
     type: LearnCertificateTrackType
+    asImg?: boolean
 }
 
 const CourseBadge: FC<CourseBadgeProps> = (props: CourseBadgeProps) => {
-    const Badge: ReturnType<typeof getBadge> = getBadge(props.type)
+    if (props.asImg) {
+        const badgeImg: string = getBadgeImg(props.type)
+        return (
+            <img src={badgeImg} alt={props.type} />
+        )
+    }
+    const Badge: FC<SVGProps<SVGSVGElement>> = getBadge(props.type)
 
     return (
         <div className={styles['wrap']}>

src-ts/tools/learn/learn-lib/course-badge/badges.functions.ts

@@ -1,6 +1,15 @@
 import { FC, SVGProps } from 'react'
 
-import { DataScienceBadge, DesignBadge, DevelopBadge, QABadge } from './badges'
+import {
+    DataScienceBadge,
+    DesignBadge,
+    DevelopBadge,
+    QABadge,
+    DataScienceBadgeImg,
+    DesignBadgeImg,
+    DevelopBadgeImg,
+    QABadgeImg,
+} from './badges'
 
 const badgesMap: {[key: string]: FC<SVGProps<SVGSVGElement>>} = {
     DATASCIENCE: DataScienceBadge,
@@ -9,6 +18,17 @@ const badgesMap: {[key: string]: FC<SVGProps<SVGSVGElement>>} = {
     QA: QABadge,
 }
 
+const badgesImgMap: {[key: string]: string} = {
+    DATASCIENCE: DataScienceBadgeImg,
+    DESIGN: DesignBadgeImg,
+    DEV: DevelopBadgeImg,
+    QA: QABadgeImg,
+}
+
 export function getBadge(badgeType: keyof typeof badgesMap): FC<SVGProps<SVGSVGElement>> {
     return badgesMap[badgeType]
 }
+
+export function getBadgeImg(badgeType: keyof typeof badgesMap): string {
+    return badgesImgMap[badgeType]
+}

src-ts/tools/learn/learn-lib/course-badge/badges/datascience-badge.png

@@ -1,3 +1,8 @@
+import DataScienceBadgeImg from './datascience-badge.png'
+import DesignBadgeImg from './design-badge.png'
+import DevelopBadgeImg from './develop-badge.png'
+import QABadgeImg from './qa-badge.png'
+
 import { ReactComponent as DataScienceBadge } from './datascience-badge.svg'
 import { ReactComponent as DesignBadge } from './design-badge.svg'
 import { ReactComponent as DevelopBadge } from './develop-badge.svg'
@@ -8,4 +13,8 @@ export {
     DesignBadge,
     DevelopBadge,
     QABadge,
+    DataScienceBadgeImg,
+    DesignBadgeImg,
+    DevelopBadgeImg,
+    QABadgeImg,
 }