TCA-1089 - fix enrolled & completed certification modal

Author: vas3a

src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss

@@ -10,6 +10,7 @@
 .enrolledModal {
     color: $tc-white;
     background: url(./bg.jpg) center no-repeat, $tc-grad20;
+    max-width: 560px;
 
     @include ltemd {
         background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20;
@@ -37,9 +38,8 @@
     }
 
     h2 {
-        @include ltemd {
-            font-size: 24px;
-            line-height: 28px;
-        }
+        text-transform: none;
+        font-size: 26px;
+        line-height: 32px;
     }
 }

src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx

@@ -23,7 +23,7 @@ const EnrolledModal: FC<EnrolledModalProps> = (props: EnrolledModalProps) => {
         <BaseModal
             onClose={props.onClose}
             open={isOpen}
-            size='sm'
+            size='lg'
             classNames={{ modal: styles.enrolledModal, root: styles.modalRoot }}
         >
             <>
@@ -33,6 +33,7 @@ const EnrolledModal: FC<EnrolledModalProps> = (props: EnrolledModalProps) => {
                 <Button
                     buttonStyle='outline'
                     label='Go to the certification details'
+                    size='sm'
                     onClick={props.onClose}
                 />
             </>

src-ts/tools/learn/certification-details/enrolled-modal/bg.jpg

@@ -2,7 +2,8 @@
 
 .completedModal.completedModal {
     color: $tc-white;
-    background: url(./bg.jpg) center no-repeat, $tc-grad20;
+    background: url(./bg.jpg) no-repeat center / cover, $tc-grad20;
+    max-width: 560px;
 
     @include ltemd {
         background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20;
@@ -30,9 +31,8 @@
     }
 
     h2 {
-        @include ltemd {
-            font-size: 24px;
-            line-height: 28px;
-        }
+        text-transform: none;
+        font-size: 26px;
+        line-height: 32px;
     }
 }

src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss

@@ -41,7 +41,7 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
         <BaseModal
             onClose={handleClose}
             open={isOpen}
-            size='sm'
+            size='lg'
             classNames={{ modal: styles.completedModal, root: styles.modalRoot }}
         >
             <>
@@ -53,7 +53,7 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
                     Certification
                     !
                 </h2>
-                <Button buttonStyle='outline' label='Check it out now!' onClick={handleClick} />
+                <Button buttonStyle='outline' label='Check it out now!' size='sm' onClick={handleClick} />
             </>
 
         </BaseModal>