TCA-1131 - add preview watermark

Author: vas3a

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss

@@ -34,6 +34,22 @@
         background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, $tc-qa-grad;
     }
 
+    &.asPreview {
+        position: relative;
+        z-index: 1;
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, url('./preview-watermark.png') no-repeat top left / cover;
+            z-index: -1;
+        }
+    }
+    
     .heroInner {
         display: flex;
         gap: $space-mx;

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx

@@ -54,6 +54,7 @@ export interface HiringManagerViewProps {
     certification?: TCACertification
     completedAt?: string
     completionUuid?: string
+    isPreview?: boolean
     isModalView?: boolean
     isMemberVerified?: boolean
     isOwner?: boolean
@@ -154,6 +155,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                 className={classNames(
                     styles.hero,
                     styles[`hero-${certificationCategory?.track.toLowerCase() || 'dev'}`],
+                    props.isPreview && styles.asPreview,
                 )}
             >
                 <ContentLayout outerClass={props.isModalView ? styles.contentOuter : ''}>

src-ts/tools/learn/learn-lib/hiring-manager-view/preview-watermark.png

@@ -48,6 +48,7 @@ const UserCertificationPreview: FC<{}> = () => {
                 enrollment={placeholderEnrollment}
                 certification={certification}
                 profile={placeholderUserProfile}
+                isPreview
             />
         </>
     )

src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationPreview.tsx

@@ -28,6 +28,7 @@ interface UserCertificationViewBaseProps {
     certification?: TCACertification
     enrollment?: TCACertificationEnrollmentBase
     enrollmentError?: boolean
+    isPreview?: boolean
     profile?: UserProfile
 }
 
@@ -82,6 +83,7 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
                         userName={props.enrollment.userName}
                         isOwner={isOwnProfile}
                         validationUrl={validationUrl}
+                        isPreview={props.isPreview}
                     />
                 </div>
             )}