Merge pull request #543 from topcoder-platform/TCA-996_404-cert-page

TCA-996 404 cert page -> dev

Author: vas3a

src-ts/lib/styles/variables/_constants.scss

@@ -1 +1 @@
-$tca-certif-aspect-ratio: 1.25715;
+$tca-certif-aspect-ratio: 1.2571;

src-ts/lib/svgs/index.ts

@@ -21,6 +21,7 @@ import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
 import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
 import { ReactComponent as TcAcademyLogoSvg } from './tc-academy-logo.svg'
 import { ReactComponent as TCAcademyLogoWhiteSvg } from './tc-academy-logo-white.svg'
+import { ReactComponent as TCAcademyLogoMixedSvg } from './tc-academy-logo-mixed.svg'
 import { ReactComponent as TcLogoSvg } from './tc-logo.svg'
 import { ReactComponent as TCLogoSvg } from './tc-logo-white.svg'
 import { ReactComponent as FccLogoSvg } from './vendor-fcc-logo.svg'
@@ -49,6 +50,7 @@ export {
     IconCheck,
     TcAcademyLogoSvg,
     TCAcademyLogoWhiteSvg,
+    TCAcademyLogoMixedSvg,
     TcLogoSvg,
     TCLogoSvg,
     FccLogoSvg,

src-ts/lib/svgs/tc-academy-logo-mixed.svg

@@ -0,0 +1,91 @@
+@import '../../../../lib/styles/includes';
+
+.wrap {
+    display: flex;
+    height: 100%;
+    z-index: 1;
+    overflow: hidden;
+
+    @include ltemd {
+        border: 1px dashed $blue-25;
+        border-radius: 8px;
+    }
+    > svg {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: auto;
+        display: block;
+        z-index: -1;
+        transform: translateY(-50%);
+
+        @include ltemd {
+            :global(.rect-border) {
+                display: none;
+            }
+        }
+    }
+}
+
+.details {
+    width: 55%;
+    padding: calc($space-mx + $space-lg);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    &Inner {
+        max-width: 385px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    h2 {
+        color: $blue-25;
+    }
+
+    h3 {
+        font-size: 48px;
+        line-height: 50px;
+        font-weight: 500;
+        color: $tc-white;
+        margin-top: $space-sm;
+
+        :global(.nw) {
+            white-space: nowrap;
+        }
+    }
+}
+
+.logos {
+    margin-top: auto;
+    display: flex;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    height: 52px;
+
+    svg {
+        width: auto;
+
+    }
+    &.whiteLogo svg > path {
+        fill: $tc-white;
+    }
+}
+
+.divider {
+    width: $border;
+    background: $black-10;
+    margin: 0 $space-lg;
+    flex: 0 0 auto;
+}
+
+.rightSide {
+    width: 45%;
+
+}

src-ts/tools/learn/course-certificate/certificate-not-found/CertificateNotFound.module.scss

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { TCAcademyLogoMixedSvg, TcLogoSvg } from '../../../../lib'
+import { CertificateNotFoundContent } from '../../learn-lib'
+
+import { ReactComponent as BackgroundSvg } from './bg.svg'
+import styles from './CertificateNotFound.module.scss'
+
+const CertificateNotFound: FC<{}> = () => (
+    <div className={styles.wrap}>
+        <BackgroundSvg />
+        <div className={styles.details}>
+            <div className={styles.detailsInner}>
+                <h2 className='details'>Topcoder Academy</h2>
+                <h3>
+                    Certificate
+                    {' '}
+                    <span className='nw'>not found</span>
+                </h3>
+                <CertificateNotFoundContent className='mobile-hide' />
+                <div className={styles.logos}>
+                    <div className={classNames(styles.logo, styles.whiteLogo)}>
+                        <TcLogoSvg />
+                    </div>
+                    <div className={styles.divider} />
+                    <div className={styles.logo}>
+                        <TCAcademyLogoMixedSvg />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className={styles.rightSide} />
+    </div>
+)
+
+export default CertificateNotFound

src-ts/tools/learn/course-certificate/certificate-not-found/CertificateNotFound.tsx

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