SurveyResponse: update status color configuration

FixMyBerlin · Dec 9, 2024 · c6a8518 · c6a8518
1 parent 04f7b19
commit c6a8518
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 84 deletions.
diff --git a/src/app/admin/logEntries/page.tsx b/src/app/admin/logEntries/page.tsx
@@ -67,11 +67,11 @@ export default async function AdminLogEntriesPage() {
                   <td className="py-4 pl-4 pr-3 text-sm sm:pr-6">
                     <StatusLabel
                       label={logEntry.logLevel}
-                      colorClass={
+                      className={
                         {
-                          INFO: "text-yellow-700 bg-yellow-100",
-                          WARN: "text-pink-700 bg-pink-100",
-                          ERROR: "text-red-700 bg-red-100",
+                          INFO: "bg-yellow-100 text-yellow-700",
+                          WARN: "bg-pink-100 text-pink-700",
+                          ERROR: "bg-red-100 text-red-700",
                         }[logEntry.logLevel]
                       }
                     >

diff --git a/src/app/admin/surveys/page.tsx b/src/app/admin/surveys/page.tsx
@@ -26,9 +26,9 @@ export default async function AdminSurveysPage() {
               <div className="flex items-center justify-between">
                 <h2>{survey.slug}</h2>
                 {allowedSurveySlugs.includes(survey.slug) ? (
-                  <StatusLabel label="Ist konfiguriert" colorClass="bg-green-200" />
+                  <StatusLabel label="Ist konfiguriert" className="bg-green-200" />
                 ) : (
-                  <StatusLabel label="NICHT konfiguriert" colorClass="bg-red-700 text-white" />
+                  <StatusLabel label="NICHT konfiguriert" className="bg-red-700 text-white" />
                 )}
               </div>
               <div className="space-x-3">

diff --git a/src/core/components/Map/SurveyStaticPin.tsx b/src/core/components/Map/SurveyStaticPin.tsx
@@ -1,34 +1,26 @@
+import { AllowedSurveySlugs } from "@/src/survey-public/utils/allowedSurveySlugs"
+import { getSurveyDefinitionBySurveySlug } from "@/src/survey-public/utils/getConfigBySurveySlug"
 import clsx from "clsx"
 import * as React from "react"
 
 type Props = {
-  colorClass?: string
+  color?: string
   light?: boolean
   small?: boolean
+  surveySlug: AllowedSurveySlugs
 }
 
-const SurveyStaticPin: React.FC<Props> = ({ colorClass, light, small }) => {
+const SurveyStaticPin: React.FC<Props> = ({ color, light, small, surveySlug }) => {
+  const surveyDefinition = getSurveyDefinitionBySurveySlug(surveySlug)
   return (
     <svg width="38" height="48" viewBox="0 0 38 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <mask id="pin-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="38" height="48">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M19 0C29.4934 0 38 8.82644 38 19.7144C38 22.3298 36.7984 25.629 34.5493 29.4168C32.8863 32.2175 30.7033 35.2017 28.1269 38.2825C25.9191 40.9225 23.5498 43.484 21.1804 45.8647L19.984 47.0508L19 48L18.016 47.0508C17.6338 46.6771 17.2342 46.2812 16.8196 45.8647C14.4502 43.484 12.0809 40.9225 9.87312 38.2825C7.2967 35.2017 5.11365 32.2175 3.4507 29.4168C1.20161 25.629 0 22.3298 0 19.7144C0 8.82644 8.50659 0 19 0Z"
-            fill="white"
-            transform={small ? "scale(0.7)" : undefined} // Shrink the SVG by 30%
-          />
-        </mask>
-      </defs>
-      <rect
-        width="38"
-        height="48"
-        className={clsx(
-          light && "stroke-white opacity-70",
-          colorClass || "fill-[var(--survey-primary-color)]",
-        )}
-        mask="url(#pin-mask)"
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19 0C29.4934 0 38 8.82644 38 19.7144C38 22.3298 36.7984 25.629 34.5493 29.4168C32.8863 32.2175 30.7033 35.2017 28.1269 38.2825C25.9191 40.9225 23.5498 43.484 21.1804 45.8647L19.984 47.0508L19 48L18.016 47.0508C17.6338 46.6771 17.2342 46.2812 16.8196 45.8647C14.4502 43.484 12.0809 40.9225 9.87312 38.2825C7.2967 35.2017 5.11365 32.2175 3.4507 29.4168C1.20161 25.629 0 22.3298 0 19.7144C0 8.82644 8.50659 0 19 0Z"
+        className={clsx(light && "stroke-white opacity-70")}
+        style={{ fill: color || surveyDefinition.primaryColor }}
+        transform={small ? "scale(0.7)" : undefined} // Shrink the SVG by 30%
       />
       <path
         d="M14 20.3846L17.4737 25L25 15"

diff --git a/src/core/components/Map/SurveyStaticPinWithStatusColor.tsx b/src/core/components/Map/SurveyStaticPinWithStatusColor.tsx
@@ -17,8 +17,8 @@ export const SurveyStaticPinWithStatusColor: React.FC<Props> = ({
   small,
 }) => {
   const { status: statusConfig } = getBackendConfigBySurveySlug(surveySlug)
-  const statusColorClass = statusConfig
-    .find((s) => s.value === status)
-    ?.colorClass.replace("bg-", "fill-")
-  return <SurveyStaticPin small={small} light={!selected} colorClass={statusColorClass} />
+  const statusColor = statusConfig?.find((s) => s.value === status)?.color
+  return (
+    <SurveyStaticPin surveySlug={surveySlug} small={small} light={!selected} color={statusColor} />
+  )
 }
diff --git a/src/core/components/Status/StatusLabel.tsx b/src/core/components/Status/StatusLabel.tsx
@@ -1,11 +1,12 @@
 import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid"
 import { ClockIcon, DocumentTextIcon } from "@heroicons/react/24/outline"
-import { clsx } from "clsx"
+import clsx from "clsx"
 
 type Props = {
   icon?: "XMARK" | "CLOCK" | "CHECKMARK" | "DOCUMENT" | undefined
   label: string
-  colorClass: string
+  color?: string
+  className?: string
 }
 
 const statusIcon = {
@@ -15,11 +16,12 @@ const statusIcon = {
   CHECKMARK: <CheckIcon className="h-4 w-4" />,
 }
 
-export const StatusLabel = ({ icon, label, colorClass }: Props) => {
+export const StatusLabel = ({ icon, label, color, className }: Props) => {
   return (
     <div
+      style={{ backgroundColor: color }}
       className={clsx(
-        colorClass,
+        className,
         "flex flex-shrink-0 items-center gap-4 whitespace-nowrap rounded-full px-5 py-2",
       )}
     >

diff --git a/src/pagesComponents/invites/TeamInvitesTable.tsx b/src/pagesComponents/invites/TeamInvitesTable.tsx
@@ -60,7 +60,7 @@ export const TeamInvitesTable = () => {
                 <td className="h-20 whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                   <StatusLabel
                     label={statusTranslations[invite.status]}
-                    colorClass={clsx(statusColors[invite.status], "inline-flex")}
+                    className={clsx(statusColors[invite.status], "inline-flex")}
                   />
                 </td>
                 <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">

diff --git a/src/pagesComponents/stakeholdernotes/StakeholderSectionListItemStatus.tsx b/src/pagesComponents/stakeholdernotes/StakeholderSectionListItemStatus.tsx
@@ -36,7 +36,7 @@ export const StakeholderSectionListItemStatus: React.FC<Props> = ({ status }) =>
     <StatusLabel
       icon={statusIcon[status]}
       label={stakeholderNotesStatus[status]}
-      colorClass={clsx(statusColors[status], "min-w-[200px]")}
+      className={clsx(statusColors[status], "min-w-[200px]")}
     />
   )
 }
diff --git a/src/survey-public/frm7/data/backend-config.ts b/src/survey-public/frm7/data/backend-config.ts
@@ -5,20 +5,20 @@ import { TBackendConfig } from "../../utils/backend-config-defaults"
 
 export const backendConfig: TBackendConfig = {
   status: [
-    { value: "PENDING", label: "Ausstehend", colorClass: "bg-yellow-100", icon: "CLOCK" }, // DEFAULT
-    { value: "ASSIGNED", label: "Zugeordnet (BLT)", colorClass: "bg-indigo-100", icon: "DOCUMENT" },
-    { value: "IRRELEVANT", label: "Nicht relevant", colorClass: "bg-gray-100", icon: "XMARK" },
+    { value: "PENDING", label: "Ausstehend", color: "#FDEEBF", icon: "CLOCK" }, // DEFAULT
+    { value: "ASSIGNED", label: "Zugeordnet (BLT)", color: "#e0e7ff", icon: "DOCUMENT" },
+    { value: "IRRELEVANT", label: "Nicht relevant", color: "#f3f4f6", icon: "XMARK" },
     {
       value: "HANDED_OVER",
       label: "Übergeben Planung",
-      colorClass: "bg-indigo-100",
+      color: "#e0e7ff",
       icon: "DOCUMENT",
     },
-    { value: "DONE_FAQ", label: "Erledigt (FAQ)", colorClass: "bg-green-100", icon: "CHECKMARK" },
+    { value: "DONE_FAQ", label: "Erledigt (FAQ)", color: "#D1FAE5", icon: "CHECKMARK" },
     {
       value: "DONE_PLANING",
       label: "Erledigt (Planung)",
-      colorClass: "bg-green-100",
+      color: "#D1FAE5",
       icon: "CHECKMARK",
     },
   ],

diff --git a/src/survey-public/radnetz-brandenburg/data/backend-config.ts b/src/survey-public/radnetz-brandenburg/data/backend-config.ts
@@ -5,107 +5,107 @@ import { TBackendConfig } from "../../utils/backend-config-defaults"
 
 export const backendConfig: TBackendConfig = {
   status: [
-    { value: "PENDING", label: "Zu prüfen", colorClass: "bg-yellow-100", icon: "CLOCK" }, // DEFAULT
+    { value: "PENDING", label: "Zu prüfen", color: "#FDEEBF", icon: "CLOCK" }, // DEFAULT
     {
       value: "PRE-CHECKMARK-ADAPTION",
       label: "Prüfung (Anpassung des Netzentwurfs)",
-      colorClass: "bg-green-100",
+      color: "#D1FAE5",
       icon: "CLOCK",
     },
     {
       value: "PRE-CHECKMARK-NO-ADAPTION",
       label: "Prüfung (keine Anpassung des Netzentwurfs)",
-      colorClass: "bg-pink-100",
+      color: "#FFB3DC",
       icon: "CLOCK",
     },
     {
       value: "ADAPTION-1",
       label: "Erledigt (Anpassung - Neue Route wird ergänzt)",
-      colorClass: "bg-green-200",
+      color: "#A7F3D0",
       icon: "CHECKMARK",
     },
     {
       value: "ADAPTION-2",
       label: "Erledigt (Anpassung - Relation wird durch alternative Route ersetzt)",
-      colorClass: "bg-green-200",
+      color: "#A7F3D0",
       icon: "CHECKMARK",
     },
     {
       value: "ADAPTION-3",
       label: "Erledigt (Anpassung - Zwei alternative Routen im finalen Konzept)",
-      colorClass: "bg-green-200",
+      color: "#A7F3D0",
       icon: "CHECKMARK",
     },
     {
       value: "ADAPTION-4",
       label: "Erledigt (Anpassung - Lückenschluss)",
-      colorClass: "bg-green-200",
+      color: "#A7F3D0",
       icon: "CHECKMARK",
     },
     {
       value: "ADAPTION-5",
       label: "Erledigt (Anpassung - Sonstiges (Freitext))",
-      colorClass: "bg-green-200",
+      color: "#A7F3D0",
       icon: "CHECKMARK",
     },
     {
       value: "NO-ADAPTION-1",
       label: "Erledigt (Keine Anpassung - Hinweis zu bestehenden Mängeln)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-2",
       label: "Erledigt (Keine Anpassung - Vorschlag zu umwegig)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-3",
       label: "Erledigt (Keine Anpassung - Zu hoher Bauaufwand)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-4",
       label: "Erledigt (Keine Anpassung - Detailplanung erforderlich)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-5",
       label: "Erledigt (Keine Anpassung - Fehlender Bezug zum Radnetz bzw. nicht relevant)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-6",
       label: "Erledigt (Keine Anpassung - Parallele Bahnverbindung)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-7",
       label: "Erledigt (Keine Anpassung - Strecke zu lang)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-8",
       label: "Erledigt (Keine Anpassung - Parallele Verbindung vorhanden)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-9",
       label: "Erledigt (Keine Anpassung - Keine Verbindung für landesweites Konzept)",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
     {
       value: "NO-ADAPTION-10",
       label: "Erledigt (Keine Anpassung - Sonstiges (Freitext))",
-      colorClass: "bg-pink-200",
+      color: "#FF80C5",
       icon: "XMARK",
     },
   ],

diff --git a/src/survey-public/rs8/data/backend-config.ts b/src/survey-public/rs8/data/backend-config.ts
@@ -5,20 +5,20 @@ import { TBackendConfig } from "../../utils/backend-config-defaults"
 
 export const backendConfig: TBackendConfig = {
   status: [
-    { value: "PENDING", label: "Ausstehend", colorClass: "bg-yellow-100", icon: "CLOCK" }, // DEFAULT
-    { value: "ASSIGNED", label: "Zugeordnet (BLT)", colorClass: "bg-indigo-100", icon: "DOCUMENT" },
-    { value: "IRRELEVANT", label: "Nicht relevant", colorClass: "bg-gray-100", icon: "XMARK" },
+    { value: "PENDING", label: "Ausstehend", color: "#FDEEBF", icon: "CLOCK" }, // DEFAULT
+    { value: "ASSIGNED", label: "Zugeordnet (BLT)", color: "#e0e7ff", icon: "DOCUMENT" },
+    { value: "IRRELEVANT", label: "Nicht relevant", color: "#f3f4f6", icon: "XMARK" },
     {
       value: "HANDED_OVER",
       label: "Übergeben Planung",
-      colorClass: "bg-indigo-100",
+      color: "#e0e7ff",
       icon: "DOCUMENT",
     },
-    { value: "DONE_FAQ", label: "Erledigt (FAQ)", colorClass: "bg-green-100", icon: "CHECKMARK" },
+    { value: "DONE_FAQ", label: "Erledigt (FAQ)", color: "#D1FAE5", icon: "CHECKMARK" },
     {
       value: "DONE_PLANING",
       label: "Erledigt (Planung)",
-      colorClass: "bg-green-100",
+      color: "#D1FAE5",
       icon: "CHECKMARK",
     },
   ],

diff --git a/src/survey-public/utils/backend-config-defaults.ts b/src/survey-public/utils/backend-config-defaults.ts
@@ -4,7 +4,7 @@
 type StatusItem = {
   value: string
   label: string
-  colorClass: string
+  color: `#${string}`
   icon: "XMARK" | "CLOCK" | "CHECKMARK" | "DOCUMENT"
 }
 
@@ -47,20 +47,20 @@ export type TBackendConfigDefaults = {
 
 export const backendConfig: TBackendConfigDefaults = {
   status: [
-    { value: "PENDING", label: "Ausstehend", colorClass: "bg-yellow-100", icon: "CLOCK" }, // DEFAULT
-    { value: "ASSIGNED", label: "Zugeordnet (BLT)", colorClass: "bg-indigo-100", icon: "DOCUMENT" },
-    { value: "IRRELEVANT", label: "Nicht relevant", colorClass: "bg-gray-100", icon: "XMARK" },
+    { value: "PENDING", label: "Ausstehend", color: "#FDEEBF", icon: "CLOCK" }, // DEFAULT
+    { value: "ASSIGNED", label: "Zugeordnet (BLT)", color: "#e0e7ff", icon: "DOCUMENT" },
+    { value: "IRRELEVANT", label: "Nicht relevant", color: "#f3f4f6", icon: "XMARK" },
     {
       value: "HANDED_OVER",
       label: "Übergeben Planung",
-      colorClass: "bg-indigo-100",
+      color: "#e0e7ff",
       icon: "DOCUMENT",
     },
-    { value: "DONE_FAQ", label: "Erledigt (FAQ)", colorClass: "bg-green-100", icon: "CHECKMARK" },
+    { value: "DONE_FAQ", label: "Erledigt (FAQ)", color: "#D1FAE5", icon: "CHECKMARK" },
     {
       value: "DONE_PLANING",
       label: "Erledigt (Planung)",
-      colorClass: "bg-green-100",
+      color: "#D1FAE5",
       icon: "CHECKMARK",
     },
   ],

diff --git a/src/survey-responses/components/feedback/EditableSurveyResponseForm.tsx b/src/survey-responses/components/feedback/EditableSurveyResponseForm.tsx
@@ -227,7 +227,8 @@ export function EditableSurveyResponseForm({
             >
               {statusOptions.map((item) => (
                 <LabeledInputRadioCheckbox
-                  classNameLabelSpan={item.colorClass + " px-2 py-1 rounded-full"}
+                  classNameLabelSpan={"px-2 py-1 rounded-full"}
+                  labelSpanStyle={{ backgroundColor: item.color }}
                   type="radio"
                   name="responseStatus"
                   key={item.value}

diff --git a/src/survey-responses/components/feedback/EditableSurveyResponseFormMap.tsx b/src/survey-responses/components/feedback/EditableSurveyResponseFormMap.tsx
@@ -1,5 +1,6 @@
 import { BackgroundSwitcher, LayerType } from "@/src/core/components/Map/BackgroundSwitcher"
 import SurveyStaticPin from "@/src/core/components/Map/SurveyStaticPin"
+import { AllowedSurveySlugs } from "@/src/survey-public/utils/allowedSurveySlugs"
 import "maplibre-gl/dist/maplibre-gl.css"
 import { useState } from "react"
 import Map, {
@@ -15,7 +16,7 @@ type Props = {
   marker: { lat: number; lng: number } | undefined
   maptilerUrl: string
   defaultViewState?: LngLatBoundsLike
-  surveySlug: string
+  surveySlug: AllowedSurveySlugs
 }
 
 export const EditableSurveyResponseFormMap: React.FC<Props> = ({
@@ -83,7 +84,7 @@ export const EditableSurveyResponseFormMap: React.FC<Props> = ({
             latitude={marker.lat}
             anchor="bottom"
           >
-            <SurveyStaticPin />
+            <SurveyStaticPin surveySlug={surveySlug} />
           </Marker>
         )}
         <BackgroundSwitcher

diff --git a/src/survey-responses/components/feedback/EditableSurveyResponseStatusLabel.tsx b/src/survey-responses/components/feedback/EditableSurveyResponseStatusLabel.tsx
@@ -21,10 +21,6 @@ export const EditableSurveyResponseStatusLabel = ({ status, surveySlug }: Props)
   }
 
   return (
-    <StatusLabel
-      icon={statusConfig.icon}
-      label={statusConfig.label}
-      colorClass={statusConfig.colorClass}
-    />
+    <StatusLabel icon={statusConfig.icon} label={statusConfig.label} color={statusConfig.color} />
   )
 }