UI Revamp

[abelsiqueira]

Pull request details

As a contributor I confirm

• I read and followed the instructions in CONTRIBUTING.md
• The developer documentation is up to date with the changes introduced in this Pull Request
• Tests are passing
• All the workflows are passing

List of related issues or pull requests

Refs:

• Apply general styles according to Design Guidelines #410
• Consider refactoring app.css and using quasar classes whenever possible #617
• Better responsiveness for small sm screens and xs screens #626
• Find a better way to describe the style of the previous button #575
• Consider matching the colour scheme to the logo #682
• Consider changing the typeface to Inter #331
• Use --primary colors for up and down buttons #395

Describe the changes made in this pull request

Implement the design changes trying to use the most of the quasar classes.
This ends up touching some extra issues, like responsiveness. There are 4 different modes:

• For large enough screens, and larger, you have two blocks, one for the form and one for the preview. This is the intended layout.
• For medium screens, the preview block becomes a hidden drawer, and a button to open it appear. The rest is the same.
• For small screens, the main block becomes attached to the header, and the empty spaces in the lateral are removed. Every space counts.
• For mobile-sized screens, the stepper and the preview are completely removed. The navigation is not very informative, but it can be done.

Instructions to review the pull request

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/

[github-actions]

Once the build has completed, you can preview your PR at this URL: https://cffinit.netlify.app/PR759/