include streak-block svg's and grayscale no-streakers

src/components/StreakView/User/StreakBlock/StreakBlock.module.less

@@ -10,12 +10,16 @@
     padding: 10px 5px;
 
     background-color: rgb(255, 200, 0);
-    background-image: url("https://d35aaqx5ub95lt.cloudfront.net/images/profile/92bd1526f88a4bea08ff2d5ad9783311.svg");
+    background-image: url("/src/assets/streak-block-background.svg");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     border-color: rgb(255, 200, 0);
     border-style: solid solid none;
 
+    &.inactive {
+      filter: grayscale(100%);
+    }
+
     .icon {
       border-style: none;
     }
@@ -27,6 +31,7 @@
       left: 18px;
       width: 21px;
     }
+
     .star-position-b {
       position: absolute;
       height: 27px;

src/components/StreakView/User/StreakBlock/StreakBlock.tsx

@@ -1,4 +1,6 @@
 import styles from "./StreakBlock.module.less";
+import starSvg from "../../../../assets/streak-block-star.svg";
+import flameSvg from "../../../../assets/streak-block-flame.svg";
 
 type StreakBlockProps = {
   days: number;
@@ -8,18 +10,14 @@ export const StreakBlock = (props: StreakBlockProps) => {
 
   return (
     <div className={styles.streakBlock}>
-      <div className={styles.container}>
+      <div className={`${styles.container} ${!isActive && styles.inactive}`}>
         {isActive && (
           <>
             <Star positionClass={styles.starPositionA} />
             <Star positionClass={styles.starPositionB} />
           </>
         )}
-        {isActive ? (
-          <Flame positionClass={styles.flamePosition} />
-        ) : (
-          <DisabledFlame positionClass={styles.flamePosition} />
-        )}
+        <Flame positionClass={styles.flamePosition} />
         <div className={styles.streakNumberWrapper}>
           <h1>{props.days}</h1>
           <span>Day streak</span>
@@ -31,27 +29,12 @@ export const StreakBlock = (props: StreakBlockProps) => {
 
 const Star = (props: { positionClass: string }) => {
   return (
-    <img
-      className={`${styles.icon} ${props.positionClass}`}
-      src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/f68d647fdc1536870945a5c84f3b3b82.svg"
-    />
+    <img className={`${styles.icon} ${props.positionClass}`} src={starSvg} />
   );
 };
 
 const Flame = (props: { positionClass: string }) => {
   return (
-    <img
-      className={`${styles.icon} ${props.positionClass}`}
-      src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/8a6dca76019d059a81c4c7c1145aa7a4.svg"
-    />
-  );
-};
-
-const DisabledFlame = (props: { positionClass: string }) => {
-  return (
-    <img
-      className={`${styles.icon} ${props.positionClass}`}
-      src="https://d35aaqx5ub95lt.cloudfront.net/images/icons/ba95e6081679d9d7e8c132da5cfce1ec.svg"
-    />
+    <img className={`${styles.icon} ${props.positionClass}`} src={flameSvg} />
   );
 };