Fixing design issues /workflows {empty state} (#4446)

* fixes design issues in empty screen for worklfows

* fix font weight and add new text for examples

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
This commit is contained in:
Carina Wollendorfer 2022-09-13 14:57:23 -04:00 committed by GitHub
parent 735254d48e
commit b22786d7df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 13 deletions

View File

@ -1181,12 +1181,12 @@
"team_members": "Team members",
"more": "More",
"more_page_footer": "We view the mobile application as an extension of the web application. If you are performing any complication actions, please refer back to the web application.",
"workflow_example_1": "Send email reminder 24 hours before event starts to host",
"workflow_example_2": "Send SMS reminder 1 hour before event starts to host",
"workflow_example_3": "Send custom email when event is cancelled to host",
"workflow_example_4": "Send email reminder 24 hours before event starts to attendee",
"workflow_example_5": "Send SMS reminder 1 hour before event starts to attendee",
"workflow_example_6": "Send custom SMS when event is rescheduled to attendee",
"workflow_example_1": "Send SMS reminder 24 hours before event starts to attendee",
"workflow_example_2": "Send custom SMS when event is rescheduled to attendee",
"workflow_example_3": "Send custom email when new event is booked to host",
"workflow_example_4": "Send email reminder 1 hour before events starts to attendee",
"workflow_example_5": "Send custom email when event is rescheduled to host",
"workflow_example_6": "Send custom SMS when new event is booked to host",
"welcome_to_cal_header": "Welcome to Cal.com!",
"edit_form_later_subtitle": "Youll be able to edit this later.",
"connect_calendar_later": "I'll connect my calendar later",

View File

@ -15,15 +15,17 @@ function WorkflowExample(props: WorkflowExampleType) {
const { Icon, text } = props;
return (
<div className="mx-3 my-3 max-h-24 max-w-[600px] rounded-md border border-solid p-6">
<div className="mx-2 my-2 max-h-24 max-w-[600px] rounded-md border border-solid p-6">
<div className="flex ">
<div className="flex w-24 items-center justify-center rounded-sm">
<div className="flex items-center justify-center">
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-white">
<Icon className="h-6 w-6 stroke-[1.5px]" />
<Icon className="h-6 w-6 stroke-[2px] text-gray-700" />
</div>
</div>
<div className="flex w-full items-center justify-center ">
<div className="line-clamp-2 w-full text-sm leading-none">{text}</div>
<div className="m-auto w-full flex-grow items-center justify-center ">
<div className="line-clamp-2 text-semibold w-full text-sm font-medium leading-none text-gray-900">
{text}
</div>
</div>
</div>
</div>
@ -50,13 +52,14 @@ export default function EmptyScreen({
const { t } = useLocale();
const workflowsExamples = [
{ icon: Icon.FiMail, text: t("workflow_example_1") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_1") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_2") },
{ icon: Icon.FiMail, text: t("workflow_example_3") },
{ icon: Icon.FiMail, text: t("workflow_example_4") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_5") },
{ icon: Icon.FiMail, text: t("workflow_example_5") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_6") },
];
// new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (FiSmile icon),
return (
<>