VSB-TUO/UI customization next fixes (v7.6.5) (#951)

* Added UI first changes to v7.6.5

* Fixed compiler errors

* Fixed double navbar

* Fixed navbar visibility

* mobile display header fix

* fixed toggle nav menu item display

* fixed missing logout && auth-nav-menu button

* fixed login/logout expandable container style

* fixed styles of header elements

* Nav logo by language, backup font-family by design manual

* Fixed colors of expandable nav menu

* Added padding to navbar buttons

Author: jr-rk

src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss

@@ -8,6 +8,7 @@
       .ds-menu-item-wrapper {
         a.ds-menu-item, &.username-email-wrapper {
           padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
+          text-decoration: none;
         }
 
         a.ds-menu-item {
@@ -17,6 +18,10 @@
             color: var(--ds-expandable-navbar-link-color-hover);
             background-color: var(--ds-user-menu-dropdown-link-background-hover);
           }
+          &:active, &:focus {
+            color: white;
+            background-color: var(--ds-expandable-navbar-bg);
+          }
         }
       }
     }

src/assets/images/lindat_color_line.png

@@ -6,18 +6,20 @@
 }
 
 .dropdown-menu {
-  background-color: var(--ds-expandable-navbar-bg);
+  background-color: #fff;
   overflow: hidden;
   min-width: 100%;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  ::ng-deep a.nav-link {
+
+  ::ng-deep a.ds-menu-item {
     color: var(--lt-vsb-tuo-cyan) !important;
     padding-right: var(--bs-spacer);
     padding-left: var(--bs-spacer);
     white-space: nowrap;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: white !important;
       text-decoration: none;
       background-color: var(--lt-vsb-tuo-cyan);
@@ -40,8 +42,8 @@
       margin-top: calc(var(--bs-spacer) / 2);
     }
   }
+
   .dropdown-menu {
     border: 0;
-
   }
 }

src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -5,7 +5,7 @@
   <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
   <div class="navbar-inner-container w-100 h-100" [class.container]="!(isMobile$ | async)">
     <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/vsb-cs-logo-w.svg" [attr.alt]="'menu.header.image.logo' | translate" />
+      <img [src]="logoSrc" [attr.alt]="'menu.header.image.logo' | translate" />
     </a>
 
     <div class="w-100 h-100">
@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <div class="navbar-buttons d-flex align-items-center gapx-1">
+    <div class="navbar-buttons d-flex align-items-center gapx-2">
       <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
       <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
       <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>

src/themes/custom/app/navbar/navbar.component.html

@@ -58,6 +58,7 @@ a.navbar-brand img {
     width: 100%;
     padding: .5rem 1rem;
     color: white;
+    text-decoration: none;
 
     &:hover, &:focus {
       background-color: white;

src/themes/custom/app/navbar/navbar.component.scss

@@ -36,7 +36,7 @@
         ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></button>
       <div id="logoutDropdownMenu" ngbDropdownMenu>
-        <ds-user-menu [inExpandableNavbar]="false"></ds-user-menu>
+        <ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
       </div>
     </div>
   </div>

src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -1,4 +1,4 @@
-.loginDropdownMenu, .logoutDropdownMenu {
+#loginDropdownMenu, #logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }

src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -29,13 +29,13 @@
   --ds-header-bg: var(--lt-vsb-tuo-cyan);
   --ds-header-logo-height: 50px;
   --ds-header-logo-height-xs: 50px;
-  --ds-header-icon-color: #{$link-color};
-  --ds-header-icon-color-hover: #{$link-hover-color};
+  --ds-header-icon-color: var(--lt-vsb-tuo-cyan-hover);
+  --ds-header-icon-color-hover: darken(var(--lt-vsb-tuo-cyan-hover), 15%);
   --ds-navbar-bg: var(--ds-header-bg);
   --ds-header-navbar-border-top-color: #{$white};
   --ds-header-navbar-border-bottom-color: #{$gray-400};
-  --ds-navbar-link-color: #fff;
-  --ds-navbar-link-color-hover: darken(#fff, 15%);
+  --ds-navbar-link-color: var(--lt-vsb-tuo-cyan);
+  --ds-navbar-link-color-hover: var(--lt-vsb-tuo-cyan-hover);
   --ds-expandable-navbar-bg: var(--ds-navbar-bg);
   --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
   --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);

src/themes/custom/styles/_custom_variables.scss

@@ -5,7 +5,7 @@
 
 @import '../assets/fonts/drive.scss';
 
-$font-family-sans-serif: "Drive", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-sans-serif: "Drive", Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
 $navbar-dark-color: #FFFFFF;