top black navbar: secondary menu styles (donate, search, lang)

src/components/navigation/menu-language/menu-language.scss

@@ -35,36 +35,35 @@
 }
 
 .menu--language__toggle {
-  @include font-size(14px, 24px);
   align-items: center;
-  background: var(--grayscale-white);
   border: 0 none;
-  color: var(--brand-main-nearly-black);
   display: flex;
   flex-flow: row;
   font-family: var(--main-font-family);
-  font-weight: 600;
-  letter-spacing: -0.4px;
   margin: 0 -4px;
   padding: 0;
   text-transform: uppercase;
 
-  @include breakpoint($extrawide) {
-    @include font-size(12px, 12px);
-    font-weight: 400;
-    letter-spacing: -0.6px;
+  &:focus {
+    outline: solid 2px var(--additional-yellow);
+    outline-offset: 2px;
   }
 
-  @include breakpoint($xlarge) {
-    @include font-size(14px, 24px);
-    letter-spacing: -0.5px;
+  &.is-open {
+    .menu--language__toggle__caret {
+      transform: rotate(180deg);
+    }
   }
 
-  &:focus {
-    outline: solid 2px var(--additional-yellow);
-    outline-offset: 2px;
+  > * {
+    padding: 0 4px;
   }
+  span {
+    padding: 0;
+  }
+}
 
+.menu--language__toggle:not(.group) {
   &:hover {
     color: var(--brand-main);
     cursor: pointer;
@@ -76,35 +75,43 @@
     }
   }
 
-  &.is-group {
-    background: var(--grayscale-black);
-    border: 0 none;
-    color: var(--grayscale-white);
+  @include font-size(14px, 24px);
+  @include font-weight($semibold);
+  background: var(--grayscale-white);
+  color: var(--brand-main-nearly-black);
+  letter-spacing: -0.4px;
+
+  @include breakpoint($extrawide) {
+    @include font-size(12px, 12px);
+    @include font-weight($regular);
+    letter-spacing: -0.6px;
+  }
+
+  @include breakpoint($xlarge) {
+    @include font-size(14px, 24px);
+    letter-spacing: -0.5px;
+  }
+}
 
-    &:hover {
+.menu--language__toggle.group {
+  &:hover {
+    color: var(--grayscale-medium);
+    cursor: pointer;
+    span {
       color: var(--grayscale-medium);
-      cursor: pointer;
-      span {
-        color: var(--grayscale-medium);
-      }
-      svg {
-        fill: var(--grayscale-medium);
-      }
     }
-  }
-
-  &.is-open {
-    .menu--language__toggle__caret {
-      transform: rotate(180deg);
+    svg {
+      fill: var(--grayscale-medium);
     }
   }
 
-  > * {
-    padding: 0 4px;
-  }
-  span {
-    padding: 0;
-  }
+  background: var(--grayscale-black);
+  //border: 0 none;
+  color: var(--grayscale-white);
+
+  @include font-size(14px, 24px);
+  @include font-weight($semibold);
+  letter-spacing: -0.5px;
 }
 
 .menu--language__dropdown {
@@ -143,7 +150,7 @@
   }
 }
 
-.menu--language__globe-icon svg {
+.menu--language__globe-icon:not(.group) svg {
   @include breakpoint($wide) {
     height: 16px;
     width: 16px;

src/components/navigation/menu-language/menu-language.tsx

@@ -96,6 +96,7 @@ export class MenuLanguage {
     const black = 'var(--brand-main-nearly-black)';
     const white = 'var(--grayscale-white)';
     const svgColor = this.isGroup ? white : black;
+    const globeIconSize = this.isGroup ? 16 : 14;
 
     return this.isMobile ? (
       <Host class={'menu--language'}>
@@ -124,12 +125,17 @@ export class MenuLanguage {
           class={{
             'menu--language__toggle': true,
             'is-open': this.isMenuOpen,
-            'is-group': this.isGroup,
+            group: this.isGroup,
           }}
           aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
         >
-          <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={svgColor} />
-          <span>
+          <hy-icon
+            class={{'menu--language__globe-icon': true, group: this.isGroup}}
+            icon={'hy-icon-globe'}
+            size={globeIconSize}
+            fill={svgColor}
+          />
+          <span class={{group: this.isGroup}}>
             {this._dataMenuLanguage.map((item) => {
               if (item.isActive) {
                 return item.langCode;

src/components/site-header/site-header.scss

@@ -310,6 +310,8 @@
 }
 
 .hy-link__donate {
+  font-family: var(--main-font-family);
+
   @include breakpoint($wide) {
     padding: 0;
     text-decoration: none;
@@ -325,19 +327,39 @@
   }
 
   &__label {
+    font-family: var(--main-font-family);
+    margin-left: 4px;
+    text-decoration: none;
+  }
+}
+
+.hy-link__donate:not(.group) {
+  svg {
+    @include breakpoint($wide) {
+      height: 16px;
+      width: 13.64px;
+    }
+    @include breakpoint($extrawide) {
+      height: 12px;
+      width: 10.23px;
+    }
+    @include breakpoint($xlarge) {
+      height: 16px;
+      width: 13.64px;
+    }
+  }
+
+  .hy-link__donate__label {
     @include breakpoint($wide) {
       @include font-size(14px, 24px);
+      @include font-weight($semibold);
       color: var(--brand-main-nearly-black);
-      font-family: var(--main-font-family);
-      font-weight: 600;
       letter-spacing: -0.5px;
-      margin-left: 4px;
-      text-decoration: none;
     }
 
     @include breakpoint($extrawide) {
       @include font-size(12px, 12px);
-      font-weight: 400;
+      @include font-weight($regular);
       letter-spacing: -0.6px;
     }
 
@@ -345,36 +367,26 @@
       @include font-size(14px, 24px);
       letter-spacing: -0.5px;
     }
-
-    &.group {
-      color: var(--grayscale-white);
-    }
   }
+}
 
-  svg {
+.hy-link__donate.group {
+  .hy-link__donate__label {
     @include breakpoint($wide) {
-      height: 16px;
-      width: 13.64px;
-    }
-    @include breakpoint($extrawide) {
-      height: 12px;
-      width: 10.23px;
-    }
-    @include breakpoint($xlarge) {
-      height: 16px;
-      width: 13.64px;
+      @include font-size(14px, 24px);
+      @include font-weight($semibold);
+      color: var(--grayscale-white);
+      letter-spacing: -0.5px;
     }
   }
 
-  &.group {
-    &:hover {
+  &:hover {
+    color: var(--grayscale-medium);
+    span {
       color: var(--grayscale-medium);
-      span {
-        color: var(--grayscale-medium);
-      }
-      svg {
-        fill: var(--grayscale-medium);
-      }
+    }
+    svg {
+      fill: var(--grayscale-medium);
     }
   }
 }

src/components/site-header/site-header.tsx

@@ -230,7 +230,7 @@ export class SiteHeader {
             <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
             {this.isGroup && (
               <div class="hy-site-header__content-top">
-                <div class={'hy-site-header__logo-container group '}>
+                <div class={'hy-site-header__logo-container group '} role="navigation">
                   <hy-site-logo
                     is-group={true}
                     size={logoSizeGroup}
@@ -251,7 +251,7 @@ export class SiteHeader {
                   />
                   <hy-site-search
                     class={'menu--secondary__item group'}
-                    size={14}
+                    size={16}
                     color={logoColorGroup}
                     is-group={true}
                     show-label={true}
@@ -262,7 +262,7 @@ export class SiteHeader {
                   {this.donateLink.map((i) => {
                     return (
                       <a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
-                        <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+                        <hy-icon icon={'hy-icon-heart-support'} size={16} fill={logoColorGroup} />
                         <span class={'hy-link__donate__label group'}>{i.label}</span>
                       </a>
                     );
@@ -320,7 +320,7 @@ export class SiteHeader {
             <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
             {this.isGroup && (
               <div class="hy-site-header__content-top">
-                <div class={'hy-site-header__logo-container group '}>
+                <div class={'hy-site-header__logo-container group '} role="navigation">
                   <hy-site-logo
                     is-group={true}
                     size={logoSizeGroup}
@@ -341,7 +341,7 @@ export class SiteHeader {
                   />
                   <hy-site-search
                     class={'menu--secondary__item group'}
-                    size={14}
+                    size={16}
                     color={logoColorGroup}
                     show-label={true}
                     is-group={true}
@@ -352,7 +352,7 @@ export class SiteHeader {
                   {this.donateLink.map((i) => {
                     return (
                       <a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
-                        <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+                        <hy-icon icon={'hy-icon-heart-support'} size={16} fill={logoColorGroup} />
                         <span class={'hy-link__donate__label group'}>{i.label}</span>
                       </a>
                     );

src/components/site-header/site-search/site-search.scss

@@ -5,6 +5,7 @@
   display: flex;
   padding: 12px;
   flex-direction: row;
+  font-family: var(--main-font-family);
 
   @include breakpoint($narrow) {
     padding: 15px 5px;
@@ -28,13 +29,48 @@
   }
 
   &__label {
+    font-family: var(--main-font-family);
+    margin-left: 4px;
+  }
+}
+
+.button--search:not(.group) {
+  &:hover {
+    color: var(--brand-main);
+    cursor: pointer;
+
+    span {
+      color: var(--brand-main);
+    }
+    svg {
+      fill: var(--brand-main);
+    }
+  }
+
+  svg {
+    height: 20px;
+    width: 20px;
+
+    @include breakpoint($wide) {
+      height: 16px;
+      width: 16px;
+    }
+    @include breakpoint($extrawide) {
+      height: 12px;
+      width: 12px;
+    }
+    @include breakpoint($xlarge) {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  .button--search__label {
     @include font-size(14px, 14px);
     @include font-weight($bold);
     color: var(--site-logo-color);
     display: none;
-    font-family: var(--main-font-family);
     letter-spacing: -0.9px;
-    margin-left: 4px;
     visibility: hidden;
 
     @include breakpoint($narrow) {
@@ -45,8 +81,8 @@
 
     @include breakpoint($wide) {
       @include font-size(14px, 24px);
+      @include font-weight($semibold);
       display: block;
-      font-weight: 600;
       letter-spacing: -0.5px;
       text-transform: none;
       visibility: visible;
@@ -54,7 +90,7 @@
 
     @include breakpoint($extrawide) {
       @include font-size(12px, 12px);
-      font-weight: 400;
+      @include font-weight($regular);
       letter-spacing: -0.6px;
     }
 
@@ -62,52 +98,30 @@
       @include font-size(14px, 24px);
       letter-spacing: -0.5px;
     }
-
-    &__group {
-      color: var(--grayscale-white);
-    }
-  }
-
-  svg {
-    height: 20px;
-    width: 20px;
-
-    @include breakpoint($wide) {
-      height: 16px;
-      width: 16px;
-    }
-    @include breakpoint($extrawide) {
-      height: 12px;
-      width: 12px;
-    }
-    @include breakpoint($xlarge) {
-      height: 16px;
-      width: 16px;
-    }
   }
+}
 
+.button--search.group {
   &:hover {
-    color: var(--brand-main);
+    color: var(--grayscale-medium);
     cursor: pointer;
 
     span {
-      color: var(--brand-main);
+      color: var(--grayscale-medium);
     }
+
     svg {
-      fill: var(--brand-main);
+      fill: var(--grayscale-medium);
     }
   }
-  &--group {
-    &:hover {
-      color: var(--grayscale-medium);
 
-      span {
-        color: var(--grayscale-medium);
-      }
+  .button--search__label {
+    color: var(--grayscale-white);
 
-      svg {
-        fill: var(--grayscale-medium);
-      }
+    @include breakpoint($wide) {
+      @include font-size(14px, 24px);
+      @include font-weight($semibold);
+      letter-spacing: -0.5px;
     }
   }
 }

src/components/site-header/site-search/site-search.tsx

@@ -173,8 +173,6 @@ export class SiteSearch {
   }
 
   render() {
-    const isGroupClass = this.isGroup ? 'group' : 'page';
-    const buttonSearchLabelClass = ['button--search__label', `button--search__label__${isGroupClass}`].join(' ');
     return (
       <Host
         class={{
@@ -187,13 +185,19 @@ export class SiteSearch {
           aria-expanded={`${this.isSearchPanelOpen}`}
           class={{
             'button--search': true,
-            'button--search--group': this.isGroup,
+            group: this.isGroup,
             'is-open--menu': this.isAlternative,
             'is-open': this.isSearchPanelOpen,
           }}
           onClick={(e) => this.handleSearchPanelToggle(e)}
         >
-          {this.showLabel ? <span class={buttonSearchLabelClass}>{this._labels['label']}</span> : ''}
+          {this.showLabel ? (
+            <span class={{'button--search__label': true, 'button--search__label__group': this.isGroup}}>
+              {this._labels['label']}
+            </span>
+          ) : (
+            ''
+          )}
           <hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
         </button>
         <div