From 129865066d02fe7e3f6bb2a4d9686befd485ae4b Mon Sep 17 00:00:00 2001
From: Grygorii Makieiev <gmakan55@gmail.com>
Date: Fri, 3 Dec 2021 12:49:23 +0200
Subject: [PATCH 1/5] Task 692. Usernames' and providers' styles in header have
 been fixed according by mockup.

---
 src/app/header/header.component.html |   6 +-
 src/app/header/header.component.scss | 107 +++++++++++++++++----------
 2 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 6f2502f11b..95992f73f6 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -78,7 +78,7 @@ <h2 class="header_descr">
       </button>
 
       <div class="header_username" [matMenuTriggerFor]="log">
-        <ng-container>{{(user$ | async).firstName}} {{(user$ | async).lastName}}</ng-container>
+        <ng-container>{{(user$ | async).lastName | titlecase}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
       </div>
       <button mat-icon-button [matMenuTriggerFor]="log">
         <mat-icon>arrow_drop_down</mat-icon>
@@ -91,7 +91,7 @@ <h2 class="header_descr">
 
     <mat-menu #log="matMenu" class="header_menu">
       <button mat-menu-item class="header_menu_account-button">
-        <ng-container>{{(user$ | async).firstName}} {{(user$ | async).lastName}}</ng-container>
+        <ng-container>{{(user$ | async).lastName | titlecase}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
         <button mat-raised-button class="header_menu_account-button_account-circle" matBadge="2"
           matBadgePosition="before" matBadgeColor="accent">
           <i>
@@ -117,4 +117,4 @@ <h2 class="header_descr">
   class="progress-bar">
   <mat-progress-bar mode="indeterminate">
   </mat-progress-bar>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 3bf78d69a1..6327950d11 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,28 +1,29 @@
 .authorization {
   display: flex;
   margin: 1%;
+  width: 100%;
 }
 
 .material-icon {
   line-height: none;
 }
 
-.pointer{
-  cursor:pointer;
+.pointer {
+  cursor: pointer;
 }
 
-.notification{
+.notification {
   height: 35px;
   line-height: 35px;
   font-weight: bold;
 }
 
-.circle-notification{
+.circle-notification {
   font-size: 10px;
-  color:#F5BC4A;
+  color: #F5BC4A;
 }
 
-.btn-notification{
+.btn-notification {
   font-weight: bold;
   color: #3849F9;
 }
@@ -59,7 +60,7 @@
     cursor: pointer;
   }
 
-  &_secondary{
+  &_secondary {
     background: #3849F9;
     max-height: 83px;
     box-shadow: 0px 7px 19px rgba(0, 0, 0, 0.11);
@@ -71,7 +72,8 @@
     align-items: center;
   }
 
-  &_top, &_btns {
+  &_top,
+  &_btns {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -79,7 +81,8 @@
 
   &_logo-wrapper {
     position: relative;
-    .logo{
+
+    .logo {
       position: absolute;
       transform: translate(0, -41%);
 
@@ -96,12 +99,14 @@
     border-radius: 20px;
     border-color: white;
     color: white;
+
     &.mat-stroked-button {
       font-size: 0.7rem;
     }
   }
 
-  &_lang, &_menu {
+  &_lang,
+  &_menu {
     background: none;
     color: white;
     font-size: 0.7rem !important;
@@ -120,11 +125,14 @@
   }
 
   &_username {
-    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    font-family: Innerspace, sans-serif;
+    font-style: normal;
     font-weight: bold;
-    white-space: nowrap;
-    line-height: 40px;
-    text-transform: uppercase;
+    font-size: 0.8125rem;
+    line-height: 15px;
+    text-transform: capitalize;
     cursor: pointer;
 
     &:hover {
@@ -153,7 +161,8 @@
       }
     }
 
-    &-button-mobile, &_account-button {
+    &-button-mobile,
+    &_account-button {
       display: none;
     }
   }
@@ -187,22 +196,22 @@
   }
 }
 
-::ng-deep .mat-menu-content{
+::ng-deep .mat-menu-content {
   font-weight: bold;
   font-size: x-small;
   margin: 0.5rem !important;
 }
 
-::ng-deep .mat-menu-panel{
+::ng-deep .mat-menu-panel {
   border-radius: 15px !important;
 }
 
 .icon-account {
-  color:white;
+  color: white;
 }
 
 ::ng-deep .lang-option .mat-select-value {
-  color:white !important;
+  color: white !important;
   padding-right: 25px;
   overflow: visible;
 }
@@ -211,11 +220,11 @@
   display: none;
 }
 
-::ng-deep .lang-option-text .mat-option-text{
+::ng-deep .lang-option-text .mat-option-text {
   width: 0;
 }
 
-.lang-option-text{
+.lang-option-text {
   padding: 0;
   font-size: 0.7rem;
   font-weight: bold;
@@ -228,20 +237,23 @@
   width: auto !important;
 }
 
-::ng-deep .mat-menu-item{
+::ng-deep .mat-menu-item {
   padding: 0px !important;
 }
-.progress-bar{
-  position:  absolute;
+
+.progress-bar {
+  position: absolute;
   width: 100vw;
   z-index: 999;
- }
+}
+
 @media (max-width: 1024px) {
   .header {
     &_search {
       width: 100%;
     }
-    &_title{
+
+    &_title {
       text-align: center;
     }
   }
@@ -249,7 +261,9 @@
 
 @media (max-width: 375px) {
   .header {
-    &_top, &_btns {
+
+    &_top,
+    &_btns {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -270,7 +284,7 @@
 }
 
 
-@media(max-width: 750px){
+@media(max-width: 750px) {
   .authorization {
     flex-direction: row-reverse;
 
@@ -325,12 +339,15 @@
     &_lang {
       display: none;
     }
-    &_about{
-      display: none;;
+
+    &_about {
+      display: none;
+      ;
     }
 
-    &_support{
-      display: none;;
+    &_support {
+      display: none;
+      ;
     }
 
     &_menu {
@@ -376,17 +393,22 @@
   .header {
     width: 100%;
     padding: 0;
+
     &_logo-wrapper {
       height: 20px;
-      .logo{
+
+      .logo {
         width: 130px;
         margin-top: 8px;
       }
     }
-    &_top, &_btns {
+
+    &_top,
+    &_btns {
       display: flex;
       justify-content: space-between;
     }
+
     &_top {
       display: flex;
       flex-direction: row;
@@ -397,12 +419,14 @@
       padding: 40px 0 15px 15px;
       background-color: #3849F9;
     }
+
     &_btns {
       flex-direction: column-reverse;
       align-items: flex-end;
       gap: 0;
     }
-    &_title{
+
+    &_title {
       margin-top: 120px;
       text-align: center;
     }
@@ -416,27 +440,30 @@
     }
   }
 }
+
 @media (max-width: 750px) {
   .header {
     padding: 0;
-    &_title{
+
+    &_title {
       font-size: 1.5rem;
       line-height: 2rem;
       text-align: center;
       margin-top: 2rem;
     }
-    &_descr{
+
+    &_descr {
       text-align: center;
       font-size: 1rem;
     }
 
-    .header-full-search-bar-wrap{
+    .header-full-search-bar-wrap {
       width: inherit;
       margin: 1rem;
     }
   }
 
-  .mat-button-wrapper{
-    padding:0.3rem;
+  .mat-button-wrapper {
+    padding: 0.3rem;
   }
 }

From e2d5d4ca70ba306daa613317f79fb19bbc9b59c5 Mon Sep 17 00:00:00 2001
From: Grygorii Makieiev <gmakan55@gmail.com>
Date: Fri, 3 Dec 2021 14:15:54 +0200
Subject: [PATCH 2/5] Usernames' and providers' font styles in header have been
 fixed.

---
 src/app/header/header.component.html | 4 ++--
 src/app/header/header.component.scss | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 95992f73f6..357ae5b5a7 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -78,7 +78,7 @@ <h2 class="header_descr">
       </button>
 
       <div class="header_username" [matMenuTriggerFor]="log">
-        <ng-container>{{(user$ | async).lastName | titlecase}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
+        <ng-container>{{(user$ | async).lastName}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
       </div>
       <button mat-icon-button [matMenuTriggerFor]="log">
         <mat-icon>arrow_drop_down</mat-icon>
@@ -91,7 +91,7 @@ <h2 class="header_descr">
 
     <mat-menu #log="matMenu" class="header_menu">
       <button mat-menu-item class="header_menu_account-button">
-        <ng-container>{{(user$ | async).lastName | titlecase}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
+        <ng-container>{{(user$ | async).lastName}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
         <button mat-raised-button class="header_menu_account-button_account-circle" matBadge="2"
           matBadgePosition="before" matBadgeColor="accent">
           <i>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 6327950d11..59ecf7c2d2 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -132,7 +132,6 @@
     font-weight: bold;
     font-size: 0.8125rem;
     line-height: 15px;
-    text-transform: capitalize;
     cursor: pointer;
 
     &:hover {

From 2fd6f841b40a5740b4f7567b034fc425e11ad979 Mon Sep 17 00:00:00 2001
From: Grygorii Makieiev <gmakan55@gmail.com>
Date: Tue, 7 Dec 2021 13:03:32 +0200
Subject: [PATCH 3/5] The method of obtaining the name of the parent and
 teacher has been optimized

---
 src/app/header/header.component.html | 4 ++--
 src/app/header/header.component.ts   | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 357ae5b5a7..75be414b1e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -78,7 +78,7 @@ <h2 class="header_descr">
       </button>
 
       <div class="header_username" [matMenuTriggerFor]="log">
-        <ng-container>{{(user$ | async).lastName}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
+        <ng-container>{{ getUserShortName() }}</ng-container>
       </div>
       <button mat-icon-button [matMenuTriggerFor]="log">
         <mat-icon>arrow_drop_down</mat-icon>
@@ -91,7 +91,7 @@ <h2 class="header_descr">
 
     <mat-menu #log="matMenu" class="header_menu">
       <button mat-menu-item class="header_menu_account-button">
-        <ng-container>{{(user$ | async).lastName}} {{(user$ | async).firstName | slice:0:1}}.{{(user$ | async).middleName | slice:0:1}}.</ng-container>
+        <ng-container>{{ getUserShortName() }}</ng-container>
         <button mat-raised-button class="header_menu_account-button_account-circle" matBadge="2"
           matBadgePosition="before" matBadgeColor="accent">
           <i>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 54de259721..07dc5d8398 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -30,6 +30,7 @@ export class HeaderComponent implements OnInit {
 
   selectedLanguage = 'uk';
   showModalReg = false;
+  userShortName: string = '';
 
   @Select(FilterState.isLoading)
   isLoadingResultPage$: Observable<boolean>;
@@ -74,4 +75,11 @@ export class HeaderComponent implements OnInit {
     localStorage.setItem('ui-culture', this.selectedLanguage);
   }
 
+  getUserShortName(user$: Observable<User>): string {
+    this.user$.subscribe(item => {
+      this.userShortName = item.lastName + ' ' + (item.firstName).slice(0,1) + '.' + (item.middleName).slice(0,1) + '.';
+    })
+    return this.userShortName;
+  }
+
 }

From 4be3ab171fa4f0f34efa7be8c6d7e36a61652232 Mon Sep 17 00:00:00 2001
From: Grygorii Makieiev <gmakan55@gmail.com>
Date: Tue, 7 Dec 2021 16:28:14 +0200
Subject: [PATCH 4/5] The method of obtaining the name of the parent and
 teacher has been optimized one more time

---
 src/app/header/header.component.html |  4 ++--
 src/app/header/header.component.ts   | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 75be414b1e..1acc8ee828 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -78,7 +78,7 @@ <h2 class="header_descr">
       </button>
 
       <div class="header_username" [matMenuTriggerFor]="log">
-        <ng-container>{{ getUserShortName() }}</ng-container>
+        <ng-container>{{ userShortName }}</ng-container>
       </div>
       <button mat-icon-button [matMenuTriggerFor]="log">
         <mat-icon>arrow_drop_down</mat-icon>
@@ -91,7 +91,7 @@ <h2 class="header_descr">
 
     <mat-menu #log="matMenu" class="header_menu">
       <button mat-menu-item class="header_menu_account-button">
-        <ng-container>{{ getUserShortName() }}</ng-container>
+        <ng-container>{{ userShortName }}</ng-container>
         <button mat-raised-button class="header_menu_account-button_account-circle" matBadge="2"
           matBadgePosition="before" matBadgeColor="accent">
           <i>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 07dc5d8398..f2adc33b9a 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { RegistrationState } from '../shared/store/registration.state';
 import { Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { Logout, CheckAuth, Login } from '../shared/store/registration.actions';
 import { User } from '../shared/models/user.model';
 import { Router } from '@angular/router';
@@ -57,6 +58,13 @@ export class HeaderComponent implements OnInit {
 
   ngOnInit(): void {
     this.store.dispatch(new CheckAuth());
+
+    this.user$.pipe(
+      filter((user) => !!user)
+    )
+    .subscribe(item => {
+      this.userShortName = item.lastName + ' ' + (item.firstName).slice(0,1) + '.' + (item.middleName).slice(0,1) + '.';
+    })
   }
 
   logout(): void {
@@ -75,11 +83,11 @@ export class HeaderComponent implements OnInit {
     localStorage.setItem('ui-culture', this.selectedLanguage);
   }
 
-  getUserShortName(user$: Observable<User>): string {
+  /* getUserShortName(user$: Observable<User>): string {
     this.user$.subscribe(item => {
       this.userShortName = item.lastName + ' ' + (item.firstName).slice(0,1) + '.' + (item.middleName).slice(0,1) + '.';
     })
     return this.userShortName;
-  }
+  } */
 
 }

From 19d00a06bef6f6d148e9cf45f3a655a8f8e15bb9 Mon Sep 17 00:00:00 2001
From: Grygorii Makieiev <gmakan55@gmail.com>
Date: Tue, 7 Dec 2021 16:41:47 +0200
Subject: [PATCH 5/5] Code that was commented out has been removed from
 header.component.ts file

---
 src/app/header/header.component.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index f2adc33b9a..314b700e32 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -82,12 +82,4 @@ export class HeaderComponent implements OnInit {
   setLanguage(): void {
     localStorage.setItem('ui-culture', this.selectedLanguage);
   }
-
-  /* getUserShortName(user$: Observable<User>): string {
-    this.user$.subscribe(item => {
-      this.userShortName = item.lastName + ' ' + (item.firstName).slice(0,1) + '.' + (item.middleName).slice(0,1) + '.';
-    })
-    return this.userShortName;
-  } */
-
 }