Add bold to popup

bcgov · Sep 28, 2021 · 7fb5a9c · 7fb5a9c
1 parent 6dd14d9
commit 7fb5a9c
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/app/src/components/map/OccurrenceFeaturePopup.tsx b/app/src/components/map/OccurrenceFeaturePopup.tsx
@@ -8,14 +8,26 @@ export const OccurrenceFeaturePopup: React.FC<{ featureData: any }> = (props) =>
 
   return (
     <Popup key={featureData.id} keepInView={false} autoPan={false}>
-      <div>{`Species: ${featureData.taxonId}`}</div>
-      <div>{`Lifestage: ${featureData.lifeStage}`}</div>
-      <div>{`Count: ${
-        featureData.organismQuantity
-          ? `${featureData.organismQuantity} ${featureData.organismQuantityType}`
-          : `${featureData.individualCount} Individuals`
-      }`}</div>
-      <div>{`Date: ${getFormattedDate(DATE_FORMAT.ShortMediumDateTimeFormat, featureData.eventDate)}`}</div>
+      <div>
+        <b>Species</b>
+        {`: ${featureData.taxonId}`}
+      </div>
+      <div>
+        <b>Lifestage</b>
+        {`: ${featureData.lifeStage}`}
+      </div>
+      <div>
+        <b>Count</b>
+        {`: ${
+          featureData.organismQuantity
+            ? `${featureData.organismQuantity} ${featureData.organismQuantityType}`
+            : `${featureData.individualCount} Individuals`
+        }`}
+      </div>
+      <div>
+        <b>Date</b>
+        {`: ${getFormattedDate(DATE_FORMAT.ShortMediumDateTimeFormat, featureData.eventDate)}`}
+      </div>
     </Popup>
   );
 };