HAAS: UI Dashboard Touches

[JMitnik]

UI Touchups

---

General

• [x] Theme doesn't stay persistent when going back / sometimes, when pressing the "pencil" from the customeroverview, the theme doesnt get set and shows the original green default (from starbucks). [Daan?]
• [ ] DashboardViewContainer frequently overflows its boundaries: need to ensure the background color fills this entire element constantly [Jonathan] -> Partially fixed by removing width=100vh
• [x] Add a nice instruction for each input type [Daan/Jonathan]
• [x] For each wrong input type, add a red vibe around it (with a color style like for example dribble's search, but then red) [Daan]
• [x] Things that are deleted, give it an 'Are you sure' Dialogue (either inline, or a modal) [Jonathan]

Overviews

• [x] Flickering screens in the overviews (?)

• [ ] Add a loader in the overviews when fetching [Jonathan]

• [ ] In general, the Add X buttons would look nicer on top of the table (rather than inline) [Jonathan]

• [ ] Hovering over a row should highlight it, make it brighter, maybe scale it a bit. [Jonathan]

• [x] Refetching data maybe put a spinner, and have some placeholder for the rows instead of just removing them [Daan

• [ ] When searching, add spinner

• [x] Pagination Controls below table maybe at the bottom, look more modern [Daan], ala https://cdn.dribbble.com/users/452995/screenshots/11835643/media/a7aadf84a8aa741c45cf778011b9d0f5.png

• [x] Follow design from Figma

• [x] For all overviews, we should make a view in case no items are currently available in the filter [Daan, have a look at https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/]

View -Dialouge Add / Edit

• [ ] Show / format server error on top

View - Customer Add / Edit

• [ ] Show / format server error on top
• [ ] Cloudinary updates
• [ ] Cloudinary preview padded (look a bit nicer) [Jonathan]
• [x] Remove other logo [Daan]
• [x] Checkbox could be nicer [Jonathan; use Chakra UI for now]
• [x] Add icons to the form inputs [Jonathan]

View - CustomerOverview

• [x] Background color does not stretch to complete view. [Jonathan]
• [x] Icons for contextual actions hide in Contextbutton [Jonathan]

View - Dashboardview

For all of the modules, we need to deal with empty state (no interactions). [Daan]

• [x] In case of no Top Paths, show a dialogue / card / background icon with no top paths. [Daan]
• [x] In case of no history, make a moduleCard for "No history data" or something [Daan]

Component - AddCard

• [x] Make an AddCard component for DialogueOverview based on figma card [Daan]
• [x] Make an AddCard component for CustomerOverview based on figma card [Daan]

Component - Button

• [ ] Button component is imbalanced across the application, colors don't match well. We should use the client's maybe? [Jonathan]
• [x] Contextbuttons like Delete require an Are you sure Modal [Jonathan]

Component - DatePicker

• [x] Datepicker look a bit more modern, no white backgrounds in colored backgrounds [Daan/Jonathan]

Component - OnCompleted Toasts

• [x] Show toasts on completed (to inform a user).

Bonuses

• [ ] Nicer transitions between pages (framer motion mount/unmount) [Jonathan]

[Cold-A-Muse]

@JMitnik Ik ben klaar met mijn tasks. Je kan de code vinden in PR #189. Ik laat het hier bij totdat het verder duidelijk is in welke vorm we door gaan.