Unify inconsistent styles between components and libraries

[PhilBastian]

Describe the suggested improvement

Is your improvement related to a problem? Please describe.

ServicePulse has grown over the years, with multiple views and libraries imparting their own colours and styles. For the most part these look visually similar enough to not be discordant, however improvements could be made for consistency and to ease the design burden for further feature work or modification of design style (e.g. introducing a dark mode)

• When converting from AngularJS to VueJS, an effort was made to componentise the solution, including scoped CSS styles, however main.css still has many styles that apply globally and conflict with the intention of the components.
• Various libraries have components with colours different to those used elsewhere (e.g. the toast library has its own colours for danger/warning which are different to the bootstrap colours for danger/warning which are different from main.css designation for danger/warning)
• Lists of items for the most part look similar, but some are implemented using divs/borders/fixed width components to imitate columns and others are implemented using tables.
• margin sizes are inconsistent. Some components use bootstrap margin classes and others use explicit sizes
• use of "box" for white backgrounded sections is inconsistent

Describe the suggested solution

• Define standard colours as CSS variables in main.css. Use these variables in scoped styles across the app
• Override external libraries with standardised colours (e.g. toast, bootstrap
• Standardise use of box and margin sizes
• Standardise use of DataView and how tables/lists of data are displayed)
• Remove everything from main.css (and other global CSS files) which isn't used or can be scoped to components

Describe alternatives you've considered

• completely redesign the UI and implement it using a structured methodology

Additional Context

No response