Fix translation errors in frontend

rachelekm · rachelekm · commit a31ebbecdcc1 · 2026-03-10T15:03:07.000-04:00
diff --git a/src/frontend/public/locales/en/translation.json b/src/frontend/public/locales/en/translation.json
@@ -45,7 +45,6 @@
         "groupedCountZipCodes": "zip codes",
         "groupedLoadMore": "Load more",
         "eccBenefits": "ECC Benefits",
-        "commute": "Commute",
         "min": "min",
         "over2Hours": "Over 2 hr"
     },
@@ -68,8 +67,9 @@
         "schoolChoice": "School choice options",
         "schoolsSafetyCard": {
             "header": "Schools & Safety",
-            "schoolsLabel": "Schools",
-            "safetyLabel": "Safety",
+            "schools": "Schools",
+            "safety": "Safety",
+            "commute": "Commute",
             "high": "High",
             "above": "Above Avg",
             "average": "Average",
diff --git a/src/frontend/public/locales/es/translation.json b/src/frontend/public/locales/es/translation.json
@@ -45,7 +45,6 @@
         "groupedCountZipCodes": "códigos postales",
         "groupedLoadMore": "Mostrar más",
         "eccBenefits": "Beneficios ECC",
-        "commute": "Transporte",
         "min": "minutos",
         "over2Hours": "Over 2 hr"
     },
@@ -68,8 +67,9 @@
         "schoolChoice": "School choice options",
         "schoolsSafetyCard": {
             "header": "Escuelas y Seguridad",
-            "schoolsLabel": "Escuelas",
-            "safetyLabel": "Seguridad",
+            "schools": "Escuelas",
+            "safety": "Seguridad",
+            "commute": "Transporte",
             "high": "Alto",
             "above": "Por encima del Promedio",
             "average": "Promedio",
@@ -199,7 +199,7 @@
         "bodyText": "Edita tus configuraciones y añade filtros usando los botones en la parte superior.",
         "showMyRecommendations": "Mostrar mis recomendaciones",
         "listNeighborhoods": "Lista de todos los vecindarios",
-        "showTopTen": "Mostrar 10 mejores",
+        "showTopTen": "Mostrar 10 Mejores",
         "next": "Siguiente",
         "details": "Detalles",
         "prev": "Anterior"
diff --git a/src/frontend/public/locales/zh/translation.json b/src/frontend/public/locales/zh/translation.json
@@ -45,7 +45,6 @@
         "groupedCountZipCodes": "個郵政編",
         "groupedLoadMore": "載入更多",
         "eccBenefits": "擴大選擇社區（ECC）補助",
-        "commute": "通勤",
         "min": "分鐘",
         "over2Hours": "Over 2 hr"
     },
