In Workflows page dropdown icon is not properly visible in the time unit input and request for addition of up and down icons

[Sahillather002]

Issue Summary

In Workflows page up cursor hiding in the time unit input.

Steps to Reproduce

1.Try to create a workflow
2. Try selecting the trigger with before or after events
3. How long before or after events time input pops up
4. The dropdown icon is not visible properly

[dosubot]

Hey @Sahillather002! I'm here to help you out with any issues or questions you have. Let's work together to solve this bug.

To improve the visibility of the dropdown icon in the time unit input and add up and down icons for better usability on the Workflows page, you can modify the TimeTimeUnitInput component as follows:

1. Increase the size of the dropdown icon.
2. Add up and down icons for better usability.

Here is the updated code:

import { useState } from "react";
import type { UseFormReturn } from "react-hook-form";

import { useLocale } from "@calcom/lib/hooks/useLocale";
import {
  Dropdown,
  DropdownItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  Icon,
  TextField,
} from "@calcom/ui";

import { getWorkflowTimeUnitOptions } from "../lib/getOptions";
import type { FormValues } from "../pages/workflow";

type Props = {
  form: UseFormReturn<FormValues>;
  disabled: boolean;
};

export const TimeTimeUnitInput = (props: Props) => {
  const { form } = props;
  const { t } = useLocale();
  const timeUnitOptions = getWorkflowTimeUnitOptions(t);

  const [timeUnit, setTimeUnit] = useState(form.getValues("timeUnit"));
  return (
    <div className="flex">
      <div className="grow">
        <TextField
          type="number"
          min="1"
          label=""
          disabled={props.disabled}
          defaultValue={form.getValues("time") || 24}
          className="-mt-2 rounded-r-none text-sm focus:ring-0"
          {...form.register("time", { valueAsNumber: true })}
          addOnSuffix={
            <Dropdown>
              <DropdownMenuTrigger asChild>
                <button className="flex items-center">
                  <div className="mr-1 w-3/4">
                    {timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
                  </div>
                  <div className="w-1/4 pt-1 flex items-center">
                    <Icon name="chevron-up" className="text-lg" />
                    <Icon name="chevron-down" className="text-lg" />
                  </div>
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                {timeUnitOptions.map((option, index) => (
                  <DropdownMenuItem key={index} className="outline-none">
                    <DropdownItem
                      key={index}
                      type="button"
                      onClick={() => {
                        setTimeUnit(option.value);
                        form.setValue("timeUnit", option.value);
                      }}>
                      {option.label}
                    </DropdownItem>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </Dropdown>
          }
        />
      </div>
    </div>
  );
};

In this updated code:

• The Icon components for the up and down arrows are added inside the button to improve usability.
• The className="text-lg" is used to increase the size of the icons for better visibility ^[1].

To continue talking to Dosu, mention @dosu.