Merge pull request #1014 from DTS-STN/globalheader3

fix:design tweaks
DTS-STN · Sep 11, 2023 · e0c331c · e0c331c
2 parents 8b210ff + 0326c25
commit e0c331c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js
@@ -7,7 +7,7 @@ import React from "react";
 export function Breadcrumb(props) {
   const Component = props.component || "a";
   return (
-    <nav className="ds-py-6" aria-label="breadcrumbs" id={props.id}>
+    <nav className="ds-py-[15px]" aria-label="breadcrumbs" id={props.id}>
       <ul className="ds-block ds-text-custom-blue-dark ds-leading-23px ds-font-body ">
         {props.items
           ? props.items.map((item, index) => {
@@ -17,11 +17,11 @@ export function Breadcrumb(props) {
                   className={`ds-inline-block ds-w-100 ds-pb-4 sm:ds-pb-0`}
                 >
                   {index > 0 && (
-                    <span className="ds-mx-2 ds-inline-block ds-align-middle ds-text-multi-blue-blue70b ds-icon-cheveron-right ds-pr-2 ds-pl-2" />
+                    <span className="ds-inline-block ds-align-middle ds-text-multi-blue-blue70b ds-icon-cheveron-right ds-mr-[4px]" />
                   )}
                   <Component
                     href={item.link}
-                    className="ds-font-body hover:ds-text-canada-footer-hover-font-blue ds-text-multi-blue-blue70b ds-underline"
+                    className="ds-font-body hover:ds-text-canada-footer-hover-font-blue ds-text-multi-blue-blue70b ds-underline ds-pr-[10px]"
                   >
                     {item.text}
                   </Component>

diff --git a/src/components/Header/GlobalHeader.js b/src/components/Header/GlobalHeader.js
@@ -46,17 +46,17 @@ export function GlobalHeader(props) {
           <div
             className={`${
               containerClass || ""
-            } sm:ds-hidden ds-container ds-flex ds-flex-col  ds-pb-[12px] ds-max-w-6xl`}
+            } sm:ds-hidden ds-container ds-flex ds-flex-col ds-pb-[12px] ds-max-w-6xl ds-pt-[15px]`}
           >
             <div
               className={`ds-flex ds-flex-row ds-w-full sm:ds-pt-[12px] ds-pb-[22px]`}
             >
-              <div className={`header-logo ds-mr-6`}>
+              <div className={`header-logo ds-mt-[10px] ds-mb-[6px]`}>
                 <a href={breadCrumbItems[0].link}>
                   <Image
                     className={`${
-                      lang === "en" ? "ds-max-h-[45px]" : "ds-max-h-[45px]"
-                    } ds-w-[100%] ds-h-[100%] ds-max-w-[441px] ds-pr-[20px]`}
+                      lang === "en" ? "ds-max-h-[31px]" : "ds-max-h-[32px]"
+                    } ds-w-[100%] ds-h-[100%] ds-max-w-[323px]`}
                     src={lang === "en" ? logoFile : logoFileFR}
                     alt="Government of Canada"
                   />
@@ -83,7 +83,7 @@ export function GlobalHeader(props) {
           </div>
           {/* Desktop */}
           <div className={containerClass ? containerClass : "ds-container"}>
-            <div className="ds-hidden sm:ds-contents ds-mx-auto ds-w-full">
+            <div className="ds-hidden sm:ds-contents ds-mx-auto ds-w-full ds-pt-[15px]">
               <div className="ds-flex ds-flex-row">
                 <div className="ds-w-full ds-mb-[45px]"></div>
                 <Language
@@ -100,17 +100,17 @@ export function GlobalHeader(props) {
 
               <div className="ds-flex ds-items-start ds-pb-[12px]">
                 <div
-                  className={`header-logo ds-flex-initial`}
+                  className={`header-logo ds-flex-initial ds-px-[15px] ds-pt-[10px] ds-mb-[10px]`}
                   property="publisher"
                   typeOf="GovernmentOrganization"
                 >
                   <a href={breadCrumbItems[0].link}>
                     <Image
                       className={`${
                         lang === "en"
-                          ? "md:ds-max-h-[39px] ds-max-h-[33px]"
-                          : "md:ds-max-h-[39px] ds-max-h-[33px]"
-                      } md:ds-max-w-[360px] ds-max-w-[293px] ds-pt-0`}
+                          ? "md:ds-max-h-[29px] ds-max-h-[33px]"
+                          : "md:ds-max-h-[29px] ds-max-h-[33px]"
+                      } md:ds-max-w-[293px] ds-max-w-[282px] ds-pt-0`}
                       src={lang === "en" ? logoFile : logoFileFR}
                       alt="Government of Canada"
                       proprty="logo"

diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
@@ -43,7 +43,7 @@ export function SearchBar(props) {
           type="submit"
         >
           <Image
-            className="ds-search-icon ds-ml-[6px] ds-mt-[3px]"
+            className="ds-search-icon ds-ml-[4px] md:ds-ml-[6px] ds-mt-[3px]"
             src={searchIcon}
             alt="Search Service Canada"
           />