Merge pull request #522 from topcoder-platform/TCA-1024_fixes-on-cert-details

TCA-1024 fixes breadcrumbs on mobile & optimizes cert bg

Author: vas3a

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -38,7 +38,12 @@
             display: inline-flex;
             align-items: center;
             padding: 0;
-
+            @include ltesm {
+                flex: 0 1 auto;
+                &:first-child {
+                    flex: 1 0 auto;
+                }
+            }
             a {
                 @extend .overline;
                 display: block;

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss

@@ -4,6 +4,17 @@
 .wrap {
     background-color: $tc-white;
     height: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+.background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
 }
 
 // TODO: add cross track theme
@@ -19,8 +30,6 @@
     }
 
     &-dev {
-        background-image: url('./assets/bg-dev.png');
-
         .certTitle {
             color: $tc-dev-track-color;
         }
@@ -31,8 +40,6 @@
     }
 
     &-datascience {
-        background-image: url('./assets/bg-datascience.png');
-
         .certTitle {
             color: $tc-datascience-track-color;
         }
@@ -43,8 +50,6 @@
     }
 
     &-design {
-        background-image: url('./assets/bg-design.png');
-
         .certTitle {
             color: $tc-design-track-color;
         }
@@ -55,8 +60,6 @@
     }
 
     &-qa {
-        background-image: url('./assets/bg-qa.png');
-
         .certTitle {
             color: $tc-qa-track-color;
         }

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx

@@ -9,6 +9,7 @@ import { TCACertificateType, TCACertification } from '../../data-providers'
 import { CertificateBadgeIcon } from '../../dynamic-icons'
 import { DougSigSvg } from '../../svgs'
 
+import { CertificateBackground } from './certificate-background'
 import styles from './TCACertificate.module.scss'
 
 interface TCACertificateProps {
@@ -47,7 +48,8 @@ const TCACertificate: FC<TCACertificateProps> = (props: TCACertificateProps) =>
             className={classNames(styles.wrap, props.viewStyle)}
             ref={props.elRef}
         >
-            <div className={classNames(styles.theme, styles[`theme-${certificateType.toLowerCase()}`])}>
+            <div className={styles.theme}>
+                <CertificateBackground className={styles.background} certType={certificateType} />
                 <div className={classNames(styles.details)}>
                     <div className={styles.headerWrap}>
                         <CertificateBadgeIcon

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-datascience.png

@@ -0,0 +1,28 @@
+@import '../../../../../../lib/styles/includes';
+
+.bg {
+    path:global(#tca-cert-bg_grad-el) {
+        fill: url(#tca-cert-bg--default);
+    }
+    &:global(.dev) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--dev);
+        }
+    }
+    &:global(.datascience) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--datascience);
+        }
+    }
+    &:global(.design) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--design);
+        }
+    }
+    &:global(.qa) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--qa);
+        }
+    }
+
+}

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-design.png

@@ -0,0 +1,20 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { TCACertificateType } from '../../../data-providers'
+
+import { ReactComponent as BackgroundSvg } from './certificate-bg.svg'
+import styles from './CertificateBackground.module.scss'
+
+interface CertificateBackgroundProps {
+    className?: string
+    certType: TCACertificateType
+}
+
+const CertificateBackground: FC<CertificateBackgroundProps> = (props: CertificateBackgroundProps) => (
+    <BackgroundSvg
+        className={classNames(props.className, styles.bg, (props.certType ?? '').toLowerCase())}
+    />
+)
+
+export default CertificateBackground

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-dev.png

@@ -0,0 +1 @@
+export { default as CertificateBackground } from './CertificateBackground'