incorporate checkmark

src/components/dining-comps/DiningCode.tsx

@@ -159,6 +159,7 @@ function DiningCode(): JSX.Element {
 
   return (
     <div>
+
       <FinishCodeCard
         correct_answer={[
           postOrderSum([10, 20, 30, 40, 50]) ==

src/components/shared/KhanCard.tsx

@@ -1,4 +1,4 @@
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+//import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { useState } from 'react';
 import ConfettiExplosion from 'react-confetti-explosion';
 
@@ -75,9 +75,23 @@ function KhanCard(props: KhanCardProps): JSX.Element {
         style={{ display: 'flex', alignItems: 'center' }}
       >
         {correct ? (
-          <CheckCircleIcon sx={{ color: 'green', fontSize: 'inherit' }} />
+          <svg className ="checkmark"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 52 52">
+              <circle className ="checkmark__circle"
+              cx="26" cy="26" r="25" fill="none"/>
+              <path className ="checkmark__check"
+              fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+          </svg>
         ) : (
-          <CheckCircleIcon sx={{ color: 'grey', fontSize: 'inherit' }} />
+          <svg className ="checkmark"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 52 52">
+              <circle className ="checkmark__circle"
+              cx="26" cy="26" r="25" fill="none"/>
+              <path className ="checkmark__check"
+              fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+          </svg>
         )}
         &nbsp;&nbsp; Fill in the Blank
       </div>

src/pages/Problem2.scss

@@ -125,3 +125,69 @@
 .buttons:last-child {
   margin-right: 0; /* remove right margin from the last button */
 }
+
+// Colors
+$green: #7ac142;
+$white: #fff;
+
+// Misc
+$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
+
+body {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+}
+
+.checkmark {
+  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 $green;
+  display: block;
+  height: 56px;
+  stroke: $white;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+  width: 56px;
+}
+
+.checkmark__circle {
+  animation: stroke .6s $curve forwards;
+  fill: none;
+  stroke: $green;
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+
+.checkmark__check {
+  animation: stroke .3s $curve .8s forwards;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  transform-origin: 50% 50%;
+}
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes scale {
+  0%, 100% {
+    transform: none;
+  }
+
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+
+@keyframes fill {
+  100% {
+    box-shadow: inset 0 0 0 30px $green;
+  }
+}

src/styles/global.scss

@@ -311,3 +311,68 @@ body {
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   width: 60%;
 }
+
+//checkmark
+$green: #7ac142;
+$white: #fff;
+
+$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
+
+body {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+}
+
+.checkmark {
+  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 $green;
+  display: block;
+  height: 56px;
+  stroke: $white;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+  width: 56px;
+}
+
+.checkmark__circle {
+  animation: stroke .6s $curve forwards;
+  fill: none;
+  stroke: $green;
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+
+.checkmark__check {
+  animation: stroke .3s $curve .8s forwards;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  transform-origin: 50% 50%;
+}
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes scale {
+  0%, 100% {
+    transform: none;
+  }
+
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+
+@keyframes fill {
+  100% {
+    box-shadow: inset 0 0 0 30px $green;
+  }
+}