Calendar Updates!

[DarksightKellar]

This PR implements a couple missing/buggy features on the original date picker implementation. There's no open issue for this.

• The "today" indicator was misaligned on mobile screen. The fix is a dirty hacky one. Added a todo comment to that effect -- would love a much cleaner approach, but CSS, man. CSS.

• The "header" area of the date picker has been added

• Date range picker + practically all UI design elements from figma! (not gonna call out the 2 or so TINY bits that I couldn't implement)

[netlify]

✅ Deploy Preview for decent-interface-dev ready!

Name	Link
🔨 Latest commit	51da3fd
🔍 Latest deploy log	https://app.netlify.com/sites/decent-interface-dev/deploys/669fde355c269a00081c16b5
😎 Deploy Preview	https://deploy-preview-2169.app.dev.decentdao.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for decent-interface-dev ready!

Name	Link
🔨 Latest commit	eefde66
🔍 Latest deploy log	https://app.netlify.com/sites/decent-interface-dev/deploys/66a77acf9bbcf30008d1012d
😎 Deploy Preview	https://deploy-preview-2169.app.dev.decentdao.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[xanaramoss]

Uau @DarksightKellar this looks so good!!!
From the @decentdao/design side, I think the only thing missing is the active state on the end date field (like google flights for example). That would look way more clear for the user. I can add that to the designs tomorrow.

On the mobile, the input fields are breaking in lines.

[xanaramoss]

@DarksightKellar is it possible to make the day item selector pink background a bit more square instead of rectangular?

[nicolaus-sherrill]

UI is looking sharp so far @DarksightKellar. Great work.
Couple of small things:

1. Square up the selected date. Currently rectangular.
2. On desktop, align the pop-out component with the left side of the date input fields.

Photo from handoff designs for reference:

[tomstuart123]

Thanks @DarksightKellar . I had some issues with the date picker when first opened but haven't been able to replicate it since then.

Won't approve yet as design had raises above but will approve once reverted :)

[DarksightKellar]

Uau @DarksightKellar this looks so good!!! From the @decentdao/design side, I think the only thing missing is the active state on the end date field (like google flights for example). That would look way more clear for the user. I can add that to the designs tomorrow.

On the mobile, the input fields are breaking in lines.

@xanaramoss The line breaking inputs were due to a sheer lack of horizontal space on smaller width screens. We've worked out a good middle ground (shoutout to @Da-Colon for working his grid magic):

Regarding "active state on the end date field", I'm not sure what the ask is there, and I don't yet see any design updates. Could you elaborate, please?

[DarksightKellar]

UI is looking sharp so far @DarksightKellar. Great work. Couple of small things:

1. Square up the selected date. Currently rectangular.
2. On desktop, align the pop-out component with the left side of the date input fields.

@nicolaus-sherrill Both points should be addressed now. Have another look when you get the chance =)

[adamgall]

@DarksightKellar Yesterday during a screenshare of this feature on standup (which I didn't call out in the moment), I saw that it was possible to set the End Date to a date before the Start Date, which I don't think should be possible. Can you confirm that I'm not just making this up?

edit: this was actually during a screenshare with Hats team

[tomstuart123]

@DarksightKellar Yesterday during a screenshare of this feature on standup (which I didn't call out in the moment), I saw that it was possible to set the End Date to a date before the Start Date, which I don't think should be possible. Can you confirm that I'm not just making this up?

@adamgall if I remember my test two days ago, it is possible to click the end date before the start date. However, all that will happen is the start date will revert to that click and you'll still be forced to re-click an end date. I didn't hate that UX so I didn't raise it.

I'll bring back up the netflify during standup to confirm

[adamgall]

@tomstuart123 has confirmed that i'm full of shit

[DarksightKellar]

@nicolaus-sherrill your re-review on this plz 🥹