minor changes to routing forms (#4333)

* added new combined buttons on all pages

* fixed required label in routing forms

* i18n for routing forms, minor changes to mobile routing forms action items

* full width for routing forms descriptin on mobile

* i18n fixes

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

apps/web/public/static/locales/en/common.json

@@ -1182,5 +1182,8 @@
   "set_my_availability_later": "I'll set my availability later",
   "problem_saving_user_profile": "There was a problem saving your data. Please try again or reach out to customer support.",
   "token_invalid_expired": "Token is either invalid or expired.",
-  "routing_forms_description": "You can see all forms and routes you have created here."
+  "routing_forms_description": "You can see all forms and routes you have created here.",
+  "add_new_form": "Add new form",
+  "form_description": "Create your form to route a booker",
+  "copy_link_to_form": "Copy link to form"
 }

packages/app-store/ee/routing_forms/components/FormActions.tsx

@@ -82,10 +82,10 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
       <DialogContent className="overflow-y-auto">
         <div className="mb-4">
           <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-            Add New Form
+            {t("add_new_form")}
           </h3>
           <div>
-            <p className="text-sm text-gray-500">Create your form to route a booker</p>
+            <p className="text-sm text-gray-500">{t("forms_description")}</p>
           </div>
         </div>
         <Form
@@ -136,8 +136,8 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
           <Button
             type="button"
             size="icon"
-            color="secondary"
             combined
+            color="secondary"
             className={classNames(disabled && " opacity-30")}
             StartIcon={Icon.FiMoreHorizontal}
           />
@@ -345,7 +345,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
           return <></>;
         }
         return (
-          <div {...restProps} className="mx-2 self-center rounded-md p-2 hover:bg-gray-200">
+          <div {...restProps} className="self-center rounded-md p-2 hover:bg-gray-200">
             <Switch
               checked={!routingForm.disabled}
               label={label}

packages/app-store/ee/routing_forms/components/SingleForm.tsx

@@ -43,15 +43,8 @@ const Actions = ({
   const { t } = useLocale();
   return (
     <div className="flex items-center">
-      <div className="hidden md:inline-flex md:items-center ">
-        <FormAction
-          className="self-center pr-2 "
-          data-testid="toggle-form"
-          action="toggle"
-          routingForm={form}
-        />
+      <FormAction className="self-center" data-testid="toggle-form" action="toggle" routingForm={form} />
       <VerticalDivider />
-      </div>
       <ButtonGroup combined containerProps={{ className: "hidden md:inline-flex items-center" }}>
         <Tooltip content={t("preview")}>
           <FormAction
@@ -114,7 +107,7 @@ const Actions = ({
             rel="noreferrer"
             action="preview"
             StartIcon={Icon.FiExternalLink}>
-            Preview
+            {t("preview")}
           </FormAction>
           <FormAction
             action="copyLink"
@@ -132,16 +125,7 @@ const Actions = ({
             color="minimal"
             type="button"
             StartIcon={Icon.FiDownload}>
-            Download Responses
-          </FormAction>
-          <FormAction
-            action="download"
-            routingForm={form}
-            className="w-full"
-            color="minimal"
-            type="button"
-            StartIcon={Icon.FiDownload}>
-            Download Responses
+            {t("download_responses")}
           </FormAction>
           <FormAction
             action="embed"
@@ -161,17 +145,6 @@ const Actions = ({
             StartIcon={Icon.FiTrash}>
             {t("delete")}
           </FormAction>
-          <DropdownMenuSeparator className="h-px bg-gray-200" />
-          <div className="inline-flex items-center">
-            <Button color="minimal">
-              <FormAction
-                className="self-center"
-                action="toggle"
-                label={form.disabled ? "Enable Form" : "Disable Form"}
-                routingForm={form}
-              />
-            </Button>
-          </div>
         </FormActionsDropdown>
       </div>
       <VerticalDivider />
@@ -232,7 +205,7 @@ export default function SingleForm({
           CTA={<Actions form={form} mutation={mutation} />}>
           <div className="-mx-4 px-4 sm:px-6 md:-mx-8 md:px-8">
             <div className="flex flex-col items-center md:flex-row md:items-start">
-              <div className="min-w-72 max-w-72 mb-6 md:mr-6">
+              <div className="lg:min-w-72 lg:max-w-72 mb-6 md:mr-6">
                 <TextField
                   type="text"
                   containerClassName="mb-6"

packages/app-store/ee/routing_forms/pages/forms/[...appPages].tsx

@@ -82,7 +82,7 @@ export default function RoutingForms({
                                 size="icon"
                                 StartIcon={Icon.FiLink}
                                 disabled={disabled}
-                                tooltip={t("copy_link")}
+                                tooltip={t("copy_link_to_form")}
                               />
                               <FormActionsDropdown form={form}>
                                 <FormAction