Use calendly design and layout

[GretaD]

• Time zone and date picker don't have the same width
• Center avatar + name
• Avatar is way too big
• Show the date picker opened permanently instead of toggled from a dropdown?
• Scroll only the times and not the entire page (similar to calendly)
• Mention time zone
• [ ]

Changes to container

• Width is fixed at 900px (size of the large modal)
• margin-bottom: 50px so that the container is horizontally centered
• use 3 columns, each column is fixed equal width
• the entire modal does not scroll, only the time slot column
• Changes for first column
• avatar is 44*44px
• Changes for second column
• Change font size of "Select date" to normal size (only styling can be changed, semantically it can be h3)
• disable dates for which no slots are available
• Time zone picker is full width of the column
• Changes to third column
• Change font size of "Select slot" to normal size (only styling can be changed, semantically it can be h3)
• Time slots are full width of the column
• Time slots list is scrollable

[nimishavijay]

For reference it can look like this:

Changes to container

• Width is fixed at 900px (size of the large modal)
• margin-bottom: 50px so that the container is horizontally centered
• use 3 columns, each column is fixed equal width
• the entire modal does not scroll, only the time slot column

Changes for first column

• avatar is 44*44px
• nice to have: show duration in normal body text with an icon below title: 🕦 30 minutes

Changes for second column

• Change font size of "Select date" to normal size (only styling can be changed, semantically it can be h3)
• show calendar instead of date picker
• disable dates for which no slots are available
• Time zone picker is full width of the column

Changes to third column

• Change font size of "Select slot" to normal size (only styling can be changed, semantically it can be h3)
• Time slots are full width of the column
• Time slots list is scrollable

[jancborchardt]

Very nice! :) One thing regarding the third column: Currently the vertical gap seems rather large, it could be reduced a little bit and instead there can be a larger gap for every hour as a little divider. In many cases like here, there would then be slots of 4 grouped together to get a better feeling for the time rather than a long list.

[GretaD]

For reference it can look like this:

As i said on my pr, the full name of the month is not possible because the native datepicker has no option to stay always open, we have to use the normal datetimepicker for this case. See the screenshot on my pr how that can look otherwise. The rest of the points is already 90% done :) cc @nimishavijay @jancborchardt