Create a css/html template using AngularDart angular_components (material design)

This assignment concerns the partner portal (now in prototype) for [login to view URL] You can see the exiting working demo at [login to view URL] user: demo password: upwork753 The system is build using AngularDart and [login to view URL] The deliverable of this assignment will be specifying the missing components and creating html/css templates for those components in order to specify the following requirements: PORTAL REQUIREMENTS - Shop manager can log into the portal using username and password (done) - Shop manager can select a shop to work with in the top right corner from the list of shops assigned to his user object (done) Orders Shop manager can see the list: - of new orders (placed orders) - active orders (accepted by the shop, being prepared) - Ready orders (marked ready for pick up) - History orders (a searchable list of past orders) Shop manager can accept or reject a new order (reject has to have a reasons selectable) Shop manager can mark an active order as ready for pickup or reject an order Shop manager can mark an order as picked up or expired Shop manager can move an order from history if Order has been marked as expired, but the customer still wants to pick it up Offers Shop manager can see the list: Active offers (those that are running now) Offers templates (offers that can be used to create new offers) Offer history (offers that have been sold out or expired) with search functions Shop manager can add a new offer: From scratch (by using + button on the active offers screen) From a template (by using + button next to a template of the offer) From history (by using a + button next to a historical offer) Shop manager can increase or decrease a quantity of the active offer by using a + or - buttons next to the offer quantity or by typing a new number of portions Shop manager can mark an active offer as sold out or expired by pressing a corresponding button with a warning dialog Shop manager can not edit an active offer except of the above possibilities Shop manager can edit the offer templates Shop manager can see the details fo the active offers and offers history (in a form similar to creating a new offer) Preferences Automatically accept orders after x minutes after it is placed Automatically mark orders as ready after x minutes after it is accepted You will need to have had a recent provable experience with designing ui in material design having used the actual components from [login to view URL] The components need to be designed (estimated based on the requirements): - portal theme (based on existing style guide) - login screen (already implemented, needs redesign) - offers list (implemented, needs redesign) - offers search/filter - offers form - confirmation dialogue - orders list (implemented needs redesign) - orders search/filter - transactions list - preferences screen - account details screen - notification bubble and dropdown The components above should be using only the building blocks from [login to view URL] or custom-made stylesheet strictly following material design guidelines. The test assignment will be to offer an alternative design of the "Active" list at [login to view URL] and associated "Details" form. You can find the current html/scss of these two components attached below. You will be asked to answer the following questions when submitting a proposal: - Please explain how do you use material CSS mixins in order to theme the whole application and style individual components? (please paste a few lines of working SCSS as an example) - Please give us an example of a component (angular or pure css/html) that you have recently designed using material design. - Please complete the test assignment.