feat: core-styles v2 header (#1068)

* fix: header elements use mr- (me-) not ml- (ms-)

CMS uses `margin-right: auto`, not `margin-left: auto`.

Bootstrap5 uses `me` for "margin end" (and `ms` for "margin start").

I.e. Bootstrap adopted CSS's new language:
- `margin-inline-end`
- `margin-inline-start`

* fix: portal does not know design-tokens

* feat: upgrade header css to core-styles v2

* chore: remove old header cruft

* fix: load header css after bootstrap

* chore: update core-styles to latest

* fix: core-styles-v2.header.css loads too late

So we serve it as a static file.

* chore: remove cruft from old solution

* fix: no need to serve special static file

Warning: Introduces padding difference between CMS and Portal header.

* fix: move core-styles bump to correct file

* deps: core-styles, core-cms

* fix: portal nav position is wrong

* fix: same font for header in portal and cms

* deps: core-styles

* fix: portal nav alignment broken on cms cuz bs4

Portal nav alignemnt changes on CMS, because CMS uses Bootstrap 4.

This release accomodates Bootstrap 5 for dropdown menu alignment.

Author: wesleyboar

client/package-lock.json

@@ -68,7 +68,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-eslint": "^8.0.1",
-    "@tacc/core-styles": "^2.11.0",
+    "@tacc/core-styles": "^2.39.4",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^16.0.1",
     "@types/js-cookie": "^3.0.6",

client/package.json

@@ -1,9 +1,5 @@
 /* Shims for deprecated Bootstrap4 utils */
 
-.ml-auto {
-  margin-left: auto !important;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;

client/src/styles/components/bootstrap.utils.css

@@ -1,4 +1,4 @@
-@import url('@tacc/core-styles/src/lib/_imports/settings/color.css');
+@import url('@tacc/core-styles/dist/settings/color.css');
 
 /* If Design doc uses color on the left, use color on the right
   (When design is updated to use the new colors, we can remove this)

client/src/styles/settings/color.css

@@ -4,7 +4,7 @@
 version: "3.8"
 services:
   cms:
-    image: taccwma/core-cms:ff737a3
+    image: taccwma/core-cms:v4.25.2
     volumes:
       - ../cms/secrets.py:/code/taccsite_cms/secrets.py
       - ../cms/uwsgi/uwsgi.ini:/code/uwsgi.ini

client/src/styles/trumps/icon.fonts.css

@@ -16,9 +16,6 @@
     <link rel="canonical" href="{{request.get_full_path}}">
     <base href="/">
     {% block head_extra %}{% endblock %}
-    <!-- Core CSS -->
-    <link id="css-site-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-    <link id="css-site-header" rel="stylesheet" href="/static/site_cms/css/build/site.header.css" />
     {% if settings.PORTAL_CSS_FILENAMES|length %}
     <!-- Project CSS -->
       {% for stylesheet in settings.PORTAL_CSS_FILENAMES %}
@@ -27,6 +24,9 @@
     {% endif %}
     <!-- Vendor CSS -->
     <link id="css-bootstrap" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <!-- Header CSS -->
+    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.theme.default.css">
+    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.header.css">
 
     {% block styles %}{% endblock %}
   </head>

server/conf/docker/docker-compose-dev.all.debug.yml

@@ -21,9 +21,9 @@
 
 
 
-      {% include "includes/nav_cms.html" with className="navbar-nav" only %}
+      {% include "includes/nav_cms.html" with className="navbar-nav  me-auto" only %}
 
-      {% include "includes/nav_search.html" with className="form-inline  ml-auto" only %}
+      {% include "includes/nav_search.html" with className="form-inline" only %}
       {# FAQ: Unlike CMS and User Guide, we must pass `user` #}
       {% include "includes/nav_portal.html" with className="navbar-nav" user=user settings=settings only %}