Merge pull request #518 from topcoder-platform/TCA-1018-fix

TCA-1018 better modal view

Author: kkartunov

src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss

@@ -58,6 +58,7 @@
                 >img {
                     border: 3px solid $tc-white;
                     border-radius: 50%;
+                    aspect-ratio: 1;
                 }
 
                 .memberInfo {
@@ -149,6 +150,10 @@
             margin-top: $space-xxl;
 
             @include ltelg {
+                grid-template-columns: 1fr 1fr;
+            }
+
+            @include ltesm {
                 grid-template-columns: 1fr;
             }
 
@@ -171,8 +176,9 @@
 
 .modalView {
     .hero {
-        padding-top: $space-lg;
-        max-height: 360px;
+        padding-top: $space-mx;
+        max-height: 440px;
+        min-height: 380px;
 
         @include ltesm {
             max-height: none;
@@ -188,18 +194,31 @@
             }
 
             .heroLeft {
-                transform: scale(0.67);
-                transform-origin: 0 0;
+                .member {
+                    margin-bottom: $space-xxxxl;
+
+                    >svg,
+                    >img {
+                        max-width: 88px;
+                        max-height: 88px;
+                    }
+                }
 
-                @include ltesm {
-                    transform: none;
+                .certTitle {
+                    font-size: 40px;
+                    line-height: 40px;
                 }
             }
         }
     }
 
     .contentOuter {
         max-width: none;
+        padding-right: $space-mx;
+
+        @include ltesm {
+            padding-right: $space-lg;
+        }
 
         >div {
             max-width: none !important;

src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx

@@ -144,8 +144,8 @@ const ValidateTCACertificate: FC<{}> = () => {
                                             </div>
                                         </div>
                                     </div>
-                                    <p className='body-large'>
-                                        {profile.handle}
+                                    <p className={classNames(isModalView ? 'body-medium' : 'body-large')}>
+                                        {enrollment?.userName}
                                         {' '}
                                         has successfully met the requirements of the certification
                                     </p>