fixes

calblueprint · Jan 10, 2025 · 278432e · 278432e
1 parent b973748
commit 278432e
Show file tree

Hide file tree

Showing 24 changed files with 214 additions and 148 deletions.
diff --git a/.vercelignore b/.vercelignore
@@ -11,4 +11,6 @@ scraper_utils.py
 ores_scraper.py
 nyiso_scraper.cpython-312.pyc
 nyserda_scraper.cpython-312.pyc
-database_constants.cpython-312.pyc
+database_constants.cpython-312.pyc
+__init__.cpython-312.pyc
+app.py
diff --git a/assets/Clusters/icons.tsx b/assets/Clusters/icons.tsx
@@ -20,14 +20,14 @@ export const ClusterIcon = ({ count }: { count: number }) => (
       >
         <rect fill="white" x="4" y="6" width="56" height="63" />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M47.6912 54.6986C53.3686 49.9885 57 42.7773 57 34.6944C57 20.5038 45.8071 9 32 9C18.1929 9 7 20.5038 7 34.6944C7 42.7771 10.6312 49.9882 16.3084 54.6983C16.4044 54.8026 16.5145 54.9002 16.6395 54.9894L16.9134 55.1847C17.471 55.6191 18.0469 56.03 18.6397 56.4159L30.8387 65.1162C31.5335 65.6118 32.4664 65.6118 33.1613 65.1162L45.3594 56.4165C45.9528 56.0302 46.5293 55.6189 47.0875 55.1841L47.3604 54.9894C47.4853 54.9003 47.5954 54.8028 47.6912 54.6986Z"
         />
       </mask>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M47.6912 54.6986C53.3686 49.9885 57 42.7773 57 34.6944C57 20.5038 45.8071 9 32 9C18.1929 9 7 20.5038 7 34.6944C7 42.7771 10.6312 49.9882 16.3084 54.6983C16.4044 54.8026 16.5145 54.9002 16.6395 54.9894L16.9134 55.1847C17.471 55.6191 18.0469 56.03 18.6397 56.4159L30.8387 65.1162C31.5335 65.6118 32.4664 65.6118 33.1613 65.1162L45.3594 56.4165C45.9528 56.0302 46.5293 55.6189 47.0875 55.1841L47.3604 54.9894C47.4853 54.9003 47.5954 54.8028 47.6912 54.6986Z"
         fill="white"
       />
@@ -39,8 +39,8 @@ export const ClusterIcon = ({ count }: { count: number }) => (
     </g>
     <ellipse cx="32" cy="34.6944" rx="20.8333" ry="21.5278" fill="#4974E0" />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M32 60.3889C45.8071 60.3889 57 48.8851 57 34.6944C57 20.5038 45.8071 9 32 9C18.1929 9 7 20.5038 7 34.6944C7 48.8851 18.1929 60.3889 32 60.3889ZM32 56.2222C43.5059 56.2222 52.8333 46.5839 52.8333 34.6944C52.8333 22.805 43.5059 13.1667 32 13.1667C20.4941 13.1667 11.1667 22.805 11.1667 34.6944C11.1667 46.5839 20.4941 56.2222 32 56.2222Z"
       fill="white"
     />
@@ -63,9 +63,9 @@ export const ClusterIcon = ({ count }: { count: number }) => (
         width="64"
         height="74.4879"
         filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
+        colorInterpolationFilters="sRGB"
       >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
         <feColorMatrix
           in="SourceAlpha"
           type="matrix"

diff --git a/assets/Dropdown-Icons/icons.tsx b/assets/Dropdown-Icons/icons.tsx
@@ -9,7 +9,7 @@ export const StatusIcon = () => (
     <path
       d="M6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6C11.9964 9.3122 9.3122 11.9964 6 12ZM5.9904 10.8H6C8.65003 10.7973 10.7965 8.64763 10.7952 5.9976C10.7939 3.34757 8.64523 1.2 5.9952 1.2C3.34517 1.2 1.19653 3.34757 1.1952 5.9976C1.19388 8.64763 3.34037 10.7973 5.9904 10.8ZM4.8 9L2.4 6.6L3.246 5.754L4.8 7.302L8.754 3.348L9.6 4.2L4.8 9Z"
       fill="#2E3A59"
-      fill-opacity="0.85"
+      fillOpacity="0.85"
     />
   </svg>
 );
@@ -25,10 +25,10 @@ export const TechnologyIcon = () => (
     <path
       d="M6.83268 1.3814C6.87201 1.04607 6.47802 0.863407 6.27602 1.12274L1.07409 7.79798C0.902095 8.01797 1.04876 8.35264 1.31676 8.35264H5.97536C6.16536 8.35264 6.31269 8.53063 6.28869 8.73263L5.83536 12.6192C5.79536 12.9539 6.18869 13.1366 6.39135 12.8772L11.5926 6.202C11.7646 5.982 11.6179 5.64734 11.35 5.64734H6.69135C6.50135 5.64734 6.35402 5.46934 6.37802 5.26735L6.83268 1.3814Z"
       stroke="#2E3A59"
-      stroke-opacity="0.85"
-      stroke-width="1.25"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeOpacity="0.85"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
@@ -44,7 +44,7 @@ export const ProjectSizeIcon = () => (
     <path
       d="M6.70673 12H3.10673V10.8H6.70673V12ZM6.70673 10.2H3.10673L2.97293 9C2.90095 8.60308 2.78191 8.21615 2.61833 7.8474C2.40593 7.5474 2.18453 7.2912 1.97033 7.041C1.18319 6.30318 0.727517 5.27867 0.706726 4.2C0.706726 1.8804 2.58713 0 4.90673 0C7.22632 0 9.10673 1.8804 9.10673 4.2C9.08232 5.27208 8.63014 6.28986 7.85093 7.0266L7.84073 7.0386C7.62713 7.2888 7.40633 7.548 7.19813 7.845C7.03469 8.21473 6.91527 8.60239 6.84233 9L6.70673 10.2ZM4.90673 1.2C3.25069 1.20198 1.90871 2.54397 1.90673 4.2C1.90673 5.1264 2.29313 5.5758 2.87753 6.2568C3.09953 6.516 3.35153 6.8088 3.59753 7.1514C3.89607 7.7315 4.10004 8.35556 4.20173 9H5.61233C5.71664 8.35742 5.92027 7.73498 6.21593 7.155C6.45593 6.8124 6.70733 6.5178 6.92873 6.2586L6.93773 6.2478C7.52093 5.5638 7.90673 5.112 7.90673 4.2C7.90474 2.54397 6.56276 1.20198 4.90673 1.2Z"
       fill="#2E3A59"
-      fill-opacity="0.85"
+      fillOpacity="0.85"
     />
   </svg>
 );
@@ -60,7 +60,7 @@ export const LocationIcon = () => (
     <path
       d="M4.79241 12C3.95054 11.2819 3.17021 10.4947 2.45956 9.64649C1.39312 8.37275 0.12671 6.47581 0.12671 4.66818C0.125764 2.78027 1.26264 1.07785 3.00683 0.355333C4.75102 -0.36718 6.75872 0.0326284 8.09307 1.36819C8.97052 2.24175 9.46206 3.43003 9.45814 4.66818C9.45814 6.47581 8.19171 8.37275 7.12527 9.64649C6.41462 10.4947 5.63429 11.2819 4.79241 12ZM4.79241 1.33553C2.95276 1.33774 1.46197 2.82852 1.45977 4.66818C1.45977 5.44535 1.81103 6.79107 3.48268 8.79133C3.89469 9.28326 4.33185 9.75357 4.79241 10.2004C5.25302 9.7541 5.69039 9.28447 6.10281 8.79333C7.7738 6.79041 8.12506 5.44469 8.12506 4.66818C8.12286 2.82852 6.63207 1.33774 4.79241 1.33553ZM4.79241 6.66777C3.68807 6.66777 2.79283 5.77252 2.79283 4.66818C2.79283 3.56384 3.68807 2.66859 4.79241 2.66859C5.89676 2.66859 6.792 3.56384 6.792 4.66818C6.792 5.1985 6.58133 5.70711 6.20634 6.0821C5.83134 6.4571 5.32274 6.66777 4.79241 6.66777Z"
       fill="#2E3A59"
-      fill-opacity="0.85"
+      fillOpacity="0.85"
     />
   </svg>
 );

diff --git a/assets/KDM-Icons/icons.tsx b/assets/KDM-Icons/icons.tsx
@@ -21,14 +21,14 @@ export const CheckmarkIcon = (props: {
 export const DotDotDotIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="7"
-    height="2"
-    viewBox="0 0 7 2"
+    width="9"
+    height="3"
+    viewBox="0 0 9 3"
     fill="none"
   >
     <path
-      d="M5.92308 1.5C5.51523 1.5 5.18461 1.16421 5.18461 0.75C5.18461 0.335786 5.51523 0 5.92308 0C6.33092 0 6.66154 0.335786 6.66154 0.75C6.66154 0.948912 6.58374 1.13968 6.44525 1.28033C6.30676 1.42098 6.11893 1.5 5.92308 1.5ZM3.70769 1.5C3.29985 1.5 2.96923 1.16421 2.96923 0.75C2.96923 0.335786 3.29985 0 3.70769 0C4.11553 0 4.44615 0.335786 4.44615 0.75C4.44615 0.948912 4.36835 1.13968 4.22986 1.28033C4.09137 1.42098 3.90354 1.5 3.70769 1.5ZM1.49231 1.5C1.08447 1.5 0.753845 1.16421 0.753845 0.75C0.753845 0.335786 1.08447 0 1.49231 0C1.90015 0 2.23077 0.335786 2.23077 0.75C2.23077 0.948912 2.15297 1.13968 2.01448 1.28033C1.87599 1.42098 1.68816 1.5 1.49231 1.5Z"
-      fill="#DDE0E5"
+      d="M7.14355 2.03125C6.59127 2.03125 6.14355 1.57654 6.14355 1.01562C6.14355 0.454711 6.59127 0 7.14355 0C7.69584 0 8.14355 0.454711 8.14355 1.01562C8.14355 1.28499 8.0382 1.54331 7.85066 1.73378C7.66313 1.92425 7.40877 2.03125 7.14355 2.03125ZM4.14355 2.03125C3.59127 2.03125 3.14355 1.57654 3.14355 1.01562C3.14355 0.454711 3.59127 0 4.14355 0C4.69584 0 5.14355 0.454711 5.14355 1.01562C5.14355 1.28499 5.0382 1.54331 4.85066 1.73378C4.66313 1.92425 4.40877 2.03125 4.14355 2.03125ZM1.14355 2.03125C0.59127 2.03125 0.143555 1.57654 0.143555 1.01562C0.143555 0.454711 0.59127 0 1.14355 0C1.69584 0 2.14355 0.454711 2.14355 1.01562C2.14355 1.28499 2.0382 1.54331 1.85066 1.73378C1.66313 1.92425 1.40877 2.03125 1.14355 2.03125Z"
+      fill="#B0B4BF"
     />
   </svg>
 );

diff --git a/assets/Project-Icons/icons.tsx b/assets/Project-Icons/icons.tsx
@@ -12,16 +12,16 @@ export const DeveloperIcon = (props: {
     <path
       d="M4.19444 1.69451L5.30556 2.80563M1 6.00007H2.11111L5.72222 2.38896C5.86956 2.24162 5.95234 2.04178 5.95234 1.8334C5.95234 1.62503 5.86956 1.42519 5.72222 1.27785C5.57488 1.13051 5.37504 1.04773 5.16667 1.04773C4.95829 1.04773 4.75845 1.13051 4.61111 1.27785L1 4.88896V6.00007Z"
       stroke="#777F93"
-      stroke-width="0.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="0.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M3.5 2.38889L2.11111 1L1 2.11111L2.38889 3.5M2.11111 2.38889L1.69444 2.80556M4.61111 3.5L6 4.88889L4.88889 6L3.5 4.61111M4.61111 4.88889L4.19444 5.30556"
       stroke="#777F93"
-      stroke-width="0.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="0.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
@@ -40,9 +40,39 @@ export const GlobeIcon = (props: {
     <path
       d="M4.5 8C4.95963 8 5.41475 7.90947 5.83939 7.73358C6.26403 7.55769 6.64987 7.29988 6.97487 6.97487C7.29988 6.64987 7.55769 6.26403 7.73358 5.83939C7.90947 5.41475 8 4.95963 8 4.5C8 4.04037 7.90947 3.58525 7.73358 3.16061C7.55769 2.73597 7.29988 2.35013 6.97487 2.02513C6.64987 1.70012 6.26403 1.44231 5.83939 1.26642C5.41475 1.09053 4.95963 1 4.5 1M4.5 8C4.04037 8 3.58525 7.90947 3.16061 7.73358C2.73597 7.55769 2.35013 7.29988 2.02513 6.97487C1.70012 6.64987 1.44231 6.26403 1.26642 5.83939C1.09053 5.41475 1 4.95963 1 4.5C1 4.04037 1.09053 3.58525 1.26642 3.16061C1.44231 2.73597 1.70012 2.35013 2.02513 2.02513C2.35013 1.70012 2.73597 1.44231 3.16061 1.26642C3.58525 1.09053 4.04037 1 4.5 1M4.5 8C5.57372 8 6.03261 5.99217 6.03261 4.5C6.03261 3.00783 5.57372 1 4.5 1M4.5 8C3.42628 8 2.96739 5.99217 2.96739 4.5C2.96739 3.00783 3.42628 1 4.5 1M1.19444 3.33333H7.80556M1.19444 5.66667H7.80556"
       stroke="#626C83"
-      stroke-width="0.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="0.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const OpenLinkIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="9"
+    height="9"
+    viewBox="0 0 9 9"
+    fill="none"
+  >
+    <path
+      d="M7.3125 9H1.125C0.50368 9 0 8.49632 0 7.875V1.6875C0 1.06618 0.50368 0.5625 1.125 0.5625H3.375V1.6875H1.125V7.875H7.3125V5.625H8.4375V7.875C8.4375 8.49632 7.93382 9 7.3125 9ZM4.33125 5.46019L3.53813 4.66481L7.07794 1.125H5.0625V0H9V3.9375H7.875V1.92094L4.33125 5.46019Z"
+      fill="#626C83"
+    />
+  </svg>
+);
+
+export const ExitModalIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="13"
+    height="13"
+    viewBox="0 0 10 10"
+    fill="none"
+  >
+    <path
+      d="M8.59 0L5 3.59L1.41 0L0 1.41L3.59 5L0 8.59L1.41 10L5 6.41L8.59 10L10 8.59L6.41 5L10 1.41L8.59 0Z"
+      fill="white"
     />
   </svg>
 );
diff --git a/assets/Technology-Tag-Icons/icons.tsx b/assets/Technology-Tag-Icons/icons.tsx
@@ -45,16 +45,16 @@ export const EnergyStorageIcon = (props: {
     <path
       d="M2.8001 6.2001C2.64097 6.2001 2.48836 6.13688 2.37583 6.02436C2.26331 5.91184 2.2001 5.75923 2.2001 5.6001V2.8001C2.2001 2.64097 2.26331 2.48836 2.37583 2.37583C2.48836 2.26331 2.64097 2.2001 2.8001 2.2001H6.9001V6.2001H2.8001Z"
       fill={props.fill}
-      fill-opacity="0.85"
+      fillOpacity="0.85"
       stroke={props.stroke}
-      stroke-width="0.2"
+      strokeWidth="0.2"
     />
     <path
       d="M12.3 6.2H12.2V6.3C12.2 6.83043 11.9893 7.33914 11.6142 7.71421C11.2391 8.08929 10.7304 8.3 10.2 8.3H2.1C1.56957 8.3 1.06086 8.08929 0.685787 7.71421C0.310714 7.33914 0.1 6.83043 0.1 6.3V2.1C0.1 1.56957 0.310714 1.06086 0.685786 0.685786C1.06086 0.310714 1.56957 0.1 2.1 0.1H10.2C10.7304 0.1 11.2391 0.310714 11.6142 0.685786C11.9893 1.06086 12.2 1.56957 12.2 2.1V2.2H12.3C12.4591 2.2 12.6117 2.26321 12.7243 2.37574C12.8368 2.48826 12.9 2.64087 12.9 2.8V5.6C12.9 5.75913 12.8368 5.91174 12.7243 6.02426C12.6117 6.13679 12.4591 6.2 12.3 6.2ZM10.2 1.3H2.1C1.88783 1.3 1.68434 1.38429 1.53431 1.53431C1.38429 1.68434 1.3 1.88783 1.3 2.1V6.3C1.3 6.51217 1.38429 6.71566 1.53431 6.86568C1.68434 7.01571 1.88783 7.1 2.1 7.1H10.2C10.4122 7.1 10.6157 7.01571 10.7657 6.86568C10.9157 6.71566 11 6.51217 11 6.3V2.1C11 1.88783 10.9157 1.68434 10.7657 1.53431C10.6157 1.38429 10.4122 1.3 10.2 1.3Z"
       fill="#2E3A59"
-      fill-opacity="0.85"
+      fillOpacity="0.85"
       stroke="white"
-      stroke-width="0.2"
+      strokeWidth="0.2"
     />
   </svg>
 );

diff --git a/components/Filter/index.tsx b/components/Filter/index.tsx
@@ -29,7 +29,7 @@ export default function Filter({
   setActiveFilter: React.Dispatch<React.SetStateAction<FilterType | null>>;
 }) {
   return (
-    <FilterBackgroundStyles isActive={isActive}>
+    <FilterBackgroundStyles $isActive={isActive}>
       {isActive ? (
         filter.id === 'technology' ? (
           <TechnologyDropdown

diff --git a/components/Filter/styles.ts b/components/Filter/styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>`
+export const FilterBackgroundStyles = styled.div<{ $isActive: boolean }>`
   margin-right: 0.5rem;
   background: linear-gradient(
     180deg,
@@ -13,8 +13,8 @@ export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>`
   border: 'none';
 
   margin-top: 0.45rem;
-  max-height: ${({ isActive }) => (isActive ? 'auto' : '2.2rem')};
-  border-radius: ${({ isActive }) => (isActive ? '0.8rem' : '6.25rem')};
+  max-height: ${({ $isActive }) => ($isActive ? 'auto' : '2.2rem')};
+  border-radius: ${({ $isActive }) => ($isActive ? '0.8rem' : '6.25rem')};
 
   transition: height 0.5s ease-in-out;
 `;

diff --git a/components/KDMDropdown/index.tsx b/components/KDMDropdown/index.tsx
@@ -43,7 +43,7 @@ export default function KDMDropdown({
   const ProgressBarContent = key_development_milestones?.map(
     (milestone: Milestone, i: number) => {
       return (
-        <ProgressBox key={i} completed={milestone.completed}></ProgressBox>
+        <ProgressBox key={i} $completed={milestone.completed}></ProgressBox>
       );
     },
   );
@@ -57,48 +57,12 @@ export default function KDMDropdown({
       <Header onClick={toggleKDM}>
         <SubHeading2>KEY DEVELOPMENT MILESTONES</SubHeading2>
         <CompletionIndicatorTag>
-          <CheckmarkIcon width={'7'} height={'8'} />
-          <TagText2>{totalCompletedKDMs} / 6</TagText2>
+          <CheckmarkIcon width={'8'} height={'7'} />
+          <TagText2>{totalCompletedKDMs}/6</TagText2>
         </CompletionIndicatorTag>
         {isOpen ? <CloseIcon /> : <OpenIcon />}
       </Header>
       {isOpen ? KDMs : <ProgressBar>{ProgressBarContent}</ProgressBar>}
     </KDMContainer>
-    /*<FilterBackgroundStyles isActive={isActive}>
-          {isActive ? (
-            filter.id === 'technology' ? (
-              <TechnologyDropdown
-                selectedTechnologies={selectedFilters.technology}
-                setSelectedTechnologies={filterChangeHandlers.technology}
-                handleButtonClick={handleButtonClick}
-                icon={filter.icon}
-                label={filter.label}
-                currFilter={filter}
-                handleFilterButtonClick={handleFilterButtonClick}
-                clearFilters={clearFilters}
-                setActiveFilter={setActiveFilter}
-              />
-            ) : filter.id === 'status' ? (
-              <StatusDropdown
-                selectedStatus={selectedFilters.status}
-                setSelectedStatus={filterChangeHandlers.status}
-                handleButtonClick={handleButtonClick}
-                icon={filter.icon}
-                label={filter.label}
-                currFilter={filter}
-                handleFilterButtonClick={handleFilterButtonClick}
-                clearFilters={clearFilters}
-                setActiveFilter={setActiveFilter}
-              />
-            ) : // Add other filter dropdown components here
-            null
-          ) : (
-            <FilterButtonStyles onClick={() => handleButtonClick(filter)}>
-              <IconStyle>{filter.icon}</IconStyle>
-              <FilterHeadingUnused>{filter.label}</FilterHeadingUnused>
-              <DropIcon />
-            </FilterButtonStyles>
-          )}
-        </FilterBackgroundStyles> */
   );
 }
diff --git a/components/KDMDropdown/styles.ts b/components/KDMDropdown/styles.ts
@@ -50,14 +50,14 @@ export const ProgressBar = styled.div`
   width: 100%;
 `;
 
-export const ProgressBox = styled.div<{ completed: boolean }>`
+export const ProgressBox = styled.div<{ $completed: boolean }>`
   width: 2.625rem;
   height: 0.5rem;
   border-radius: 2px;
   background: ${COLORS.electricBlue};
-  opacity: ${props => (props.completed ? '0.85' : '0.5')};
+  opacity: ${props => (props.$completed ? '0.85' : '0.5')};
   box-shadow: ${props =>
-    props.completed
+    props.$completed
       ? '0px 3px 4px 0px rgba(46, 58, 89, 0.10)'
       : '0px 2px 4px 0px rgba(73, 116, 224, 0.10) inset'};
 `;
diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx
@@ -43,7 +43,7 @@ export default function KeyDevelopmentMilestone({
   }
 
   return (
-    <Milestone completed={completed}>
+    <Milestone $completed={completed}>
       <MilestoneTitle>
         {milestoneLabels[index]}
         {completed ? (
@@ -52,7 +52,7 @@ export default function KeyDevelopmentMilestone({
           <DotDotDotIcon />
         )}
       </MilestoneTitle>
-      <MilestoneLabel status={completed}>{statusLabel}</MilestoneLabel>
+      <MilestoneLabel $status={completed}>{statusLabel}</MilestoneLabel>
     </Milestone>
   );
 }
diff --git a/components/KeyDevelopmentMilestone/styles.ts b/components/KeyDevelopmentMilestone/styles.ts
@@ -3,27 +3,27 @@ import COLORS from '../../styles/colors';
 import * as fonts from '../../styles/fonts';
 import { CoinbaseSans } from '../../styles/fonts';
 
-export const Milestone = styled.div<{ completed: boolean }>`
+export const Milestone = styled.div<{ $completed: boolean }>`
   padding-top: 0.5rem;
   padding-left: 0.9375rem;
   width: 17rem;
   height: 2.375rem;
   flex-shrink: 0;
   border-radius: 1rem 0.3125rem 0.3125rem 0.3125rem;
   border-top: ${props =>
-    props.completed
+    props.$completed
       ? `0.0625rem solid ${COLORS.electricBlue}`
       : `0.0625rem solid ${COLORS.grey80}`};
   border-left: ${props =>
-    props.completed
+    props.$completed
       ? `0.25px solid ${COLORS.electricBlue}`
       : `0.25px solid ${COLORS.grey80}`};
   background: ${props =>
-    props.completed
+    props.$completed
       ? 'linear-gradient(0deg, rgba(73, 116, 224, 0.00) 0%, rgba(73, 116, 224, 0.08) 100%)'
       : 'none'};
   color: ${props =>
-    props.completed ? COLORS.electricBlue : 'rgba(46, 58, 89, 0.45)'};
+    props.$completed ? COLORS.electricBlue : 'rgba(46, 58, 89, 0.45)'};
   font-family: ${fonts.CoinbaseSans};
   font-size: 0.625rem;
   font-style: normal;
@@ -34,15 +34,15 @@ export const Milestone = styled.div<{ completed: boolean }>`
   box-shadow: 0px 4px 0px 0px #fff inset;
 `;
 
-export const MilestoneLabel = styled.p<{ status: boolean }>`
+export const MilestoneLabel = styled.p<{ $status: boolean }>`
   font: ${CoinbaseSans.style};
   margin-top: 0.125rem;
   margin-bottom: 0;
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  color: ${props =>
-    props.status ? 'rgba(73, 116, 224, 0.45)' : 'rgba(46, 58, 89, 0.3)'};
+  color: ${({ $status }) =>
+    $status ? 'rgba(73, 116, 224, 0.45)' : 'rgba(46, 58, 89, 0.3)'};
 `;
 
 export const MilestoneTitle = styled.div`