Merge pull request #587 from topcoder-platform/TCA-1106_certificate_sharing

TCA-1106 - update label for share btn -> dev

Author: vas3a

src-ts/tools/learn/learn-lib/action-button/ActionButton.module.scss

@@ -1,15 +1,17 @@
 @import '../../../../lib/styles/includes';
 
 .wrap {
-    @include icon-mxx;
-    border-radius: 50%;
+    min-width: $space-mxx;
+    height: $space-mxx;
+    border-radius: calc($space-mxx/2);
 
     color: $tc-white;
     border: $border solid currentColor;
 
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: $space-xs;
 
     padding: $space-sm;
 
@@ -23,3 +25,14 @@
         @include icon-mx;
     }
 }
+
+.label {
+    @include font-roboto;
+    display: block;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 18px;
+    letter-spacing: 0.008em;
+    padding-right: $space-xs;
+}

src-ts/tools/learn/learn-lib/action-button/ActionButton.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import styles from './ActionButton.module.scss'
 
 interface ActionButtonProps {
+    children?: ReactNode
     className?: string
     icon: ReactNode
     onClick?: () => void
@@ -12,6 +13,11 @@ interface ActionButtonProps {
 }
 
 const ActionButton: FC<ActionButtonProps> = (props: ActionButtonProps) => {
+    const label: ReactNode = props.children && (
+        <span className={styles.label}>
+            {props.children}
+        </span>
+    )
 
     // if there is a url, this is a link button
     if (!!props.url) {
@@ -24,6 +30,7 @@ const ActionButton: FC<ActionButtonProps> = (props: ActionButtonProps) => {
                 target={props.target}
             >
                 {props.icon}
+                {label}
             </a>
         )
     }
@@ -34,6 +41,7 @@ const ActionButton: FC<ActionButtonProps> = (props: ActionButtonProps) => {
             onClick={props.onClick}
         >
             {props.icon}
+            {label}
         </div>
     )
 }

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss

@@ -29,7 +29,7 @@
 .btns-wrap {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     z-index: 1;
     position: relative;
 

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx

@@ -132,7 +132,9 @@ const CertificatePageLayout: FC<CertificatePageLayoutProps> = (props: Certificat
                                 <ActionButton
                                     icon={<IconOutline.ShareIcon />}
                                     onClick={shareModal.show}
-                                />
+                                >
+                                    Share certificate
+                                </ActionButton>
                             </div>
                         )}
                     </div>