From 9930f9af038d64a726cddfecefc5d9414f48616a Mon Sep 17 00:00:00 2001
From: Jakob Schott <jakob@formbricks.com>
Date: Wed, 21 May 2025 15:25:18 +0200
Subject: [PATCH] restructured image in pictureselection, to make image
 download link visible. changed icon

---
 .../questions/picture-selection-question.tsx  | 147 ++++++++----------
 1 file changed, 67 insertions(+), 80 deletions(-)

diff --git a/packages/surveys/src/components/questions/picture-selection-question.tsx b/packages/surveys/src/components/questions/picture-selection-question.tsx
index e6c5f62777..270c18cb60 100644
--- a/packages/surveys/src/components/questions/picture-selection-question.tsx
+++ b/packages/surveys/src/components/questions/picture-selection-question.tsx
@@ -8,6 +8,7 @@ import { getLocalizedValue } from "@/lib/i18n";
 import { getOriginalFileNameFromUrl } from "@/lib/storage";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 import { cn } from "@/lib/utils";
+import { ImageDownIcon } from "lucide-react";
 import { useEffect, useState } from "preact/hooks";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyPictureSelectionQuestion, TSurveyQuestionId } from "@formbricks/types/surveys/types";
@@ -124,42 +125,70 @@ export function PictureSelectionQuestion({
               <legend className="fb-sr-only">Options</legend>
               <div className="fb-bg-survey-bg fb-relative fb-grid fb-grid-cols-1 sm:fb-grid-cols-2 fb-gap-4">
                 {questionChoices.map((choice) => (
-                  <button
-                    key={choice.id}
-                    type="button"
-                    tabIndex={isCurrent ? 0 : -1}
-                    onKeyDown={(e) => {
-                      // Accessibility: if spacebar was pressed pass this down to the input
-                      if (e.key === " ") {
-                        e.preventDefault();
-                        document.getElementById(choice.id)?.click();
-                        document.getElementById(choice.id)?.focus();
-                      }
-                    }}
-                    onClick={() => {
-                      handleChange(choice.id);
-                    }}
-                    className={cn(
-                      "fb-relative fb-w-full fb-cursor-pointer fb-overflow-hidden fb-border fb-rounded-custom focus-visible:fb-outline-none focus-visible:fb-ring-2 focus-visible:fb-ring-brand focus-visible:fb-ring-offset-2 fb-aspect-[4/3] fb-min-h-[7rem] fb-max-h-[50vh] group/image",
-                      Array.isArray(value) && value.includes(choice.id)
-                        ? "fb-border-brand fb-text-brand fb-z-10 fb-border-4 fb-shadow-sm"
-                        : ""
-                    )}>
-                    {loadingImages[choice.id] && (
-                      <div className="fb-absolute fb-inset-0 fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
-                    )}
-                    <img
-                      src={choice.imageUrl}
-                      id={choice.id}
-                      alt={getOriginalFileNameFromUrl(choice.imageUrl)}
-                      className={cn(
-                        "fb-h-full fb-w-full fb-object-cover",
-                        loadingImages[choice.id] ? "fb-opacity-0" : ""
-                      )}
-                      onLoad={() => {
-                        setLoadingImages((prev) => ({ ...prev, [choice.id]: false }));
+                  <div className="fb-relative" key={choice.id}>
+                    <button
+                      type="button"
+                      tabIndex={isCurrent ? 0 : -1}
+                      onKeyDown={(e) => {
+                        // Accessibility: if spacebar was pressed pass this down to the input
+                        if (e.key === " ") {
+                          e.preventDefault();
+                          document.getElementById(choice.id)?.click();
+                          document.getElementById(choice.id)?.focus();
+                        }
                       }}
-                    />
+                      onClick={() => {
+                        handleChange(choice.id);
+                      }}
+                      className={cn(
+                        "fb-relative fb-w-full fb-cursor-pointer fb-overflow-hidden fb-border fb-rounded-custom focus-visible:fb-outline-none focus-visible:fb-ring-2 focus-visible:fb-ring-brand focus-visible:fb-ring-offset-2 fb-aspect-[4/3] fb-min-h-[7rem] fb-max-h-[50vh] group/image",
+                        Array.isArray(value) && value.includes(choice.id)
+                          ? "fb-border-brand fb-text-brand fb-z-10 fb-border-4 fb-shadow-sm"
+                          : ""
+                      )}>
+                      {loadingImages[choice.id] && (
+                        <div className="fb-absolute fb-inset-0 fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
+                      )}
+                      <img
+                        src={choice.imageUrl}
+                        id={choice.id}
+                        alt={getOriginalFileNameFromUrl(choice.imageUrl)}
+                        className={cn(
+                          "fb-h-full fb-w-full fb-object-cover",
+                          loadingImages[choice.id] ? "fb-opacity-0" : ""
+                        )}
+                        onLoad={() => {
+                          setLoadingImages((prev) => ({ ...prev, [choice.id]: false }));
+                        }}
+                      />
+                      {question.allowMulti ? (
+                        <input
+                          id={`${choice.id}-checked`}
+                          name={`${choice.id}-checkbox`}
+                          type="checkbox"
+                          tabIndex={-1}
+                          checked={value.includes(choice.id)}
+                          className={cn(
+                            "fb-border-border fb-rounded-custom fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-border",
+                            value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
+                          )}
+                          required={question.required && value.length ? false : question.required}
+                        />
+                      ) : (
+                        <input
+                          id={`${choice.id}-radio`}
+                          name={`${choice.id}-radio`}
+                          type="radio"
+                          tabIndex={-1}
+                          checked={value.includes(choice.id)}
+                          className={cn(
+                            "fb-border-border fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-rounded-full fb-border",
+                            value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
+                          )}
+                          required={question.required && value.length ? false : question.required}
+                        />
+                      )}
+                    </button>
                     <a
                       tabIndex={-1}
                       href={choice.imageUrl}
@@ -169,52 +198,10 @@ export function PictureSelectionQuestion({
                       onClick={(e) => {
                         e.stopPropagation();
                       }}
-                      className="fb-absolute fb-bottom-2 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-opacity-0 fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        className="lucide lucide-expand">
-                        <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
-                        <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
-                        <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
-                        <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
-                      </svg>
+                      className="fb-absolute fb-bottom-4 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100 fb-z-20">
+                      <ImageDownIcon className="fb-h-4 fb-w-4" strokeWidth="1" />
                     </a>
-                    {question.allowMulti ? (
-                      <input
-                        id={`${choice.id}-checked`}
-                        name={`${choice.id}-checkbox`}
-                        type="checkbox"
-                        tabIndex={-1}
-                        checked={value.includes(choice.id)}
-                        className={cn(
-                          "fb-border-border fb-rounded-custom fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-border",
-                          value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
-                        )}
-                        required={question.required && value.length ? false : question.required}
-                      />
-                    ) : (
-                      <input
-                        id={`${choice.id}-radio`}
-                        name={`${choice.id}-radio`}
-                        type="radio"
-                        tabIndex={-1}
-                        checked={value.includes(choice.id)}
-                        className={cn(
-                          "fb-border-border fb-pointer-events-none fb-absolute fb-right-2 fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-rounded-full fb-border",
-                          value.includes(choice.id) ? "fb-border-brand fb-text-brand" : ""
-                        )}
-                        required={question.required && value.length ? false : question.required}
-                      />
-                    )}
-                  </button>
+                  </div>
                 ))}
               </div>
             </fieldset>