@@ -68,8 +67,9 @@
         "schoolChoice": "School choice options",
         "schoolsSafetyCard": {
             "header": "學校與安全",
-            "schoolsLabel": "學校",
-            "safetyLabel": "安全",
+            "schools": "學校",
+            "safety": "安全",
+            "commute": "通勤",
             "high": "高",
             "above": "高於平均",
             "average": "平均",
diff --git a/src/frontend/src/components/EditWizard/StepTrips.tsx b/src/frontend/src/components/EditWizard/StepTrips.tsx
@@ -87,7 +87,10 @@ const StepTrips = ({
                     >
                         <div>
                             <h2 className="text-xl font-bold text-gray-900">
-                                {destination.purpose}
+                                {t([
+                                    "destinationPurposes." +
+                                        destination.purpose,
+                                ])}
                             </h2>
                             <p className="max-w-40 flex flex-wrap font-normal text-gray-600 text-sm">
                                 {destination.location.label}
diff --git a/src/frontend/src/components/NeighborhoodCard/NeighborhoodCard.styles.ts b/src/frontend/src/components/NeighborhoodCard/NeighborhoodCard.styles.ts
@@ -13,8 +13,9 @@ export const cardStyles = tv({
         zip: "text-rg text-gray-500",
         tagsContainer: "flex flex-wrap gap-2",
         tag: " h-[21px] flex items-center gap-2 rounded-[var(--spacing-2)] border border-gray-300 px-2 py-1 text-xs font-bold text-[#006512]",
-        statsContainer: "flex flex-start gap-5 self-stretch -mt-2",
-        statItem: "flex flex-1 flex-col px-0 py-3 align-start",
+        statsContainer:
+            "flex flex-start gap-5 self-stretch -mt-2 overflow-hidden",
+        statItem: "flex flex-1 max-w-[33.33%] flex-col px-0 py-3 align-start",
         navContainer:
             "flex align-center self-stretch gap-3 border-t border-gray-300 p-3 bg-gray-100",
     },
@@ -37,5 +38,13 @@ export const cardStyles = tv({
                 root: "relative",
             },
         },
+        isPopup: {
+            true: {
+                root: "w-fit",
+            },
+            false: {
+                root: "w-auto",
+            },
+        },
     },
 });
diff --git a/src/frontend/src/components/NeighborhoodCard/NeighborhoodCard.tsx b/src/frontend/src/components/NeighborhoodCard/NeighborhoodCard.tsx
@@ -58,7 +58,11 @@ const NeighborhoodCard = ({
         statsContainer,
         statItem,
         navContainer,
-    } = cardStyles({ hasImage: !!imageUrl, ...listViewStyling });
+    } = cardStyles({
+        hasImage: !!imageUrl,
+        isPopup: isPopup,
+        ...listViewStyling,
+    });
     const { t } = useTranslation();
 
     const hasTag = isTopTen || hasECC;
diff --git a/src/frontend/src/components/SchoolMeter.tsx b/src/frontend/src/components/SchoolMeter.tsx
@@ -29,7 +29,12 @@ const SchoolMeter = ({
     return isSchoolChoice ? (
         <div className="flex flex-col gap-2 w-full">
             <div className={labelContainer()}>
-                <AriaLabel className={mainLabel()}>{props.label}</AriaLabel>
+                <AriaLabel className={mainLabel()}>
+                    {t([
+                        "neighborhoodDetail.schoolsSafetyCard." +
+                            props.labelKey,
+                    ])}
+                </AriaLabel>
             </div>
             <Link
                 href={schoolChoiceLink}
diff --git a/src/frontend/src/components/YourTrips/YourTrips.tsx b/src/frontend/src/components/YourTrips/YourTrips.tsx
@@ -41,7 +41,7 @@ const YourTrips = ({
             (tripsFromDest: TripType[], dest: Destination) => [
                 ...tripsFromDest,
                 {
-                    title: dest.purpose,
+                    title: t(["destinationPurposes." + dest.purpose]),
                     subtitle: dest.location.label,
                     neighborhoodZipcode: activeNeighborhood ?? "",
                     destination: dest,
diff --git a/src/frontend/src/components/base/Meter/Meter.styles.ts b/src/frontend/src/components/base/Meter/Meter.styles.ts
@@ -3,9 +3,10 @@ import { tv } from "tailwind-variants";
 export const meterStyles = tv({
     slots: {
         root: "flex flex-col gap-3 w-full ",
-        labelContainer: "flex flex-col",
+        labelContainer: "flex flex-col w-full",
         mainLabel: "text-sm text-gray-600",
-        valueLabel: "text-sm font-bold text-black -mt-1 mb-[1px] text-nowrap",
+        valueLabel:
+            "text-sm font-bold text-black -mt-1 mb-[1px] text-nowrap truncate",
         track: "absolute top-1 h-1 w-full rounded-[var(--spacing-1)] bg-gray-300",
         fill: "absolute h-[6px] rounded-[var(--spacing-1)]",
         thumb: "absolute rounded-[var(--spacing-1)] top-[3px] h-4 w-2 -translate-y-1/2 left-[calc(50%-2px)] bg-gray-500 border border-white",
diff --git a/src/frontend/src/components/base/Meter/Meter.tsx b/src/frontend/src/components/base/Meter/Meter.tsx
@@ -10,7 +10,7 @@ import { meterStyles } from "./Meter.styles";
 type MeterStatus = "Low" | "Below Avg" | "Average" | "Above Avg" | "High";
 
 export interface MeterProps extends AriaMeterProps {
-    label: string;
+    labelKey: string;
     showCategory?: boolean;
 }
 
@@ -22,7 +22,7 @@ const getStatusFromValue = (value: number): MeterStatus => {
     return "High";
 };
 
-const Meter = ({ label, showCategory = false, ...props }: MeterProps) => {
+const Meter = ({ labelKey, showCategory = false, ...props }: MeterProps) => {
     const { t } = useTranslation();
     const status = getStatusFromValue(props.value ?? 0);
     const { root, labelContainer, mainLabel, valueLabel, track, fill, thumb } =
@@ -35,7 +35,12 @@ const Meter = ({ label, showCategory = false, ...props }: MeterProps) => {
             {({ percentage }) => (
                 <>
                     <div className={labelContainer()}>
-                        <AriaLabel className={mainLabel()}>{label}</AriaLabel>
+                        <AriaLabel className={mainLabel()}>
+                            {t([
+                                "neighborhoodDetail.schoolsSafetyCard." +
+                                    labelKey,
+                            ])}
+                        </AriaLabel>
                         {showCategory && (
                             <AriaLabel className={valueLabel()}>
                                 {t([
diff --git a/src/frontend/src/components/base/Range/Range.styles.ts b/src/frontend/src/components/base/Range/Range.styles.ts
@@ -4,7 +4,7 @@ export const rangeStyles = tv({
     slots: {
         root: "flex flex-col gap-3 w-full",
         labelContainer: "flex flex-col max-w-[80px]",
-        mainLabel: "text-sm text-gray-600",
+        mainLabel: "text-sm text-gray-600 truncate",
         rangeLabel: "text-sm font-bold text-black truncate",
         track: "absolute top-1 h-1 w-full rounded-[var(--spacing-1)] bg-gray-300",
         fill: "flex flex-row justify-end absolute h-[6px] rounded-[var(--spacing-1)] bg-gray-500",
diff --git a/src/frontend/src/components/base/Range/Range.tsx b/src/frontend/src/components/base/Range/Range.tsx
@@ -7,7 +7,7 @@ const MIN_DEFAULT = 0;
 const MAX_DEFAULT = 120;
 
 export interface RangeProps {
-    label?: string;
+    labelKey?: string;
     start: number;
     end: number;
     className?: string;
@@ -16,7 +16,7 @@ export interface RangeProps {
 }
 
 const Range = ({
-    label,
+    labelKey,
     start,
     end,
     className,
@@ -42,7 +42,13 @@ const Range = ({
     return (
         <div className={root({ className })}>
             <div className={labelContainer()}>
-                {label && <span className={mainLabel()}>{label}</span>}
+                {labelKey && (
+                    <span className={mainLabel()}>
+                        {t([
+                            "neighborhoodDetail.schoolsSafetyCard." + labelKey,
+                        ])}
+                    </span>
+                )}
                 <span className={rangeLabel()}>{rangeText}</span>
             </div>
             <div className="relative">
diff --git a/src/frontend/src/libs/formatNeighborhoodDataByCard.ts b/src/frontend/src/libs/formatNeighborhoodDataByCard.ts
@@ -67,7 +67,7 @@ const formatNeighborhoodDataByCard = (
 
     const stats = {
         schools: {
-            label: "Schools",
+            labelKey: "schools",
             value: neighborhoodDetail.education_percentile ?? undefined,
             showCategory: true,
             isBoston: isNeighborhoodBostonTownArea(
@@ -76,12 +76,12 @@ const formatNeighborhoodDataByCard = (
             isSchoolChoice: neighborhoodDetail.school_choice,
         },
         safety: {
-            label: "Safety",
+            labelKey: "safety",
             value: neighborhoodDetail.crime_percentile ?? undefined,
             showCategory: true,
         },
         commute: {
-            label: "Commute",
+            labelKey: "commute",
             start: neighborhoodDetail.commutes[activeDestination].commuteMin,
             end: neighborhoodDetail.commutes[activeDestination].commuteMax,
         },
diff --git a/src/frontend/src/pages/Discover/Profile/AddTripModal.tsx b/src/frontend/src/pages/Discover/Profile/AddTripModal.tsx
@@ -129,7 +129,10 @@ const AddTripModal = ({
                                             className={`${buttonStyles({ variant: "outline" })} w-full h-full rounded-lg !p-4 justify-items-center ${isSelected ? "border-2 border-teal-600" : "border-2 border-gray-300"}`}
                                         >
                                             <p className="text-md font-bold text-black">
-                                                {item.name}
+                                                {t([
+                                                    "destinationPurposes." +
+                                                        item.name,
+                                                ])}
                                             </p>
                                         </div>
                                     )}
diff --git a/src/frontend/src/pages/NeighborhoodDetail/InfoContent.tsx b/src/frontend/src/pages/NeighborhoodDetail/InfoContent.tsx
@@ -149,19 +149,15 @@ const InfoContent = ({
                     </h2>
                     <div className="flex flex-row gap-5">
                         <SchoolMeter
-                            label={t(
-                                "neighborhoodDetail.schoolsSafetyCard.schoolsLabel"
-                            )}
+                            labelKey="schools"
                             value={education_percentile ?? 0}
                             isSchoolChoice={school_choice}
                             isBoston={isNeighborhoodBostonTownArea(town_area)}
                             showCategory
                             isDetailPage
                         />
                         <Meter
-                            label={t(
-                                "neighborhoodDetail.schoolsSafetyCard.safetyLabel"
-                            )}
+                            labelKey="safety"
                             value={crime_percentile ?? 0}
                             showCategory
                         />

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ const YourTrips = ({`
`41`	`41`	`(tripsFromDest: TripType[], dest: Destination) => [`
`42`	`42`	`...tripsFromDest,`
`43`	`43`	`{`
`44`		`- title: dest.purpose,`
	`44`	`+ title: t(["destinationPurposes." + dest.purpose]),`
`45`	`45`	`subtitle: dest.location.label,`
`46`	`46`	`neighborhoodZipcode: activeNeighborhood ?? "",`
`47`	`47`	`destination: dest,`