Currently the frontend of P2P is styled using a lot of duplicate code. The DOM is also inconsistent between various sections and non-semantic. This is very obvious when you view the various registration screens. There are different wrapper elements depending on which screen you are on and the tags used between the various views. This makes styling very difficult.
We need to make it a lot more optimized to style and the view on the frontend needs to have markup that's consistent and correct for the usage requirement.
  1. Use SASS variables
  2. Do not repeat styles between components
  3. Make the frontend consistent and semantic - all forms use proper wrapper tags, headings and paragraphs use proper tags, it's more accessible.
  4. Styles are responsive and it works well on mobile
  5. IMPORTANT: The application matches the concept VISUALLY - this means that you may need to make adjustments to various elements so they work in a web context. For instance, I've made changes to font weights from 600 to 500 because it's more consistent with how the concept looks.
  6. UX is pleasing and fluid. Users are not confused by redirects or odd experiences.