Update materialUI-theme

[HaGuesto]

In the UX sketch below we sketched how lists, forms, interface elements, colours and fonts should be used. We should style as many components as possible according to this sketch to make it easier to quickly create new screens.

The blue color (#009BD9) and the font are part of the Boxise visual identity.

Tasks

• Modals should be the same throughout the app - full screen on mobile, on bigger screens it should be smaller, not filling the screen.
• Always a blue header for a normal screen and a grey header for a modal.

Interactive walkthrough of sketch is here

[etiennebaque]

@barto74 @HaGuesto I have a question about the AppBar: If we have access to an AppDrawer, what's the purpose of having a "vertical 3 dots" icon? A click on such an icon would open a menu, but wouldn't it be redundant since we already have the drawer?

[barto74]

The app drawer is invisible on a mobile screen. And the icon is used to open the drawer. Or are you referring to another one?
In general, i would always advice to start working on UX for mobile and expand to bigger screens from there. In this specific user case, most (or even almost all) of our daily users will use mobile phones for warehouse tasks.

[barto74]

Oh i think you are referring to the three dots on the right of the screen. That is often used in material to give access to a contextual menu offering filters or other actions to perform on the data displayed.
Forgive me the comments above - they are probably stating the obvious for you.

[etiennebaque]

Thanks for these details @barto74

[etiennebaque]

Hey @barto74, which library is used for the icons in the product filter? For these buttons with icons, I think I should use the ProductButton component. Looks like it's using "fa" classes: was FontAwesome supposed to be used here? I can't find it in package.json and looks like Material-UI does not have all the icons used in this sketch file.

I can add and use FontAwesome, but I wanted to double-check with you that it was the intended library to go with.

[barto74]

Hi @etiennebaque we had the Fontawesome icons in mind in an earlier state. It is quite a big library though. And we need custom icons for the categories in the future (see #54 for example). So maybe we should for now make some placeholders until those icons have been designed.

[etiennebaque]

Makes sense @barto74. I'll try to add placeholders.