Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/core/authentication/authentication.guard.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Router, CanActivate } from '@angular/router';
+import { Router } from '@angular/router';
 
 /** Custom Services */
 import { Logger } from '../logger/logger.service';
@@ -13,7 +13,7 @@ const log = new Logger('AuthenticationGuard');
  * Route access authorization.
  */
 @Injectable()
-export class AuthenticationGuard implements CanActivate {
+export class AuthenticationGuard {
   /**
    * @param {Router} router Router for navigation.
    * @param {AuthenticationService} authenticationService Authentication Service.

src/app/core/shell/breadcrumb/breadcrumb.component.html

@@ -16,7 +16,7 @@
 <ng-template #templateBreadcrumb let-popover="popover">
   <h2>{{ 'labels.menus.Breadcrumbs' | translate }}</h2>
   <p class="mw300">{{ "labels.text.User's current location" | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/core/shell/sidenav/sidenav.component.html

@@ -4,7 +4,7 @@
     'sidebar-compact': sidenavCollapsed
   }"
 >
-  <div class="navigation-panel" fxLayout="column">
+  <div class="navigation-panel layout-column">
     <!-- TODO: Allow customization by organization -->
     <div class="app-brand" [routerLink]="['/home']">
       <img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo" />
@@ -178,7 +178,7 @@
 <ng-template #templateLogo let-popover="popover">
   <h2>{{ 'labels.text.Home' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Welcome page logo from anywhere' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -198,7 +198,7 @@
 <ng-template #templateUserPanel let-popover="popover">
   <h2>{{ 'labels.menus.User Panel' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Section Buttons' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -222,7 +222,7 @@
 <ng-template #templateFrequentlyAccessed let-popover="popover">
   <h2>{{ 'labels.menus.Frequently Accessed' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Shortcut to the frequently accessed components' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -246,7 +246,7 @@
 <ng-template #templateDashboard let-popover="popover">
   <h2>{{ 'labels.menus.Dashboard' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.User Dashboard Component' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -270,7 +270,7 @@
 <ng-template #templateNavigation let-popover="popover">
   <h2>{{ 'labels.menus.Navigation' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.User Entity navigation screen' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -294,7 +294,7 @@
 <ng-template #templateFrequentPostings let-popover="popover">
   <h2>{{ 'labels.menus.Frequent Postings' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Shortcut accounting rules' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -318,7 +318,7 @@
 <ng-template #templateCreateJournalEntry let-popover="popover">
   <h2>{{ 'labels.menus.Create Journal Entry' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Shortcut entry screen' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -342,7 +342,7 @@
 <ng-template #templateChartOfAccounts let-popover="popover">
   <h2>{{ 'labels.menus.Chart of Accounts' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Shortcut accounts screen' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/core/shell/toolbar/toolbar.component.html

@@ -1,9 +1,10 @@
-<mat-toolbar fxLayout="row" color="primary" id="mifosx-toolbar">
+<mat-toolbar class="layout-row" color="primary" id="mifosx-toolbar">
   <button
     mat-icon-button
     *ngIf="!sidenavCollapsed"
     (click)="toggleSidenav()"
     matTooltip="{{ 'tooltips.Toggle Hide/Open' | translate }}"
+    tabindex="0"
   >
     <fa-icon icon="bars" size="lg"></fa-icon>
   </button>
@@ -13,69 +14,70 @@
     *ngIf="sidenav.opened"
     (click)="toggleSidenavCollapse()"
     matTooltip="{{ 'tooltips.Toggle Collapse' | translate }}"
-    fxHide.lt-md="true"
+    class="hide-lt-md"
+    tabindex="0"
   >
     <fa-icon *ngIf="!sidenavCollapsed" icon="chevron-left"></fa-icon>
     <fa-icon *ngIf="sidenavCollapsed" icon="chevron-right"></fa-icon>
   </button>
 
-  <nav mat-tab-nav-bar backgroundColor="primary" class="ml-1">
+  <div class="tab-nav-bar">
     <a
       #institution
-      mat-tab-link
       class="tab-link"
       [matMenuTriggerFor]="institutionMenu"
       #institutionMenuTrigger="matMenuTrigger"
+      tabindex="0"
     >
       <fa-icon class="mr-05" icon="university" size="lg"></fa-icon>
       {{ 'labels.menus.Institution' | translate }}
     </a>
 
-    <span fxHide.lt-lg="true">
-      <a #accounting mat-tab-link class="tab-link" [routerLink]="['/accounting']">
+    <span class="hide-lt-md">
+      <a #accounting class="tab-link accounting-link" [routerLink]="['/accounting']" tabindex="0">
         <fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
         {{ 'labels.menus.Accounting' | translate }}
       </a>
-      <a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger">
+      <a #reports class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" tabindex="0">
         <fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
         {{ 'labels.menus.Reports' | translate }}
       </a>
-      <a #admin mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
+      <a #admin class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger" tabindex="0">
         <fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
         {{ 'labels.menus.Admin' | translate }}
       </a>
-      <a #configWizard mat-tab-link class="tab-link" (click)="openDialog()">
+      <a #configWizard class="tab-link" (click)="openDialog()" tabindex="0">
         <fa-icon class="mr-05" icon="info" size="lg"></fa-icon>
         {{ 'labels.menus.Configuration Wizard' | translate }}
       </a>
     </span>
-  </nav>
+  </div>
 
-  <span fxFlex="auto"></span>
+  <span class="flex-auto"></span>
 
   <div #globalSearch>
-    <mifosx-search-tool></mifosx-search-tool>
+    <mifosx-search-tool tabindex="0"></mifosx-search-tool>
   </div>
 
   <div #languageSelector>
-    <mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
+    <mifosx-language-selector class="ml-1 language hide-lt-md" tabindex="0"></mifosx-language-selector>
   </div>
 
-  <button mat-icon-button [matMenuTriggerFor]="languageMenu">
+  <button mat-icon-button [matMenuTriggerFor]="languageMenu" tabindex="0">
     <mat-icon class="lg-icon">language</mat-icon>
   </button>
 
   <div #notifications>
-    <mifosx-notifications-tray #notificationsTray fxHide.lt-md></mifosx-notifications-tray>
+    <mifosx-notifications-tray #notificationsTray class="hide-lt-md" tabindex="0"></mifosx-notifications-tray>
   </div>
 
   <div #themeToggle>
-    <mifosx-theme-toggle></mifosx-theme-toggle>
+    <mifosx-theme-toggle tabindex="0"></mifosx-theme-toggle>
   </div>
 
   <div #appMenu>
-    <button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
-      <img src="assets/images/user_placeholder.png" />
+    <button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu" tabindex="0">
+      <img src="assets/images/user_placeholder.png" [alt]="'labels.headings.User Profile' | translate" />
     </button>
   </div>
 </mat-toolbar>
@@ -86,55 +88,67 @@
 </mat-menu>
 
 <mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item routerLink="/clients">{{ 'labels.menus.Clients' | translate }}</button>
-  <button mat-menu-item routerLink="/groups">{{ 'labels.menus.Groups' | translate }}</button>
-  <button mat-menu-item routerLink="/centers">{{ 'labels.menus.Centers' | translate }}</button>
-  <span fxHide.lt>
-    <button mat-menu-item [routerLink]="['/accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
-    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">{{ 'labels.menus.Reports' | translate }}</button>
-    <button mat-menu-item [matMenuTriggerFor]="adminMenu">{{ 'labels.menus.Admin' | translate }}</button>
+  <button mat-menu-item routerLink="/clients" tabindex="0">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item routerLink="/groups" tabindex="0">{{ 'labels.menus.Groups' | translate }}</button>
+  <button mat-menu-item routerLink="/centers" tabindex="0">{{ 'labels.menus.Centers' | translate }}</button>
+  <span class="hide-lt-md">
+    <button mat-menu-item [routerLink]="['/accounting']" tabindex="0">
+      {{ 'labels.menus.Accounting' | translate }}
+    </button>
+    <button mat-menu-item [matMenuTriggerFor]="reportsMenu" tabindex="0">
+      {{ 'labels.menus.Reports' | translate }}
+    </button>
+    <button mat-menu-item [matMenuTriggerFor]="adminMenu" tabindex="0">{{ 'labels.menus.Admin' | translate }}</button>
   </span>
 </mat-menu>
 
 <!-- Toolbar Menus -->
 <mat-menu #reportsMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/reports']">{{ 'labels.menus.All' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Client']">{{ 'labels.menus.Clients' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Loan']">{{ 'labels.menus.Loans' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Savings']">{{ 'labels.menus.Savings' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Fund']">{{ 'labels.menus.Funds' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports']" tabindex="0">{{ 'labels.menus.All' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0">
+    {{ 'labels.menus.Clients' | translate }}
+  </button>
+  <button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0">{{ 'labels.menus.Loans' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0">
+    {{ 'labels.menus.Savings' | translate }}
+  </button>
+  <button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0">{{ 'labels.menus.Funds' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0">
+    {{ 'labels.menus.Accounting' | translate }}
+  </button>
 </mat-menu>
 
 <mat-menu #adminMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item (click)="navigateMenu('/appusers')">{{ 'labels.menus.Users' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/organization']">{{ 'labels.menus.Organization' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/system']">{{ 'labels.menus.System' | translate }}</button>
-  <button mat-menu-item [routerLink]="['/products']">{{ 'labels.menus.Products' | translate }}</button>
-  <button mat-menu-item routerLink="/templates">{{ 'labels.menus.Templates' | translate }}</button>
+  <button mat-menu-item (click)="navigateMenu('/appusers')" tabindex="0">{{ 'labels.menus.Users' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/organization']" tabindex="0">
+    {{ 'labels.menus.Organization' | translate }}
+  </button>
+  <button mat-menu-item [routerLink]="['/system']" tabindex="0">{{ 'labels.menus.System' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/products']" tabindex="0">{{ 'labels.menus.Products' | translate }}</button>
+  <button mat-menu-item routerLink="/templates" tabindex="0">{{ 'labels.menus.Templates' | translate }}</button>
 </mat-menu>
 
 <!-- Application User Help Menu -->
 <mat-menu #applicationMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item (click)="help()">
+  <button mat-menu-item (click)="help()" tabindex="0">
     <mat-icon matListIcon>
       <fa-icon icon="question-circle" size="sm"></fa-icon>
     </mat-icon>
     <span>{{ 'labels.menus.Help' | translate }}</span>
   </button>
-  <button mat-menu-item [routerLink]="['/profile']">
+  <button mat-menu-item [routerLink]="['/profile']" tabindex="0">
     <mat-icon>
       <fa-icon icon="user" size="sm"></fa-icon>
     </mat-icon>
     <span>{{ 'labels.menus.Profile' | translate }}</span>
   </button>
-  <button mat-menu-item [routerLink]="['/settings']">
+  <button mat-menu-item [routerLink]="['/settings']" tabindex="0">
     <mat-icon>
       <fa-icon icon="cog" size="sm"></fa-icon>
     </mat-icon>
     <span>{{ 'labels.menus.Settings' | translate }}</span>
   </button>
-  <button mat-menu-item (click)="logout()" id="logout">
+  <button mat-menu-item (click)="logout()" id="logout" tabindex="0">
     <mat-icon>
       <fa-icon icon="sign-out-alt" size="sm"></fa-icon>
     </mat-icon>
@@ -145,7 +159,7 @@
 <ng-template #templateInstitution let-popover="popover">
   <h2>{{ 'labels.menus.Institution' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Button for individual account' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -158,7 +172,7 @@
 <ng-template #templateAccounting let-popover="popover">
   <h2>{{ 'labels.menus.Accounting' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Button for accounting department' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -174,7 +188,7 @@
 <ng-template #templateReports let-popover="popover">
   <h2>{{ 'labels.menus.Reports' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Dropdown system reports' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -190,7 +204,7 @@
 <ng-template #templateAdmin let-popover="popover">
   <h2>{{ 'labels.menus.Admin' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Setup organization including users' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -204,7 +218,7 @@
 </ng-template>
 
 <ng-template #templateSelfService let-popover="popover">
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -224,7 +238,7 @@
 <ng-template #templateConfigWizard let-popover="popover">
   <h2>{{ 'labels.menus.Configuration Wizard' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Initial setup and application tour' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -244,7 +258,7 @@
 <ng-template #templateGlobalSearch let-popover="popover">
   <h2>{{ 'labels.menus.Global Search' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Navigate system selecting entity' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -268,7 +282,7 @@
 <ng-template #templateLanguageSelector let-popover="popover">
   <h2>{{ 'labels.menus.Language Selector' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Organization available languages' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -292,7 +306,7 @@
 <ng-template #templateNotifications let-popover="popover">
   <h2>{{ 'labels.menus.Notifications' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.This shows all the notifications.' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -312,7 +326,7 @@
 <ng-template #templateThemePicker let-popover="popover">
   <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Choose to work with a dark or bright background' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -332,7 +346,7 @@
 <ng-template #templateAppMenu let-popover="popover">
   <h2>{{ 'labels.menus.Application Menu' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.User settings and sign out button' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/core/shell/toolbar/toolbar.component.scss

@@ -5,9 +5,25 @@
     0 2px 2px 0 rgb(0 0 0 / 14%),
     0 1px 5px 0 rgb(0 0 0 / 12%);
 
+  .tab-nav-bar {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
   .tab-link {
     min-width: auto;
-    padding: 0 1rem;
+    padding: 15px 1rem;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 14px;
+    color: rgb(255 255 255 / 70%);
+
+    &:hover {
+      color: #fff;
+    }
+
+    cursor: pointer;
   }
 
   .search-bar {