Merge branch 'master' into dependabot/npm_and_yarn/web/jotai-2.10.1

electricitymaps · Nov 4, 2024 · 69eacfb · 69eacfb
2 parents 9379598 + 7aea68a
commit 69eacfb
Showing 1 changed file with 12 additions and 56 deletions.
diff --git a/web/src/features/charts/ProductionSourceLegendList.tsx b/web/src/features/charts/ProductionSourceLegendList.tsx
@@ -1,8 +1,5 @@
-import TooltipWrapper from 'components/tooltips/TooltipWrapper';
-import { X } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 import { ElectricityModeType } from 'types';
-import { useIsMobile } from 'utils/styling';
 
 import ProductionSourceLegend from './ProductionSourceLegend';
 
@@ -13,60 +10,19 @@ export default function ProductionSourceLegendList({
   sources: ElectricityModeType[];
   className?: string;
 }) {
-  const isMobile = useIsMobile();
-
-  return (
-    <TooltipWrapper
-      tooltipContent={<ProductionSourceTooltip sources={sources} isMobile={isMobile} />}
-      tooltipClassName={
-        isMobile
-          ? 'bg-transparent shadow-none border-transparent dark:bg-transparent items-center flex flex-col p-0 mb-2'
-          : 'rounded-2xl min-w-44 dark:bg-gray-900/80 dark:border-1 dark:border-gray-700 mx-5 backdrop-blur bg-white/80 mb-2'
-      }
-      side="bottom"
-      isMobile={isMobile}
-    >
-      <div className={twMerge('flex w-fit flex-row gap-1.5 py-1', className)}>
-        {sources.map((source, index) => (
-          <ProductionSourceLegend key={index} electricityType={source} />
-        ))}
-      </div>
-    </TooltipWrapper>
-  );
-}
-
-function ProductionSourceTooltip({
-  sources,
-  isMobile,
-}: {
-  sources: ElectricityModeType[];
-  isMobile: boolean;
-}) {
-  if (isMobile) {
-    return (
-      <>
-        <div className="dark:border-1 relative h-auto min-w-44 rounded-2xl border bg-white/80 p-4 text-left text-sm shadow-md backdrop-blur dark:border-gray-700 dark:bg-gray-900/80">
-          <ProductionSourceTooltipInner sources={sources} />
-        </div>
-        <button className="p-auto pointer-events-auto mt-2 flex h-10 w-10 items-center justify-center self-center rounded-full border bg-white text-black shadow-md">
-          <X />
-        </button>
-      </>
-    );
-  }
-
-  return <ProductionSourceTooltipInner sources={sources} />;
-}
-
-function ProductionSourceTooltipInner({ sources }: { sources: ElectricityModeType[] }) {
   return (
-    <div className="flex flex-col gap-1.5">
-      {sources.map((source) => (
-        <div key={source} className="flex flex-row gap-2">
-          <ProductionSourceLegend key={source} electricityType={source} />
-          <div className="text-xs font-medium">{source}</div>
-        </div>
-      ))}
+    <div className={twMerge('flex w-fit flex-row flex-wrap gap-2.5 py-1', className)}>
+      {sources.map((source, index) => {
+        const capitalizedLabel = `${source.charAt(0).toUpperCase()}${source.slice(1)}`;
+        return (
+          <span key={source} className="flex items-center gap-1 text-sm">
+            <ProductionSourceLegend key={index} electricityType={source} />
+            <p className="text-xs text-neutral-600 dark:text-gray-300">
+              {capitalizedLabel}
+            </p>
+          </span>
+        );
+      })}
     </div>
   );
 }