Update base-build theme to reflect changes to the BC design system

CraigClark commented 4 months ago

OP timer

https://openplus.monday.com/boards/4092908516/pulses/6596193103

[!IMPORTANT] Related ticket on data catalogue theme | https://github.com/bcgov/MFIN-Data-Catalogue/issues/468

Since we began work on the project, the design system for BC has been updated. see https://www2.gov.bc.ca

This task is to update the existing base-build theme to align with changes to new design system.

There are some modifications that are specific to the base-build and other's specific to the data catalogue.

See the attached document for changes.

TODO

Make a checklist of items that describe D0D
Create a related ticket to track changes that are specific to the data catalogue.

Questions

Currently on BC sites, the logo links back to https://www2.gov.bc.ca. Do we want to do the same?

DoD

[x] font family matches new design
[x] decrease font size
[x] <h1> use font weight 700 instead of 500
[x] in nav title, remove letter spacing
[x] remove dark header background
[x] use logo designed for light backgrounds
[x] change search bar to use a black icon on a white background, no start border
[x] remove title from nav section
[x] add title to front page, should look something like this, it's the standard BC title
[x] on mobile, collapse docs/dashboard/logout/login to icons
[x] update footer layout
[x] Check visual weight of existing buttons, borders etc. removing the 'heavy' header may make these carry too much visual weight

Mock-up

BC Design adjustments.docx

CraigClark commented 4 months ago

Note on header

I have the header working on the base theme, however the nav needs some work. I'm going to leave it for now as I'm not sure what type of nav will be used on projects. It works for now using the default bootstrap style, however future work should be done to make this match the BC design system.

CraigClark commented 4 months ago

@lkmorlan ready for review/merge

This required 2 branches

on the data catalogue, https://github.com/bcgov/MFIN-Data-Catalogue/tree/468-update-theme-to-implement-new-bc-design-system

on the base theme https://github.com/bcgov/bcbb-theme/tree/20-update-theme-to-implement-new-bc-design-system

Could you please merge these if you are ok with them? If not, please get onto dv14, I'd like Robin to review first thing in the morning, then Nicole in the afternoon.

lkmorlan commented 4 months ago

Merged

NicoledeGreef commented 4 months ago

reviewed in dv14

bcgov / bcbb-theme