Merge pull request #328 from topcoder-platform/TCA-438_missing-checkmark

TCA-438 Fix Missing Checkmark in Safari

Author: brooketopcoder

README.md

@@ -509,3 +509,5 @@ e.g.:
     }
 }
 ```
+
+>**NOTE** - all SVGs require explicit `width` and `height` in the Safari browser in order to be rendered properly, otherwise they'll be rendered to the _default_ size and probably will crop out of view

src-ts/lib/styles/mixins/_icons.mixins.scss

@@ -40,6 +40,11 @@
     width: $space-mxx;
 }
 
+@mixin icon-full {
+    height: 100%;
+    width: 100%;
+}
+
 @mixin icon-size($size) {
     height: $size * 1px;
     width: $size * 1px;

src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss

@@ -3,4 +3,7 @@
 .checkmark {
     @include icon-size(26);
     flex: 0 0 auto;
-}
+    svg {
+        @include icon-full;
+    }
+}

src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss

@@ -6,6 +6,7 @@
     color: $black-20;
 
     .icon {
+
         @include icon-xl;
         border-radius: 50%;
         flex: 0 0 auto;
@@ -21,6 +22,7 @@
         background: $black-40;
 
         > svg {
+            @include icon-full;
             margin: -1 * $border;
         }
     }
@@ -43,4 +45,4 @@
             background: $tc-white;
         }
     }
-}
+}

src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx

@@ -24,7 +24,7 @@ const StepIcon: FC<StepIconProps> = (props: StepIconProps) => {
         return (
             <>
                 {props.label && props.completed && (
-                    <IconSolid.CheckCircleIcon />
+                    <IconSolid.CheckCircleIcon viewBox='2 2 16 16' />
                 )}
 
                 {!props.label && (