diff --git a/components/achievements/level.tsx b/components/achievements/level.tsx index 9934669e..f2353aa2 100644 --- a/components/achievements/level.tsx +++ b/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 = ({ > + {achievement.completed && ( +
+ +
+ )} ); diff --git a/styles/achievements.module.css b/styles/achievements.module.css index b5fe633d..e11d30df 100644 --- a/styles/achievements.module.css +++ b/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; -} \ No newline at end of file +}