new-front-common-library 16.1.32-ROY-3 → 16.1.32-ROY-4

package/src/lib/util/component/header/header.component.html

@@ -1,389 +0,0 @@
-<mat-toolbar class="d-flex align-items-center toolbar-header toolbar-padding">
-  <span class="d-flex align-items-end">
-    <a
-      [href]="env === 'prod' ? 'https://unity.studiocanal.com/dashboard' : (env === 'sbx' ? 'https://unity-sbx.cplus/dashboard' : 'https://unity-' + env + '.studiocanal.com/dashboard')">
-      <img class="logo-unity" src="./assets/img/unity_logo_48x48.png">
-    </a>
-    <span *ngIf="env != 'prod'" [attr.id]="'env-' + env" class="env">{{ env }}</span>
-  </span>
-
-  <sc-menu [lang]="lang" (navigate)="navigate($event.module, $event.route, $event.queryParams)"
-           (redirect)="redirect($event.route)" class="menu-header" />
-
-  <div class="global-search">
-    <mat-icon class="header-icon">search</mat-icon>
-    <span class="global-search-separator"></span>
-    <mat-form-field class="max-width-100" subscriptSizing="dynamic">
-      <input [formControl]="formControlSearch"
-             [matAutocomplete]="autoSearch"
-             class="global-search-input max-width-85"
-             matInput
-             placeholder="search ..." />
-
-      <button (click)="navigate(null, '/advanced-search')"
-              matSuffix
-              class="btn advanced-button" mat-raised-button>
-        <mat-icon>flash_on</mat-icon>
-        {{ 'COMMON.HEADER.GLOBAL_SEARCH.ADVANCED' | commonTranslate: lang }}
-      </button>
-
-      <mat-autocomplete #autoSearch="matAutocomplete" class="mat-autocomplete-global-search" panelWidth="54vw">
-        <mat-option (onSelectionChange)="onSelectSearch($event, doc)"
-                    *ngFor="let doc of documents$ | async"
-                    class="mat-option-global-search">
-          <!--PURCHASE_ORDER-->
-          <div *ngIf="doc.docType === RapidSearchItemType.PURCHASE_ORDER" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">receipt_long</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-70">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.PURCHASE_ORDER' | commonTranslate: lang }}</span>
-                <span>{{ doc.poNumber }}
-                  - {{ doc.totalAmount | currency: doc.currencyCode:'symbol':undefined:'fr-FR' }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.BASKET_NUMBER' | commonTranslate: lang }}</span>
-                <span>{{ doc?.basketNumber ? doc.basketNumber : '-' }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.EAN' | commonTranslate: lang }}</span>
-                <span>{{ doc?.ean ? doc.ean : '-' }}</span>
-              </div>
-            </div>
-          </div>
-          <!--PRODUCT-->
-          <div *ngIf="doc.docType === RapidSearchItemType.PRODUCT" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">movie</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="ellipsis d-flex flex-column max-width-60">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.PRODUCT' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.title }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-10">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.SUPPORT' | commonTranslate: lang }}</span>
-                <span>{{ doc.support[labelLang] }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.EAN' | commonTranslate: lang }}</span>
-                <span>{{ doc.ean }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.RELEASE_DATE' | commonTranslate: lang }}</span>
-                <span>{{ doc?.releaseDate ? doc.releaseDate : '-' }}</span>
-              </div>
-            </div>
-          </div>
-          <!--WORK-->
-          <div *ngIf="doc.docType === RapidSearchItemType.WORK_VERSION" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">theaters</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-75 ellipsis">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.WORK' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.title }} ({{ doc.codeIso }})</span>
-              </div>
-              <div class="d-flex flex-column max-width-10">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.MILO_CODE' | commonTranslate: lang }}</span>
-                <span>{{ doc.miloCode }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.PRODUCTION_YEAR' | commonTranslate: lang }}</span>
-                <span>{{ doc.yearOfProduction }}</span>
-              </div>
-            </div>
-          </div>
-          <!--DEAL-->
-          <div *ngIf="doc.docType === RapidSearchItemType.DEAL" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">local_offer</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-70 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.DEAL' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.dealNumber }} - {{ doc.thirdPartyClientName }}
-                  ({{ doc.thirdPartyClientSap }})</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.AMOUNT' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.calculatedAmount | currency: doc.currencyCode:'symbol' }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.VALIDATION_DATE' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.validationDate }}</span>
-              </div>
-            </div>
-          </div>
-          <!--WORK_RECORD-->
-          <div *ngIf="doc.docType === RapidSearchItemType.WORK_RECORD" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">assignment</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-10 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.WORK_RECORD' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.id }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-10 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.DEAL' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.dealNumber }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-30 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CLIENT' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.thirdPartyClientName }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-35">
-                    <span class="auto-complete-label">
-                      {{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TITLE' | commonTranslate: lang }}
-                      ({{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.MILO_CODE' | commonTranslate: lang }})
-                    </span>
-                <span class="ellipsis">{{ doc.getTitle(lang) }} ({{ doc.miloCode }})</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.AMOUNT' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.amount | currency: doc.currencyCode:'symbol' }}</span>
-              </div>
-            </div>
-          </div>
-          <!--INVOICE-->
-          <div *ngIf="doc.docType === RapidSearchItemType.INVOICE" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">receipt</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-15 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.INVOICE' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.number }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-15 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.DEAL' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.dealNumber }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-20 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CLIENT' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.thirdPartyClientName }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-35">
-                    <span class="auto-complete-label">
-                      {{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TITLE' | commonTranslate: lang }}
-                      ({{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.MILO_CODE' | commonTranslate: lang }})
-                    </span>
-                <span class="ellipsis">{{ doc.getTitle(lang) }} ({{ doc.miloCode }})</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.AMOUNT' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.amount | currency: doc.currencyCode:'symbol' }}</span>
-              </div>
-            </div>
-          </div>
-          <!--THIRD_PARTY-->
-          <div *ngIf="doc.docType === RapidSearchItemType.THIRD_PARTY" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">person</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-85 ellipsis">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.THIRD_PARTY' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.companyOrPersonName }} ({{ doc.address | thirdPartyAddressSearch: lang }}
-                  )</span>
-              </div>
-              <div class="d-flex flex-column max-width-15">
-                    <span
-                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CODE' | commonTranslate: lang }}</span>
-                <span>{{ doc.code }}</span>
-              </div>
-            </div>
-          </div>
-          <!--CONTRACT-->
-          <div *ngIf="doc.docType === RapidSearchItemType.CONTRACT" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span *ngIf="getContractType(doc.type.labelEn) === 'cess'"
-                    class="material-icons-outlined rapid-search-type-icon">receipt</span>
-              <span *ngIf="getContractType(doc.type.labelEn) === 'acq'"
-                    class="material-icons-outlined rapid-search-type-icon">shop_two</span>
-              <span *ngIf="getContractType(doc.type.labelEn) === 'auth'"
-                    class="material-icons-outlined rapid-search-type-icon">account_circle</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-10 ellipsis">
-                <span
-                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CONTRACT' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.lisaId }} </span>
-              </div>
-              <div class="d-flex flex-column max-width-10">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TYPE' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.type[labelLang] }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-30">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.STATUS' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.status[labelLang] }}</span>
-              </div>
-              <div *ngIf="doc.type.labelEn !== 'Sale'" class="d-flex flex-column max-width-40 ellipsis">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.LICENSOR' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.licensor ? doc.licensor : '-' }}</span>
-              </div>
-              <div *ngIf="doc.type.labelEn === 'Sale'" class="d-flex flex-column max-width-40 ellipsis">
-                    <span class="auto-complete-label">{{
-                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CUSTOMER' | commonTranslate: lang
-                      }}</span>
-                <span>{{ doc.customer ? doc.customer : '-' }}</span>
-              </div>
-            </div>
-          </div>
-          <!--CONTRACT ROYALTY-->
-          <div *ngIf="doc.docType === RapidSearchItemType.ROYALTY_CONTRACT" class="d-flex align-items-center">
-            <div class="max-width-5">
-              <span class="material-icons-outlined rapid-search-type-icon">savings</span>
-            </div>
-            <div class="d-flex max-width-95">
-              <div class="d-flex flex-column max-width-20 ellipsis">
-                <span class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CONTRACT' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.contractNumber }}</span>
-              </div>
-              <div class="d-flex flex-column max-width-80 ellipsis">
-                <span class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TITLES' | commonTranslate: lang }}</span>
-                <span class="ellipsis">{{ doc.works.join(', ') }}</span>
-              </div>
-            </div>
-          </div>
-        </mat-option>
-      </mat-autocomplete>
-
-    </mat-form-field>
-  </div>
-
-  <div *ngIf="user && user.secondary" class="connected-as d-flex justify-content-between align-items-center">
-      <span style="margin-right: 10px">
-        {{ 'COMMON.HEADER.CONNECTED_AS' | commonTranslate: lang }}  {{ user.login + ' - ' + user.firstName + ' ' + user.name }}
-      </span>
-
-    <button (click)="stopIdentityTheft()" *ngIf="user.secondary" color="warn" mat-raised-button>
-      {{ 'CORE.STOP' | commonTranslate: lang }}
-    </button>
-  </div>
-
-  <span (click)="getHistory()" [matMenuTriggerFor]="menuHistory"
-        class="material-icons header-icon max-width-5">history</span>
-  <mat-menu #menuHistory="matMenu" class="action-menu">
-    <ng-container *ngFor="let history of historyList" [ngSwitch]="history.type">
-      <button (click)="navigate('expenditure-commitment', '/purchase-orders/' + history.id)" *ngSwitchCase="'PRODUCT'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">theaters</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.PRODUCT' | commonTranslate : lang }}{{ history.type }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('expenditure-commitment', '/purchase-orders/' + history.id)" *ngSwitchCase="'PO'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">receipt_long</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.PO' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('commercial', '/deal/consult/' + history.id)" *ngSwitchCase="'DEAL'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">local_offer</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.DEAL' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('commercial', '/work-record/consult/'+ history.id +'/general')" *ngSwitchCase="'WORK'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">assignment</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.WORK_RECORD' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('legal', '/contracts-details/acq/' + history.id)"
-              *ngSwitchCase="'CONTRACT_ACQ'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">shop_two</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.CONTRACT_ACQ' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('legal', '/contracts-details/cess/' + history.id)"
-              *ngSwitchCase="'CONTRACT_CESS'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">receipt</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.CONTRACT_CESS' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('legal', '/contracts-details/auth/' + history.id)"
-              *ngSwitchCase="'CONTRACT_AUTH'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">account_circle</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.CONTRACT_AUTH' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button (click)="navigate('expenditure-commitment', '/budget/form/' + history.id)" *ngSwitchCase="'BUDGET'"
-              mat-menu-item>
-        <mat-icon class="material-icons-outlined">payments</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.BUDGET' | commonTranslate : lang }} {{ history.ref }}
-      </button>
-      <button *ngSwitchCase="'NO_HISTORY_AVAILABLE'" mat-menu-item>
-        <mat-icon class="material-icons-outlined">not_interested</mat-icon>
-        {{ 'COMMON.HEADER.HISTORY.NO_HISTORY_AVAILABLE' | commonTranslate : lang }}
-      </button>
-    </ng-container>
-  </mat-menu>
-  <span class="header-separator"></span>
-
-  <span [matMenuTriggerFor]="settings" class="material-icons-outlined header-icon max-width-5">settings</span>
-
-  <!-- #enddocregion mat-menu-trigger-for -->
-  <mat-menu #settings="matMenu" class="settings-menu">
-    <button (click)="switchTheme()" mat-menu-item>
-      <mat-icon class="theme-icon">toggle_on</mat-icon>
-      <span>{{ 'COMMON.HEADER.PARAMETERS.THEME' | commonTranslate: lang }}</span>
-    </button>
-    <button class="img-btn" (click)='switchLang("en")' *ngIf='lang !== "en"' mat-menu-item>
-      <img class="mat-icon" src="assets/img/flag/en-flag.png">
-      <span>{{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.ENGLISH' | commonTranslate: lang }}</span>
-    </button>
-    <button class="img-btn" (click)='switchLang("fr")' *ngIf='lang !== "fr"' mat-menu-item>
-      <img class="mat-icon" src="assets/img/flag/fr-flag.png">
-      <span>{{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.FRENCH' | commonTranslate: lang }}</span>
-    </button>
-    <button class="img-btn" (click)='switchLang("de")' *ngIf='lang !== "de"' mat-menu-item>
-      <img class="mat-icon" src="assets/img/flag/de-flag.png">
-      <span>{{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.DEUTCH' | commonTranslate: lang }}</span>
-    </button>
-    <ng-container *ngxPermissionsExcept="restrictions">
-      <!--USER-->
-      <button (click)="navigate('user', '/account/authorization/search')" *ngIf="user && user.admin" mat-menu-item>
-        <mat-icon class="material-icons-outlined">manage_accounts</mat-icon>
-        <span>{{ 'COMMON.HEADER.MENU.USER.SECTION_TITLE' | commonTranslate: lang }}</span>
-      </button>
-    </ng-container>
-      <!--MY PREFERENCES-->
-      <button (click)="navigate('user', '/account/settings')" mat-menu-item>
-        <mat-icon class="material-icons-outlined">settings</mat-icon>
-        <span>{{ 'COMMON.HEADER.MENU.USER.SETTINGS' | commonTranslate: lang }}</span>
-      </button>
-  </mat-menu>
-</mat-toolbar>
-

package/src/lib/util/component/header/header.component.scss

@@ -1,265 +0,0 @@
-@import "../../../../../assets/css/mat-palettes";
-
-.header-icon {
-  color: $blue-primary;
-  cursor: pointer;
-  text-align: center;
-  margin: 0 4px;
-}
-
-.header-separator {
-  display: inline-block;
-  height: 25%;
-}
-
-.global-search-separator {
-  display: inline-block;
-  height: 70%;
-  border-right: 2px solid $gray-strong;
-}
-
-:host-context(.dark-theme) {
-  background-color: $background-lvl2;
-
-  .global-search {
-    background: $background-lvl1;
-  }
-
-  .global-search-input {
-    background: $background-lvl1;
-  }
-
-  .global-search-separator {
-    border-right: 2px solid $dark-background-color;
-  }
-
-  .header-separator {
-    border-right: 2px solid $background-lvl5;
-  }
-
-}
-
-::ng-deep .dark-theme {
-  .mat-autocomplete-global-search {
-    background: $background-lvl2 !important;
-  }
-
-  .mat-mdc-option.mat-option-global-search:focus:not(.mat-option-disabled) {
-    background: $background-lvl3 !important;
-    color: white !important;
-  }
-
-  .mat-mdc-option.mat-option-global-search,
-  .mat-mdc-option.mat-option-global-search {
-    color: white !important;
-  }
-  .global-search-input::placeholder {
-    color: $gray-light !important;
-  }
-}
-
-:host-context(.light-theme) {
-  background-color: white;
-
-  .global-search {
-    background: #EFF3F6;
-  }
-
-  .global-search-input {
-    background: #EFF3F6;
-  }
-
-  .global-search-separator {
-    border-right: 2px solid $gray-strong;
-  }
-
-  .header-separator {
-    border-right: 2px solid $gray-strong;
-  }
-  .global-search-input::placeholder {
-    color: $black-bluish !important;
-  }
-
-  .mat-toolbar {
-    background-color: white;
-  }
-}
-
-::ng-deep .light-theme .mat-mdc-option.mat-option-global-search:hover:not(.mdc-list-item--disabled) {
-  background: $gray-strong !important;
-}
-
-.logo-unity {
-  height: 48px;
-  width: 48px;
-}
-
-.global-search .header-icon {
-  margin: 0 10px;
-}
-
-.global-search {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  background: #EFF3F6;
-  margin-left: 5px;
-  border-radius: 8px;
-  flex: 1 1 0;
-  width: auto;
-  min-width: 0;
-}
-
-.global-search-input {
-  background: $gray-background-lightest;
-  border: none;
-  margin-left: 10px;
-  font-size: 14px !important;
-
-  :focus {
-    outline: none;
-  }
-}
-
-.rapid-search-type-icon {
-  font-size: 1.4em;
-  vertical-align: middle;
-}
-
-.advanced-button {
-  background: $purple-primary !important;
-  color: white !important;
-  width: 90px;
-  min-width: 90px !important;
-  height: 24px !important;
-  box-shadow: 0px 2px 6px rgba(68, 93, 123, 0.16), inset 0px 2px 6px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.06);
-  margin-right: 5px;
-  padding: 0;
-
-  .mat-icon {
-    color: white !important;
-    font-size: 14px !important;
-    height: unset;
-    width: unset;
-    margin-right: 0;
-  }
-}
-
-.connected-as {
-  font-size: 12px;
-}
-
-.user-thumb {
-  margin-right: 16px;
-  width: 40px;
-  height: 40px;
-}
-
-#env-dev, #env-uat, #env-sbx {
-  background-color: #809ec1;
-  color: white;
-}
-
-.env {
-  color: #fff;
-  font-size: 10px;
-  border-radius: 1px;
-  padding: 0px 5px;
-  line-height: 16px;
-  height: 16px;
-}
-
-.global-search-input::placeholder {
-  font-style: italic !important;
-  font-weight: bold !important;
-}
-
-.mat-option-global-search {
-  height: 30px !important;
-  line-height: 15px !important;
-  padding: 0 8px;
-}
-
-.auto-complete-label {
-  font-size: 8px;
-}
-
-::ng-deep .global-search {
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none !important;
-  }
-
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper {
-    background-color: transparent !important;
-  }
-  .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-focus-overlay {
-    opacity: 0 !important;
-  }
-  .mdc-line-ripple {
-    display: none !important;
-  }
-
-  .mat-mdc-form-field-infix {
-    min-height: 40px !important;
-    padding-top: 8px !important;
-    padding-bottom: 8px !important;
-  }
-}
-
-@for $i from 0 through 20 {
-  $step: $i * 5;
-  $width: $i * 5%;
-
-  .max-width-#{$step} {
-    flex: 1 1 $width;
-    max-width: $width;
-  }
-
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.toolbar-header {
-  height: 64px;
-  position: absolute;
-  padding: 0 16px !important;
-  z-index: 999;
-}
-
-.menu-header {
-  max-width: 70%;
-  overflow: hidden;
-  max-height: 60px;
-}
-
-::ng-deep .settings-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
-  height: 24px;
-  width: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 15px;
-  font-size: 18px;
-}
-
-::ng-deep .settings-menu.mat-mdc-menu-panel .img-btn {
-   .mat-mdc-menu-item-text {
-      display: flex;
-      justify-content: start;
-      align-items: center;
-  }
-
-  img {
-    height: 12px !important;
-    width: auto !important;
-    display: block !important;
-    padding-left: 3px;
-    margin-right: 17px !important;
-  }
-}
-
-.theme-icon {
-  font-size: 24px !important;
-}