From b2890c6bbde12cda8851962ed97bf5a9d6711a68 Mon Sep 17 00:00:00 2001
From: Mads Nedergaard <nedergaardmads@gmail.com>
Date: Sat, 12 Nov 2022 23:35:29 +0100
Subject: [PATCH] Updates badges

---
 web/src/components/Badge.tsx                  | 25 ++++++++++++++
 web/src/features/panels/Zone/CountryTag.tsx   |  4 +--
 web/src/features/panels/Zone/ZoneDetails.tsx  |  2 +-
 web/src/features/panels/Zone/ZoneHeader.tsx   | 33 ++++++++-----------
 .../features/panels/Zone/ZoneHeaderTitle.tsx  |  9 +++--
 5 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 web/src/components/Badge.tsx

diff --git a/web/src/components/Badge.tsx b/web/src/components/Badge.tsx
new file mode 100644
index 0000000000..eb8e6c68e7
--- /dev/null
+++ b/web/src/components/Badge.tsx
@@ -0,0 +1,25 @@
+type BadgeProps = {
+  children: string;
+  type?: 'default' | 'warning';
+  className?: string;
+};
+
+export default function Badge({ children, type = 'default', className }: BadgeProps) {
+  // set background and text color classes depending on type
+  const bgColorClasses = {
+    default: 'bg-gray-300 dark:bg-gray-400',
+    warning: 'bg-yellow-400 dark:bg-yellow-500',
+  }[type];
+  const textColorClasses = {
+    default: 'text-gray-800/75 dark:text-gray-900',
+    warning: 'text-yellow-900/95 dark:text-gray-900/95',
+  }[type];
+
+  return (
+    <span
+      className={`rounded-full py-[1px] px-2 text-xs font-medium ${bgColorClasses} ${textColorClasses} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/web/src/features/panels/Zone/CountryTag.tsx b/web/src/features/panels/Zone/CountryTag.tsx
index a32b0d31a2..34a8ae8282 100644
--- a/web/src/features/panels/Zone/CountryTag.tsx
+++ b/web/src/features/panels/Zone/CountryTag.tsx
@@ -14,14 +14,14 @@ const getCountryName = (zoneId: string) => {
 export function CountryTag({ zoneId }: { zoneId: string }) {
   const countryName = getCountryName(zoneId);
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  const isACountry = zoneId.length === 2; // TODO: set up proper method to check if zoneId is a country
+  const isACountry = zoneId !== 'US' && zoneId.length === 2; // TODO: set up proper method to check if zoneId is a country
 
   if (isACountry) {
     return <CountryFlag zoneId={zoneId} flagSize={16} className="inline-flex" />;
   }
 
   return (
-    <span className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0 text-xs">
+    <span className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 text-xs dark:bg-gray-900">
       <CountryFlag zoneId={zoneId} flagSize={16} />
       <span>{countryName}</span>
     </span>
diff --git a/web/src/features/panels/Zone/ZoneDetails.tsx b/web/src/features/panels/Zone/ZoneDetails.tsx
index 85c67629c4..6f22bcdb0d 100644
--- a/web/src/features/panels/Zone/ZoneDetails.tsx
+++ b/web/src/features/panels/Zone/ZoneDetails.tsx
@@ -22,7 +22,7 @@ export default function ZoneDetails(): JSX.Element {
 
   return (
     <div>
-      <ZoneHeader zoneId={zoneId} date="" isEstimated isAggregated />
+      <ZoneHeader zoneId={zoneId} date="November 9, 2022 at 8:00" isEstimated isAggregated />
       {status === 'loading' && 'Loading...'}
     </div>
   );
diff --git a/web/src/features/panels/Zone/ZoneHeader.tsx b/web/src/features/panels/Zone/ZoneHeader.tsx
index ea5e22efdb..a3fc022b33 100644
--- a/web/src/features/panels/Zone/ZoneHeader.tsx
+++ b/web/src/features/panels/Zone/ZoneHeader.tsx
@@ -1,3 +1,4 @@
+import Badge from 'components/Badge';
 import CarbonIntensitySquare from 'components/CarbonIntensitySquare';
 import { CircularGauge } from 'components/CircularGauge';
 import { CountryTag } from './CountryTag';
@@ -5,32 +6,26 @@ import ZoneHeaderTitle from './ZoneHeaderTitle';
 
 interface ZoneHeaderProps {
   zoneId: string;
+  date: string;
+  isEstimated?: boolean;
+  isAggregated?: boolean;
 }
 
-export function ZoneHeader(props: ZoneHeaderProps) {
-  const { zoneId } = props;
-  // TODO: use correct zoneId
-
+export function ZoneHeader({ date, zoneId, isEstimated, isAggregated }: ZoneHeaderProps) {
   return (
     <div className="mt-1 grid w-full gap-y-5 sm:pr-4">
       <ZoneHeaderTitle
-        title="Western Area Power Administration Rocky Mountain Region "
-        formattedDate="November 9, 2022 at 8:00"
+        title="Western Area Power Administration Rocky Mountain Region"
+        formattedDate={date}
         labels={[
-          <div
-            key="estimated-label"
-            className="w-18 rounded-full bg-yellow-400 px-2 text-center text-xs"
-          >
-            Estimated
-          </div>,
-          <div
-            key="aggregated-label"
-            className="w-20 rounded-full bg-gray-400 px-2 text-center text-xs text-white"
-          >
-            Aggregated
-          </div>,
+          isEstimated && (
+            <Badge type="warning" key={'badge-est'}>
+              Estimated
+            </Badge>
+          ),
+          isAggregated && <Badge key={'badge-agg'}>Aggregated</Badge>,
         ]}
-        countryTag={<CountryTag zoneId={'US-NW-WACM'} />}
+        countryTag={<CountryTag zoneId={'US-MISO'} />}
       />
       <div className="flex flex-row justify-evenly">
         <CarbonIntensitySquare co2intensity={60} withSubtext />
diff --git a/web/src/features/panels/Zone/ZoneHeaderTitle.tsx b/web/src/features/panels/Zone/ZoneHeaderTitle.tsx
index be0f9f85c8..5c40359874 100644
--- a/web/src/features/panels/Zone/ZoneHeaderTitle.tsx
+++ b/web/src/features/panels/Zone/ZoneHeaderTitle.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 interface ZoneHeaderTitleProps {
   title: string;
   formattedDate: string;
-  labels?: React.ReactElement[];
+  labels?: (false | JSX.Element | undefined)[];
   countryTag?: React.ReactElement;
 }
 
@@ -14,15 +14,18 @@ export default function ZoneHeaderTitle({
   countryTag,
 }: ZoneHeaderTitleProps) {
   // TODO: add correct icon
+  // TODO: Align title and countryTag vertically, while keeping the tag
+  // "wrapped" in the title. Also add gap between title and countryTag.
+
   return (
     <div className="flex flex-row pl-2">
       <Link className="mr-4 self-center text-3xl text-gray-400" to="/">
         {'❮'}
       </Link>
       <div>
-        <h2 className="text-md mb-1 text-base font-medium">
+        <h2 className="text-md mb-0.5 space-x-1.5 text-base font-medium">
           <span>{title}</span>
-          <span> {countryTag}</span>
+          {countryTag}
         </h2>
         <div className="flex flex-wrap items-center gap-1 text-center">
           {labels}