CSS refactor to be more compatible with PrimeVue and improve layout on smaller screens

[TimCsaky]

support ticket:
https://apps.nrs.gov.bc.ca/int/jira/browse/SHOWCASE-3384

consolidate our style sheets
resolve style conflicts
use primevue defaults where possible
make semi-responsive

Description

Types of changes

Checklist

• I have read the CONTRIBUTING doc
• I have checked that unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

[github-actions]

Coverage Report (Application)

Totals
Statements:	70.67% ( 53 / 75 )
Methods:	62.5% ( 5 / 8 )
Lines:	81.63% ( 40 / 49 )
Branches:	44.44% ( 8 / 18 )

[github-actions]

Coverage Report (Frontend)

Totals
Statements:	33.11% ( 598 / 1806 )
Methods:	30.55% ( 117 / 383 )
Lines:	40.08% ( 426 / 1063 )
Branches:	15.28% ( 55 / 360 )

[tpantella]

New styling is imposing a bunch of white space on the right that looks off. Suggest matching the current Prod BCBox styling more closely when it comes to large browser resolutions. I'm at 2560 x 1440 using Chrome at 100% zoom. Although I did always think Prod BCBox was a bit -wide- so the main issue is that it is not centered - it would be more appropriate if the white space was distributed between left and right. So my advice is actually to slightly widen the content / reduce the margins, but also center the content.

Line spacing appears to be more compact compared to the current Prod BCBox, suggest more space between rows of text to more closely match current Prod BCBox.

I see the same margin/centering issue on the bucket list, but even more pronounced - the datatable is very narrow and this should be fixed.

This margin/centering issue is also true for the object list. I have also noted that Upload/Download don't seem to have hover tooltips, but Delete does. I like the border width for buttons.

Otherwise looks good to me!

[TimCsaky]

New styling is imposing a bunch of white space on the right that looks off. Suggest matching the current Prod BCBox styling more closely when it comes to large browser resolutions. I'm at 2560 x 1440 using Chrome at 100% zoom. Although I did always think Prod BCBox was a bit -wide- so the main issue is that it is not centered - it would be more appropriate if the white space was distributed between left and right. So my advice is actually to slightly widen the content / reduce the margins, but also center the content.

Line spacing appears to be more compact compared to the current Prod BCBox, suggest more space between rows of text to more closely match current Prod BCBox.

I see the same margin/centering issue on the bucket list, but even more pronounced - the datatable is very narrow and this should be fixed.

This margin/centering issue is also true for the object list. I have also noted that Upload/Download don't seem to have hover tooltips, but Delete does. I like the border width for buttons.

Otherwise looks good to me!

Thanks Tyler. this should be updated now: https://bcbox-dev-pr-148.apps.silver.devops.gov.bc.ca/

[kyle1morel]

The very first image on the main page, under the Login to get started button has a bunch of padding in the image not present in live, or the other images on the pr.

[norrisng-bc]

Not sure if intentional, but the checkboxes (e.g. in the permissions modal) seem to be using the Primevue default light blue instead of the BC Gov dark blue (i.e. $bcbox-primary: #036 inside variables.scss).