updated: checkmark #181 (#251)

* Add animated checkmark to FinishCode and KhanCard * moved checkmark stylings to Checkmark.scss
uclaacm · Feb 6, 2024 · 59f3de5 · 59f3de5
1 parent 4c4d5a3
commit 59f3de5
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 17 deletions.
diff --git a/src/components/shared/FinishCode.tsx b/src/components/shared/FinishCode.tsx
@@ -2,6 +2,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { useState } from 'react';
 import ConfettiExplosion from 'react-confetti-explosion';
 import { useLocalStorage } from '../useLocalStorage';
+import '../../styles/Checkmark.scss';
 
 interface FinishCodeCardProps {
   children?: JSX.Element;
@@ -86,7 +87,24 @@ function FinishCodeCard(props: FinishCodeCardProps): JSX.Element {
     >
       <div className="finish-title">
         {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' }} />
         )}

diff --git a/src/components/shared/KhanCard.tsx b/src/components/shared/KhanCard.tsx
@@ -77,7 +77,24 @@ 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' }} />
         )}

diff --git a/src/pages/Problem4.scss b/src/pages/Problem4.scss
@@ -25,18 +25,3 @@
   right: 0;
   z-index: 0;
 }
-
-.word-list {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  height: 220px;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  position: absolute;
-  right: 0;
-  top: 120px;
-  width: 658px;
-  z-index: 1;
-}
diff --git a/src/styles/Checkmark.scss b/src/styles/Checkmark.scss
@@ -0,0 +1,59 @@
+// Colors
+$green: #7ac142;
+$white: #fff;
+
+// Misc
+$curve: cubic-bezier(0.65, 0, 0.45, 1);
+
+.checkmark {
+  animation: fill 0.4s ease-in-out 0.4s forwards,
+    scale 0.3s ease-in-out 0.9s both;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 $green;
+  display: block;
+  height: 25px;
+  stroke: $white;
+  stroke-miterlimit: 10;
+  stroke-width: 4;
+  width: 25px;
+}
+
+.checkmark-circle {
+  animation: stroke 0.6s $curve forwards;
+  fill: none;
+  stroke: $green;
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+
+.checkmark-check {
+  animation: stroke 0.3s $curve 0.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;
+  }
+}