Merge pull request #725 from CDLUC3/bug/JS-fix-klaro-style

Bug fix for missing Consent Manager background styles on stage and production

Author: jupiter007

Dockerfile

@@ -11,8 +11,8 @@ RUN echo $(apt-cache search magick)
 # Add NodeJS and Yarn repositories to apt-get
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
     && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
-# Installing Node 16.x
-RUN curl -sL https://deb.nodesource.com/setup_16.x | bash
+# Installing Node 20.x
+RUN curl -sL https://deb.nodesource.com/setup_20.x | bash
 
 # Install packages
 RUN apt-get clean

app/assets/stylesheets/application.scss

@@ -34,4 +34,7 @@
 // DMPTool additional styling that is not part of the dmptool-ui repo
 // Import new DMPTool v5 styling
 @use "dmptool_v5/app";
-@use "dmptool_v5/overrides";
+@use "dmptool_v5/overrides";
+
+// Import Klaro cookie consent styles
+@use "dmptool/klaro";

app/assets/stylesheets/dmptool/_klaro.scss

@@ -0,0 +1,6 @@
+.cookie-notice{--color-blue:#125382;--color-gold:#f1ae00;--color-tan:#f0ede9;--color-black-blue:#072135;--color-light-blue:#00aee9;z-index:999;background-color:var(--modal-bg);position:fixed;inset:auto 0 0}@supports (color:lab(0% 0 0)){.cookie-notice{--color-blue:#125382;--color-gold:#f1ae00;--color-tan:#f0ede9;--color-black-blue:#072135;--color-light-blue:#00aee9}@supports (color:lab(0% 0 0)){.cookie-notice{--color-blue:lab(33.3212% -6.19453 -32.4883);--color-gold:lab(75.9472% 18.2781 84.2191);--color-tan:lab(93.8273% .513971 2.25042);--color-black-blue:lab(11.4666% -3.50665 -16.1963);--color-light-blue:lab(66.007% -23.4346 -43.4511)}}}.cn-body{color:var(--main-text);padding:1.5rem;font-size:medium}.cn-body h1{color:currentColor;margin-block:0 1rem;font-size:1.3rem;font-weight:600}.cn-body p{color:currentColor;line-height:1.5}.cn-body a{color:var(--link-text);text-decoration:underline}.cn-body>p{margin:0}.cn-buttons{justify-content:center;gap:clamp(1rem,3vw,2rem);margin-block-start:1.5rem;display:flex}.cm-btn{border-radius:4px;flex-basis:50%;max-inline-size:15rem;padding:.7rem;font-family:inherit;font-size:100%}.cm-btn:focus,.cm-btn:hover{text-decoration:underline}.cm-btn-danger{border:1px solid var(--main-text);color:var(--main-text);background-color:#0000}.cm-btn-success{border:1px solid var(--button-success-bg);background-color:var(--button-success-bg);color:var(--button-success-text)}@media (min-width:64rem){.cookie-notice{max-inline-size:37rem;inset:auto 1.5rem 1.5rem auto;box-shadow:.3rem .3rem .6rem #0006;box-shadow:.3rem .3rem .6rem lab(0% 0 0/.4)}}.cookie-notice{--modal-bg:var(--color-tan);--main-text:black;--link-text:var(--color-blue);--button-success-bg:var(--color-blue);--button-success-text:white}@media (prefers-color-scheme:dark){.cookie-notice{--modal-bg:var(--color-black-blue);--main-text:white;--link-text:var(--color-light-blue);--button-success-bg:var(--color-gold);--button-success-text:black}}
+#klaro {
+  button:focus, button:hover, button:active{
+    outline: none !important;;
+  }
+}

app/javascript/application.js

@@ -97,7 +97,7 @@ import './src/superAdmin/users/edit';
 
 // Add Klaro consent manager imports
 import 'klaro-ui/dist/js/klaro-config.js';
-import 'klaro-ui/dist/css/klaro-ui-light.css';
+import 'klaro-ui/dist/css/klaro-ui.css';
 
 // ==========================
 // = DMPTool customizations =