From a5d2f2444ab734ddd9fb7da30270c0c8e3c45bd9 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Fri, 30 Sep 2022 16:41:12 +0200
Subject: [PATCH] Fixes 'How to use Additional Inputs as Variables' dialog in
 workflows (#4773)

* add i18n translations and fix dialog width and height

* fix typo

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
---
 apps/web/public/static/locales/en/common.json          |  7 ++++++-
 .../workflows/components/v2/WorkflowStepContainer.tsx  | 10 +++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index d232e871e6..919bb51d56 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1267,5 +1267,10 @@
   "seats": "seats",
   "every_app_published": "Every app published on the Cal.com App Store is open source and thoroughly tested via peer reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are published by Cal.com. If you encounter inappropriate content or behaviour please report it.",
   "report_app": "Report app",
-  "team_name_required": "Team name required"
+  "team_name_required": "Team name required",
+  "how_additional_inputs_as_variables": "How to use Additional Inputs as Variables",
+  "format": "Format",
+  "uppercase_for_letters": "Use uppercase for all letters",
+  "replace_whitespaces_underscores": "Replace whitespaces with underscores",
+  "ignore_special_characters": "Ignore special characters in your Additonal Input label. Use only letters and numbers"
 }
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 2f85d45b8c..2b133b6b2b 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -481,15 +481,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           </ConfirmationDialogContent>
         </Dialog>
         <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
-          <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[600px] md:h-[570px]">
-            <div className="-m-3 h-[440px] overflow-x-hidden overflow-y-scroll sm:m-0">
+          <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
+            <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="mt-7 rounded-md bg-gray-50 p-3 sm:p-5">
+              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
                 <p className="test-sm font-medium">{t("format")}</p>
                 <ul className="mt-2 ml-5 list-disc text-gray-900">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
-                  <li>{t("ingore_special_characters")}</li>
+                  <li>{t("ignore_special_characters")}</li>
                 </ul>
                 <div className="mt-6">
                   <p className="test-sm w-full font-medium">{t("example_1")}</p>
@@ -526,7 +526,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               </div>
             </div>
-            <div className="mt-3 -mb-7 flex flex-row-reverse gap-x-2">
+            <div className="flex flex-row-reverse">
               <DialogClose asChild>
                 <Button color="primary" type="button">
                   {t("close")}