Feat/date picker

[krissolui]

Description

• [x] Installed react-datepicker as dependency and @types/react-datepicker as devDependency.
• [x] Added date picker with customized display.
• [x] Modified match-tiles to be filter by start date in local timezone.

⚠️ Added League placeholder for league name and logo.

[krissolui]

Update

• [x] Hardcoded league name and logo url in constants.ts.
• [x] Replaced League placeholder by league name and logo.

[louvrecly]

I have just rebased this branch from the latest main branch so that there won't be any conflict.

[wkip1220withweb]

https://www.figma.com/file/1FyQ6nWP8v4wJRaiLND7i0/betbetter-wireframe?type=design&node-id=117%3A10&mode=design&t=XSMrdCzdY8OFNvaJ-1

Is it too complicated to refine the hi-fi prototype layout like the screenshot shown? If so, keep it remain unchanged is okay.

[krissolui]

The UI looks good! However, there are multiple console errors observed.

I guess there are some problems passing ref as a prop to the components.

Looking into that.

[krissolui]

https://www.figma.com/file/1FyQ6nWP8v4wJRaiLND7i0/betbetter-wireframe?type=design&node-id=117%3A10&mode=design&t=XSMrdCzdY8OFNvaJ-1

Is it too complicated to refine the hi-fi prototype layout like the screenshot shown? If so, keep it remain unchanged is okay.

I will update the logo styling. For the other components, I remember that draw should in between home and away. Also where should the team name be?

[louvrecly]

https://www.figma.com/file/1FyQ6nWP8v4wJRaiLND7i0/betbetter-wireframe?type=design&node-id=117%3A10&mode=design&t=XSMrdCzdY8OFNvaJ-1 Is it too complicated to refine the hi-fi prototype layout like the screenshot shown? If so, keep it remain unchanged is okay.

I will update the logo styling. For the other components, I remember that draw should in between home and away. Also where should the team name be?

@wkip1220withweb I got the same question too. Where should we put the team name in this UI?

Just to confirm, we will not be showing start date as it is already being displayed on the date picker right? How about the start time? Do we leave it out as well?

It would also be helpful if you could create a UI for the mobile view to indicate if the size and spacing as well (or any device-specific UI) as we anticipate our users will be most likely browsing the web app on their mobile devices.

@krissolui As we are using the filter by date picker by default, you can safely remove the <SearchBar /> from the <Dashboard /> component.

Btw don't worry much about the styling in this PR if that's too complicated. We can finish them in another PR once we have finalized the UI.

[wkip1220withweb]

The team name is just the same as before

[krissolui]

https://www.figma.com/file/1FyQ6nWP8v4wJRaiLND7i0/betbetter-wireframe?type=design&node-id=117%3A10&mode=design&t=XSMrdCzdY8OFNvaJ-1 Is it too complicated to refine the hi-fi prototype layout like the screenshot shown? If so, keep it remain unchanged is okay.

I will update the logo styling. For the other components, I remember that draw should in between home and away. Also where should the team name be?

@wkip1220withweb I got the same question too. Where should we put the team name in this UI?

Just to confirm, we will not be showing start date as it is already being displayed on the date picker right? How about the start time? Do we leave it out as well?

It would also be helpful if you could create a UI for the mobile view to indicate if the size and spacing as well (or any device-specific UI) as we anticipate our users will be most likely browsing the web app on their mobile devices.

@krissolui As we are using the filter by date picker by default, you can safely remove the <SearchBar /> from the <Dashboard /> component.

Btw don't worry much about the styling in this PR if that's too complicated. We can finish them in another PR once we have finalized the UI.

Removed the search bar from page. The component is still there. I commented out the functions used for search bar. We can clean that up in another PR.