fix: source button contrast and translations (#7418)

electricitymaps · Nov 15, 2024 · e423fb3 · e423fb3
1 parent 61bccad
commit e423fb3
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/web/src/features/charts/ProductionSourceLegendList.tsx b/web/src/features/charts/ProductionSourceLegendList.tsx
@@ -1,4 +1,5 @@
 import { Button } from 'components/Button';
+import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
 import { ElectricityModeType } from 'types';
 
@@ -16,12 +17,16 @@ export default function ProductionSourceLegendList({
   selectedData?: SelectedData;
   isDataInteractive?: boolean;
 }) {
+  const { t } = useTranslation();
   // TODO(cady): memoize
   return (
     <div className={twMerge('flex w-fit flex-row flex-wrap gap-1 py-1', className)}>
       {sources.map((source, index) => {
         const onClick = () => selectedData?.toggle(source);
-        const capitalizedLabel = `${source.charAt(0).toUpperCase()}${source.slice(1)}`;
+        const translatedSource = t(source.toLowerCase());
+        const capitalizedLabel = `${translatedSource
+          .charAt(0)
+          .toUpperCase()}${translatedSource.slice(1)}`;
         const isSourceSelected = selectedData?.isSelected(source);
 
         return (
@@ -30,12 +35,14 @@ export default function ProductionSourceLegendList({
             key={index}
             type="tertiary"
             size="sm"
-            foregroundClasses={'text-xs font-normal text-neutral-600 dark:text-gray-300'}
-            backgroundClasses={
-              isSourceSelected
-                ? 'outline outline-1 outline-neutral-200 bg-neutral-400/10 dark:bg-gray-600/80 dark:outline-gray-400/80'
-                : ''
-            }
+            foregroundClasses={twMerge(
+              'text-xs font-normal text-neutral-600 dark:text-gray-300',
+              isSourceSelected && 'text-neutral-800 dark:text-white'
+            )}
+            backgroundClasses={twMerge(
+              isSourceSelected &&
+                'outline outline-1 outline-neutral-200 bg-neutral-400/10 dark:bg-gray-600/80 dark:outline-gray-400/50'
+            )}
             onClick={onClick}
             icon={<ProductionSourceLegend key={index} electricityType={source} />}
           >