fix: Update forms UI

[gitstart-calcom]

trafficstars

Fixes #7463

Demo

https://www.loom.com/share/e38c151d6493467781bc2fa344344458

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 2, 2023 4:50am
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 2, 2023 4:50am

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
api	⬜️ Ignored (Inspect)	Visit Preview		Jun 2, 2023 4:50am
ui	⬜️ Ignored (Inspect)	Visit Preview		Jun 2, 2023 4:50am

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Ten Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/[user]/book	255.59 KB	406.87 KB	116.25% (🟡 +0.17%)
/auth/setup	174.39 KB	325.67 KB	93.05% (🟢 -0.15%)
/d/[link]/book	255.23 KB	406.52 KB	116.15% (🟡 +0.17%)
/event-types/[type]	479.13 KB	630.41 KB	180.12% (🟢 -0.15%)
/getting-started/[[...step]]	427.1 KB	578.38 KB	165.25% (🟡 +0.24%)
/new-booker/[user]/[type]	290.84 KB	442.12 KB	126.32% (🟡 +0.17%)
/new-booker/d/[link]/[slug]	290.84 KB	442.12 KB	126.32% (🟡 +0.17%)
/new-booker/team/[slug]/[type]	290.84 KB	442.12 KB	126.32% (🟡 +0.17%)
/settings/my-account/calendars	253.42 KB	404.7 KB	115.63% (🟡 +0.24%)
/team/[slug]/book	255.24 KB	406.52 KB	116.15% (🟡 +0.17%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[deploysentinel[bot]]

Current Playwright Test Results Summary

✅ 106 Passing - ⚠️ 1 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 06/02/2023 04:53:29am UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 3962a6c04b92c120d316fa61312152992e72b187

Started: 06/02/2023 04:52:01am UTC

⚠️ Flakes

📄   packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should be able to reschedule Retry 1 • Initial Attempt	3.87% (7) 7 / 181 runs failed over last 7 days	87.85% (159) 159 / 181 runs flaked over last 7 days

---

View Detailed Build Results

---

[gitstart-calcom]

Hi @Jaibles, the tests are partially failing because we have removed the "Test Preview" button according to the new design. Should we remove it from the tests too or should we add the button back? cc: @hariombalhara I have shared the screenshots of the current and new designs below:

Current design

New Design

Figma Link: https://www.figma.com/file/xk4HOxtSI82J0F7enMxeak/Cal---Live?node-id=26%3A101811&t=H8vJq20EFrvW7I1g-4

[hariombalhara]

'Send Email' and 'Test Previee' both are required. They are just missing in the new design

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Four Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/[user]/book	183.63 KB	416.5 KB	119.00% (🟡 +0.15%)
/auth/setup	80.29 KB	313.16 KB	89.47% (🟢 -0.16%)
/d/[link]/book	183.27 KB	416.14 KB	118.90% (🟡 +0.14%)
/team/[slug]/book	183.28 KB	416.15 KB	118.90% (🟡 +0.15%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/apps/[slug]/[...pages]	388.29 KB	621.18 KB	177.48% (🟡 +0.14%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[hariombalhara]

@gitstart-calcom Can you please resolve the conflicts and let me know if it's ready to review again ?

[gitstart-calcom]

@gitstart-calcom Can you please resolve the conflicts and let me know if it's ready to review again ?

@hariombalhara Conflicts have been resolved, and the PR is now ready for review :+1:

[hariombalhara]

Navigation doesn't match figma. Padding and selected item background are off

[hariombalhara]

No border for Routing tab.

[hariombalhara]

This is how the zero state looks. Is the background colour correct? I think it should be bg-default only like for Routing and Form tab.

[hariombalhara]

Similarly for Reporting Tab, the reporting table should probably and filters should be in white background

[hariombalhara]

Let's stick to one term, either options or attributes. I vote for options

[gitstart-calcom]

Navigation doesn't match figma. Padding and selected item background are off

Hi @hariombalhara, we are following this design

[gitstart-calcom]

This is how the zero state looks. Is the background colour correct? I think it should be bg-default only like for Routing and Form tab.

@hariombalhara We don't have a reference for the zero-state design. Can you please provide a Figma link to the required design so that we can make the changes accordingly?

Same for the Routing tab and Reporting tab. We are only updating Forms UI in this PR.

[gitstart-calcom]

Hi @hariombalhara! PR has been updated, please review 🙏