Merge pull request #540 from topcoder-platform/TCA-1077-mobile-fix

Fix free label mobile styles & QR code size

Author: kkartunov

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

@@ -129,14 +129,15 @@
         .certInfo {
             display: flex;
             justify-content: space-between;
-            align-items: flex-end;
+            align-items: center;
 
             .certInfoLeft {
                 display: flex;
+                align-items: center;
 
                 .qrCode {
-                    margin-right: $space-sm;
-                    opacity: 0.9;
+                    margin-right: $space-lg;
+                    opacity: 0.7;
                     border: 0.5px solid #D4D4D4;
                     border-radius: 2px;
                     background-color: $tc-white;

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

@@ -77,7 +77,7 @@ const TCACertificate: FC<TCACertificateProps> = (props: TCACertificateProps) =>
                                 <div className={styles.certInfoLeft}>
                                     <QRCodeSVG
                                         value={props.validateLink}
-                                        size={57}
+                                        size={75}
                                         className={styles.qrCode}
                                         includeMargin
                                     />

src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss

@@ -89,6 +89,11 @@
                 font-weight: 500;
                 font-size: 11px;
                 line-height: 10px;
+
+                @include ltesm {
+                    font-size: 11px;
+                    line-height: 10px;
+                }
             }
         }
     }