fix order dropdown, other field and UX tweaks

2026-02-12 01:29:42 -06:00 · 2023-07-16 15:51:46 +02:00
parent b673044890
commit 30623d5fd2
6 changed files with 44 additions and 42 deletions
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx
@@ -36,17 +36,17 @@ export default function MultipleChoiceMultiForm({
  const shuffleOptionsTypes = {
    none: {
      id: "none",
-      label: "None (Keep choices in current order)",
+      label: "Keep current order",
      show: true,
    },
    all: {
      id: "all",
-      label: "All (Randomize all choices)",
+      label: "Randomize all",
      show: question.choices.filter((c) => c.id === "other").length === 0,
    },
    exceptLast: {
      id: "exceptLast",
-      label: "Except Last (Keep last choice and randomize other choices)",
+      label: "Randomize all except last option",
      show: true,
    },
  };
@@ -191,12 +191,14 @@ export default function MultipleChoiceMultiForm({
                    onClick={() => deleteChoice(choiceIdx)}
                  />
                )}
-                {choice.id !== "other" && (
-                  <PlusIcon
-                    className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-                    onClick={() => addChoice(choiceIdx)}
-                  />
-                )}
+                <div className="ml-2 h-4 w-4">
+                  {choice.id !== "other" && (
+                    <PlusIcon
+                      className="h-full w-full cursor-pointer text-slate-400 hover:text-slate-500"
+                      onClick={() => addChoice(choiceIdx)}
+                    />
+                  )}
+                </div>
              </div>
            ))}
          <div className="flex items-center justify-between space-x-2">
@@ -207,15 +209,13 @@ export default function MultipleChoiceMultiForm({
            )}

            <div className="flex flex-1 items-center justify-end gap-2">
-              <p className="text-sm text-slate-700">Ordering</p>
-
              <Select
                defaultValue={question.shuffleOption}
                value={question.shuffleOption}
                onValueChange={(e) => {
                  updateQuestion(questionIdx, { shuffleOption: e });
                }}>
-                <SelectTrigger className="w-fit overflow-hidden ">
+                <SelectTrigger className="w-fit space-x-2 overflow-hidden border-0 font-semibold text-slate-600">
                  <SelectValue placeholder="Select ordering" />
                </SelectTrigger>
                <SelectContent>
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx
@@ -36,17 +36,17 @@ export default function MultipleChoiceSingleForm({
  const shuffleOptionsTypes = {
    none: {
      id: "none",
-      label: "None (Keep choices in current order)",
+      label: "Keep current order",
      show: true,
    },
    all: {
      id: "all",
-      label: "All (Randomize all choices)",
+      label: "Randomize all",
      show: question.choices.filter((c) => c.id === "other").length === 0,
    },
    exceptLast: {
      id: "exceptLast",
-      label: "Except Last (Keep last choice and randomize other choices)",
+      label: "Randomize all except last option",
      show: true,
    },
  };
@@ -191,12 +191,14 @@ export default function MultipleChoiceSingleForm({
                    onClick={() => deleteChoice(choiceIdx)}
                  />
                )}
-                {choice.id !== "other" && (
-                  <PlusIcon
-                    className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-                    onClick={() => addChoice(choiceIdx)}
-                  />
-                )}
+                <div className="ml-2 h-4 w-4">
+                  {choice.id !== "other" && (
+                    <PlusIcon
+                      className="h-full w-full cursor-pointer text-slate-400 hover:text-slate-500"
+                      onClick={() => addChoice(choiceIdx)}
+                    />
+                  )}
+                </div>
              </div>
            ))}
          <div className="flex items-center justify-between space-x-2">
@@ -207,15 +209,13 @@ export default function MultipleChoiceSingleForm({
            )}

            <div className="flex flex-1 items-center justify-end gap-2">
-              <p className="text-sm text-slate-700">Ordering</p>
-
              <Select
                defaultValue={question.shuffleOption}
                value={question.shuffleOption}
                onValueChange={(e) => {
                  updateQuestion(questionIdx, { shuffleOption: e });
                }}>
-                <SelectTrigger className="w-fit overflow-hidden ">
+                <SelectTrigger className="w-fit space-x-2 overflow-hidden border-0 font-semibold text-slate-600">
                  <SelectValue placeholder="Select ordering" />
                </SelectTrigger>
                <SelectContent>
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/RecontactOptionsCard.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/RecontactOptionsCard.tsx
@@ -106,7 +106,7 @@ export default function RecontactOptionsCard({
          </div>
          {localSurvey.type === "link" && (
            <div className="flex w-full items-center justify-end pr-2">
-              <Badge size="normal" text="In-app survey settings" type="warning" />
+              <Badge size="normal" text="In-app survey settings" type="gray" />
            </div>
          )}
        </div>
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
@@ -149,7 +149,7 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
            </div>
            {localSurvey.type === "link" && (
              <div className="flex w-full items-center justify-end pr-2">
-                <Badge size="normal" text="In-app survey settings" type="warning" />
+                <Badge size="normal" text="In-app survey settings" type="gray" />
              </div>
            )}
          </div>
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx
@@ -113,7 +113,7 @@ export default function WhoToSendCard({ environmentId, localSurvey, setLocalSurv
            </div>
            {localSurvey.type === "link" && (
              <div className="flex w-full items-center justify-end pr-2">
-                <Badge size="normal" text="In-app survey settings" type="warning" />
+                <Badge size="normal" text="In-app survey settings" type="gray" />
              </div>
            )}
          </div>
--- a/apps/web/components/preview/MultipleChoiceSingleQuestion.tsx
+++ b/apps/web/components/preview/MultipleChoiceSingleQuestion.tsx
@@ -71,21 +71,23 @@ export default function MultipleChoiceSingleQuestion({
                  selectedChoice === choice.label ? "z-10 border-slate-400 bg-slate-50" : "border-gray-200",
                  "relative mb-2 flex cursor-pointer flex-col rounded-md border p-4 hover:bg-slate-50 focus:outline-none"
                )}>
-                <span className="flex items-center text-sm">
-                  <input
-                    type="radio"
-                    id={choice.id}
-                    name={question.id}
-                    value={choice.label}
-                    className="h-4 w-4 border border-gray-300 focus:ring-0 focus:ring-offset-0"
-                    aria-labelledby={`${choice.id}-label`}
-                    onChange={() => setSelectedChoice(choice.id)}
-                    checked={selectedChoice === choice.id}
-                    style={{ borderColor: brandColor, color: brandColor }}
-                    required={question.required && idx === 0}
-                  />
-                  <span id={`${choice.id}-label`} className="ml-3 font-medium">
-                    {choice.label}
+                <span className="flex flex-col text-sm">
+                  <span className="flex items-center">
+                    <input
+                      type="radio"
+                      id={choice.id}
+                      name={question.id}
+                      value={choice.label}
+                      className="h-4 w-4 border border-gray-300 focus:ring-0 focus:ring-offset-0"
+                      aria-labelledby={`${choice.id}-label`}
+                      onChange={() => setSelectedChoice(choice.id)}
+                      checked={selectedChoice === choice.id}
+                      style={{ borderColor: brandColor, color: brandColor }}
+                      required={question.required && idx === 0}
+                    />
+                    <span id={`${choice.id}-label`} className="ml-3 font-medium">
+                      {choice.label}
+                    </span>
                  </span>
                  {choice.id === "other" && selectedChoice === "other" && (
                    <Input