HPC-9104: Fix style issues after common design theme update

UN-OCHA · Oct 17, 2023 · 342b5d4 · 342b5d4
1 parent 73678cb
commit 342b5d4
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 7 deletions.
diff --git a/html/modules/custom/ghi_search/js/ghi_search.ui.js b/html/modules/custom/ghi_search/js/ghi_search.ui.js
@@ -26,9 +26,9 @@
       });
 
       if ($(context).hasClass('path-search') && !$(context).hasClass('search-form-open')) {
-        $(toggle).attr('aria-expanded', 'true');
         $(toggle).trigger('click');
         $('#' + search_form_id).attr('data-cd-hidden', 'false');
+        $('body').addClass('search-form-open');
       }
     }
   }

diff --git a/html/modules/custom/hpc_downloads/templates/hpc-download-pdf-header.html.twig b/html/modules/custom/hpc_downloads/templates/hpc-download-pdf-header.html.twig
@@ -1,5 +1,5 @@
 <!-- -webkit-print-color-adjust: exact has been added in relation to this issue: https://github.com/GoogleChrome/puppeteer/issues/2182 -->
-<style>* {box-sizing: border-box; -webkit-print-color-adjust: exact; font-family: "Roboto", helvetica, arial, sans-serif;}</style>
+<style>* {box-sizing: border-box; -webkit-print-color-adjust: exact;} body {font-family: "Roboto", helvetica, arial, sans-serif;}</style>
 <div style="width: 100%; color: #4d4c4d; padding: 0px 20px">
     <div style="width: 100%;">
         <div style="width: 80%; float: left;">

diff --git a/html/modules/custom/hpc_downloads/templates/hpc-download-png-header.html.twig b/html/modules/custom/hpc_downloads/templates/hpc-download-png-header.html.twig
@@ -1,5 +1,5 @@
 <!-- -webkit-print-color-adjust: exact has been added in relation to this issue: https://github.com/GoogleChrome/puppeteer/issues/2182 -->
-<style>* {box-sizing: border-box; -webkit-print-color-adjust: exact; font-family: "Roboto", helvetica, arial, sans-serif;}</style>
+<style>* {box-sizing: border-box; -webkit-print-color-adjust: exact;} body {font-family: "Roboto", helvetica, arial, sans-serif;}</style>
 <div class="snap-png-header content-width">
     <div class="header">
         <div class="caption-wrapper">

diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.theme b/html/themes/custom/common_design_subtheme/common_design_subtheme.theme
@@ -95,6 +95,7 @@ function common_design_subtheme_form_alter(&$form, FormStateInterface $form_stat
     $form['#attributes']['data-cd-icon'][] = '';
     $form['#attributes']['data-cd-component'][] = 'cd-search';
     $form['#attributes']['data-cd-logo'][] = 'search';
+    $form['#attributes']['role'][] = 'search';
     // Focus the input when clicking on the toggler button.
     $form['#attributes']['data-cd-focus-target'] = 'cd-search';
     $form['keywords']['#attributes']['placeholder'] = t('What are you looking for?');

diff --git a/html/themes/custom/common_design_subtheme/css/styles.css b/html/themes/custom/common_design_subtheme/css/styles.css
diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-logo.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-logo.scss
@@ -12,7 +12,7 @@
     // width: 186px;
     width: 100%;
     height: auto;
-    margin: 0 0 0 -1.5rem;
+    margin: 0 0 0 -1rem;
     padding-left: 0.5rem;
     text-decoration: none;
     color: var(--ghi-default-text-color);

diff --git a/html/themes/custom/common_design_subtheme/sass/ghi/_ghi-search.scss b/html/themes/custom/common_design_subtheme/sass/ghi/_ghi-search.scss
@@ -34,6 +34,11 @@ main#main-content {
 
   button.cd-search__btn {
     height: $cd-site-header-height;
+    padding: 0;
+
+    svg {
+      fill: var(--ghi-default-text-color);
+    }
 
     &[aria-expanded="true"] {
       position: relative;
@@ -60,7 +65,7 @@ main#main-content {
       }
 
       svg {
-        fill: var(--ghi-default-text-color);
+        fill: var(--cd-primary-color);
       }
 
       &:hover,
@@ -125,7 +130,7 @@ main#main-content {
   }
 
   // Visually hide the search input's label.
-  label[for="edit-keys"] {
+  .form-item-keywords label {
     @include visually-hidden;
   }
 }