feat: achievement checkmark (#472)

components/achievements/level.tsx

@@ -3,6 +3,7 @@ import styles from "@styles/achievements.module.css";
 import { AchievementDocument } from "../../types/backTypes";
 import { CustomTooltip } from "@components/UI/tooltip";
 import { CDNImg } from "@components/cdn/image";
+import CheckIcon from "@components/UI/iconsComponents/icons/checkIcon";
 
 type AchievementLevelProps = {
   achievement: AchievementDocument;
@@ -39,6 +40,11 @@ const AchievementLevel: FunctionComponent<AchievementLevelProps> = ({
         >
           <CDNImg src={achievement.img_url} alt="achievement level image" />
         </div>
+        {achievement.completed && (
+          <div className={styles.checkIcon}>
+            <CheckIcon width="24" color="#6AFFAF" />
+          </div>
+        )}
       </div>
     </CustomTooltip>
   );

styles/achievements.module.css

@@ -80,9 +80,9 @@
   position: absolute;
   border-radius: 30px;
   background: linear-gradient(
-      90deg,
-      rgba(17, 16, 24, 0),
-      rgba(17, 16, 24, 0.51)
+    90deg,
+    rgba(17, 16, 24, 0),
+    rgba(17, 16, 24, 0.51)
   );
   width: 100%;
   height: 100%;
@@ -109,12 +109,14 @@
   right: -1px;
   left: 1px;
   bottom: 1px;
-  background: linear-gradient(90deg,
-      #437aba 0%,
-      #59c2e8 45%,
-      #00ff77 60%,
-      #59c2e8 70%,
-      #437aba50 100%);
+  background: linear-gradient(
+    90deg,
+    #437aba 0%,
+    #59c2e8 45%,
+    #00ff77 60%,
+    #59c2e8 70%,
+    #437aba50 100%
+  );
   border-radius: 30px;
   z-index: -1;
 }
@@ -125,12 +127,14 @@
 }
 
 .cardContainer:nth-child(even) .card::before {
-  background: linear-gradient(90deg,
-      #437aba 0%,
-      #1e74d6 45%,
-      #00fbff 60%,
-      #1e74d6 70%,
-      #437aba50 100%);
+  background: linear-gradient(
+    90deg,
+    #437aba 0%,
+    #1e74d6 45%,
+    #00fbff 60%,
+    #1e74d6 70%,
+    #437aba50 100%
+  );
 }
 
 .cardTitle {
@@ -178,6 +182,7 @@
   flex-grow: 1;
   min-width: 0;
   justify-content: space-between;
+  position: relative;
 }
 
 .levelContainer.completed {
@@ -286,6 +291,12 @@
   line-height: 24px;
 }
 
+.checkIcon {
+  position: absolute;
+  right: 16px;
+  top: 8px;
+}
+
 @media (max-width: 928px) {
   .container {
     padding: 0;
@@ -318,7 +329,6 @@
   }
 }
 
-
 .container:has(.skeleton) {
   padding: 0 30px;
-}
+}