diff --git a/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss b/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss index 7da9fea26..c7b7b7c45 100644 --- a/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss +++ b/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss @@ -17,6 +17,11 @@ } } +.completed { + background: $tc-white; + border: 1px solid $black-20; +} + .cardHeader { display: flex; @@ -94,4 +99,8 @@ .cardBottom { color: $blue-140; + + a:nth-child(2) { + margin-left: $space-sm; + } } \ No newline at end of file diff --git a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx index 071c0071d..b1887475b 100644 --- a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx +++ b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx @@ -28,6 +28,8 @@ const CoursesCard: FC = (props: CoursesCardProps) => { = useState('secondary') const [courseProgress, setCourseProgress]: [number | undefined, Dispatch>] = useState(undefined) + const [linkCompleted, setLinkCompleted]: [string, Dispatch>] + = useState('') useEffect(() => { @@ -46,10 +48,15 @@ const CoursesCard: FC = (props: CoursesCardProps) => { if (isCompleted) { // if the course is completed, View the Certificate setButtonLabel('View Certificate') + setButtonStyle('primary') setLink(getCertificatePath( props.certification.providerName, props.certification.certification, )) + setLinkCompleted(getCoursePath( + props.certification.providerName, + props.certification.certification, + )) } else if (!inProgress) { // if there is no in-progress lesson for the course, @@ -80,7 +87,7 @@ const CoursesCard: FC = (props: CoursesCardProps) => { ]) return ( -
+
@@ -101,7 +108,7 @@ const CoursesCard: FC = (props: CoursesCardProps) => {
- {courseProgress === undefined ? ( + {courseProgress === undefined ? linkCompleted ? undefined : (
) : ( @@ -124,6 +131,14 @@ const CoursesCard: FC = (props: CoursesCardProps) => { route={link} /> )} + {linkCompleted && ( +