feat: make xpIcon green

jumperexchange · Dec 26, 2024 · 03ed6ae · 03ed6ae
1 parent b924ccb
commit 03ed6ae
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/components/ProfilePage/QuestCard/QuestCard.tsx b/src/components/ProfilePage/QuestCard/QuestCard.tsx
@@ -253,6 +253,7 @@ export const QuestCard = ({ data }: QuestCardDataProps) => {
                           })
                         }
                         active={true}
+                        color={completed ? '#00B849' : undefined}
                       />
                     )}
                   </>

diff --git a/src/components/ProfilePage/QuestCard/XPRewardsInfo.tsx b/src/components/ProfilePage/QuestCard/XPRewardsInfo.tsx
@@ -9,6 +9,7 @@ interface XPRewardsInfoProps {
   tooltip?: string;
   active?: boolean;
   completed?: boolean;
+  color?: string;
 }
 
 export const XPRewardsInfo: React.FC<PropsWithChildren<XPRewardsInfoProps>> = ({
@@ -18,6 +19,7 @@ export const XPRewardsInfo: React.FC<PropsWithChildren<XPRewardsInfoProps>> = ({
   active,
   children,
   completed,
+  color,
 }) => {
   return (
     <Tooltip title={tooltip} placement="top" enterTouchDelay={0} arrow>
@@ -30,7 +32,7 @@ export const XPRewardsInfo: React.FC<PropsWithChildren<XPRewardsInfoProps>> = ({
         <XPDisplayBoxLabel variant="bodySmallStrong">
           {points}
         </XPDisplayBoxLabel>
-        {children ? children : <XPIcon />}
+        {children ? children : <XPIcon colorFill={color} />}
       </XPDisplayBox>
     </Tooltip>
   );

diff --git a/src/components/illustrations/XPIcon.tsx b/src/components/illustrations/XPIcon.tsx
@@ -1,4 +1,6 @@
-export const XPIcon = () => {
+export const XPIcon = ({ colorFill }: { colorFill?: string }) => {
+  const color = colorFill ?? '#31007A';
+
   return (
     <svg
       width="20"
@@ -7,7 +9,7 @@ export const XPIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="10" cy="10" r="10" fill="#31007A" />
+      <circle cx="10" cy="10" r="10" fill={color} />
       <path
         d="M5.18696 7.68696C4.94289 7.93104 4.94289 8.32677 5.18696 8.57085L6.62298 10.0069L5.18696 11.4429C4.94289 11.687 4.94289 12.0827 5.18696 12.3268C5.43104 12.5708 5.82677 12.5708 6.07085 12.3268L7.50686 10.8907L8.94286 12.3267C9.18694 12.5708 9.58267 12.5708 9.82674 12.3267C10.0708 12.0827 10.0708 11.6869 9.82674 11.4429L8.39075 10.0069L9.82674 8.57087C10.0708 8.32679 10.0708 7.93106 9.82674 7.68698C9.58267 7.4429 9.18694 7.4429 8.94286 7.68698L7.50686 9.12298L6.07085 7.68696C5.82677 7.44289 5.43104 7.44289 5.18696 7.68696Z"
         fill="white"
-Original file line number
+Diff line change
@@ Expand Up @@
                               })
                             }
                             active={true}
+                            color={completed ? '#00B849' : undefined}
                           />
                         )}
                       </>
@@ Expand Down @@