Witold/legacy button rewrite (#2664)

* Button migration for header * Actions component btn migration Icon fix * Header migration refactor * Main component btn migration Icon fix * Notification component btn migration * Sidenav component migration fix * Sidenav component migration fix Header fix Notification fix * Avatar icon fix * Fixed notification button for mobile view * Fixed notification button for mobile view * Paginator arrow fix * Mat badge rewrite for notification mobile * Notification badge position fix * Edit button profile fix
ita-social-projects · Dec 7, 2024 · 93e7b48 · 93e7b48
1 parent 287da91
commit 93e7b48
Show file tree

Hide file tree

Showing 15 changed files with 151 additions and 69 deletions.
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -73,7 +73,7 @@ <h2 class="header-descr">{{ headerSubtitle }}</h2>
     <button mat-flat-button class="menu" [matMenuTriggerFor]="log">
       <mat-icon class="account-circle">account_circle</mat-icon>
       <span class="user-name">{{ userShortName }}</span>
-      <mat-icon class="arrow-drop-down">arrow_drop_down</mat-icon>
+      <mat-icon iconPositionEnd class="arrow-drop-down">arrow_drop_down</mat-icon>
     </button>
   </ng-container>
 

diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -43,11 +43,8 @@
   }
 
   .info-link {
-    display: flex;
     background: none;
     color: white;
-    align-items: center;
-    justify-content: flex-end;
     font-size: 0.7rem;
     font-family: 'Innerspace';
     font-weight: bold;
@@ -56,8 +53,10 @@
     cursor: pointer;
     padding: 6px;
 
-    .mat-icon {
-      margin-right: 5px;
+    ::ng-deep .mdc-button__label {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
     }
   }
 
@@ -68,7 +67,7 @@
     border-color: white;
     color: white;
 
-    &.mat-stroked-button {
+    &.mat-mdc-outlined-button {
       font-size: 0.7rem;
     }
   }
@@ -137,9 +136,16 @@
 .lang,
 .menu,
 .login {
-  background: none;
-  color: white;
+  background: none !important;
+  color: white !important;
   font-size: 0.7rem !important;
+
+  .mat-icon {
+    margin: 0;
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
 }
 
 .menu .mat-icon {

diff --git a/src/app/shared/components/notifications/notifications.component.html b/src/app/shared/components/notifications/notifications.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="!(isMobileScreen$ | async); else isMobileScreen">
   <button mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon class="notifications-menu" [matBadge]="notificationAmount?.amount || null"> notifications_none </mat-icon>
+    <mat-icon class="notifications-menu" [matBadge]="notificationAmount?.amount || null"> notifications_none</mat-icon>
   </button>
   <mat-menu xPosition="before" #menu="matMenu" [class]="'notification-menu'">
     <app-notifications-list [notificationAmount]="notificationAmount" [receivedNotification]="receivedNotification">
@@ -9,10 +9,11 @@
 </ng-container>
 
 <ng-template #isMobileScreen>
-  <div *ngIf="notificationAmount" class="full-width flex flex-row justify-start items-center">
-    <button mat-icon-button class="btn-notifications flex flex-row justify-between">
-      <mat-icon class="notifications-icon">notifications_none</mat-icon>{{ 'NOTIFICATIONS' | translate }}
+  <div *ngIf="notificationAmount" class="full-width">
+    <button mat-button class="btn-notifications full-width">
+      <mat-icon class="notifications-icon">notifications_none</mat-icon>
+      {{ 'NOTIFICATIONS' | translate }}
+      <mat-icon iconPositionEnd *ngIf="notificationAmount.amount" [matBadge]="notificationAmount.amount"></mat-icon>
     </button>
-    <mat-icon *ngIf="notificationAmount.amount" [matBadge]="notificationAmount.amount" class="icon-mobile"> </mat-icon>
   </div>
 </ng-template>
diff --git a/src/app/shared/components/notifications/notifications.component.scss b/src/app/shared/components/notifications/notifications.component.scss
@@ -1,17 +1,27 @@
+.mat-mdc-icon-button.mat-mdc-button-base {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 :host::ng-deep .mat-icon {
-  position: relative;
   overflow: visible;
   font-size: 30px;
-  top: -1px;
 
   @media (min-width: 750px) {
     height: auto;
     width: auto;
   }
 
   .mat-badge-content {
-    right: -20px !important;
-    top: -5px;
+    top: -4px;
+    left: 25px;
     background-color: #f5bc4a;
     width: 25px;
     height: 15px;
@@ -21,18 +31,26 @@
   }
 }
 
-.icon-mobile {
-  top: 8px;
-  margin-left: 73px;
-}
-
 .btn-notifications {
-  margin-left: -8px;
-}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 13px;
+  line-height: normal;
 
-.notifications-icon {
-  margin-left: 5px;
-  margin-right: 15px;
+  .notifications-icon {
+    font-size: 30px;
+    height: 30px;
+    width: 30px;
+    margin: 0 9px 0 0;
+  }
+
+  ::ng-deep {
+    .mat-badge-content {
+      top: 1.5px;
+    }
+  }
 }
 
 .full-width {

diff --git a/src/app/shared/components/paginator/paginator.component.scss b/src/app/shared/components/paginator/paginator.component.scss
@@ -12,6 +12,10 @@
   padding: 1rem;
   min-width: 20px !important;
 
+  .mat-icon {
+    margin: 0;
+  }
+
   &-selected {
     color: #3849f9;
   }

diff --git a/src/app/shared/components/sidenav-menu/sidenav-menu.component.html b/src/app/shared/components/sidenav-menu/sidenav-menu.component.html
@@ -5,12 +5,11 @@
 
     <ng-template #isUnauthorized>
       <div class="mobile-sidenav-header">
-        <button mat-stroked-button class="header_login" (click)="login()">{{ 'LOGIN' | translate }}</button>
-        <button mat-button (click)="changeView()">
+        <button mat-stroked-button class="header-login" (click)="login()">{{ 'LOGIN' | translate }}</button>
+        <button mat-button class="button-close" (click)="changeView()">
           <mat-icon>close</mat-icon>
         </button>
       </div>
-      <ng-container *ngTemplateOutlet="Language"> </ng-container>
     </ng-template>
 
     <ng-template #isAuthorized>
@@ -19,15 +18,15 @@
           <mat-icon>account_circle</mat-icon>
         </button>
         <ng-container>{{ user.firstName }} {{ user.lastName }}</ng-container>
-        <button mat-button (click)="changeView()">
+        <button mat-button class="button-close" (click)="changeView()">
           <mat-icon>close</mat-icon>
         </button>
       </div>
 
       <div class="mobile-sidenav-shell">
         <ng-container *ngTemplateOutlet="Language"> </ng-container>
 
-        <div class="mobile-sidenav-menu" *ngIf="(featuresList$ | async)?.release2">
+        <div class="mobile-sidenav-menu-notification full-width" *ngIf="(featuresList$ | async)?.release2">
           <a [routerLink]="'./notifications'" (click)="changeView()" class="full-width notif">
             <app-notifications class="flex flex-row justify-between content-center items-center"> </app-notifications>
           </a>

diff --git a/src/app/shared/components/sidenav-menu/sidenav-menu.component.scss b/src/app/shared/components/sidenav-menu/sidenav-menu.component.scss
@@ -26,20 +26,24 @@
 }
 
 @media (max-width: 750px) {
-  .header_login {
-    position: relative;
-    bottom: 5px;
-    border-radius: 20px;
+  .mat-mdc-outlined-button.header-login {
+    color: white;
     border-color: white;
+    border-radius: 20px;
+  }
+
+  .mat-mdc-button.button-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     color: white;
-    font-size: 13px;
-    margin-left: 10px;
+  }
 
-    ::ng-deep span.mat-button-wrapper {
-      position: relative;
-      top: 3px;
-      padding: 0 12px;
-    }
+  mat-icon.mat-icon {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+    margin: 0;
   }
 
   .mobile-sidenav {
@@ -85,7 +89,12 @@
     }
 
     &-account {
-      vertical-align: middle;
+      height: 40px;
+      width: 40px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     &-language {
@@ -99,6 +108,11 @@
       flex-direction: column;
       align-items: flex-start;
       padding: 0 1rem;
+
+      &-notification {
+        padding: 0;
+      }
+
       & > a {
         padding: 0.5rem 0;
       }

diff --git a/src/app/shared/modules/material.module.ts b/src/app/shared/modules/material.module.ts
@@ -8,7 +8,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatChipsModule } from '@angular/material/chips';

diff --git a/src/app/shell/details/side-menu/actions/actions.component.scss b/src/app/shell/details/side-menu/actions/actions.component.scss
@@ -1,2 +1,9 @@
 @import 'src/app/shared/styles/buttons.scss';
 @import 'src/app/shared/styles/side-menu-cards.scss';
+
+.mat-icon {
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+  margin: 0 4px 0 0;
+}
diff --git a/src/app/shell/main/main.component.html b/src/app/shell/main/main.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngIf="!(isLoadingData$ | async) && !!settlement">
     <div class="main-header">
       <h3>{{ 'TOP_DIRECTIONS' | translate }}</h3>
-      <a routerLink="/all-categories" class="main_link">
+      <a routerLink="/all-categories" class="main-link">
         {{ isMobile ? ('ALL' | translate) : ('VIEW_ALL' | translate) }} <span class="material-icons arrow">arrow_forward</span>
       </a>
     </div>
@@ -22,16 +22,17 @@ <h3>{{ 'TOP_DIRECTIONS' | translate }}</h3>
 
     <div class="main-header">
       <h3>{{ 'TOP_WORKSHOPS' | translate }}</h3>
-      <a routerLink="/result" class="main_link">
+      <a routerLink="/result" class="main-link">
         {{ isMobile ? ('ALL' | translate) : ('VIEW_ALL' | translate) }} <span class="material-icons arrow">arrow_forward</span>
       </a>
     </div>
 
     <ng-container *ngIf="(topWorkshops$ | async)?.length; then topWorkshops; else emptyData"></ng-container>
   </ng-container>
+
   <ng-template #topWorkshops>
     <div class="card-wrapper">
-      <app-workshop-card class="card" *ngFor="let workshop of topWorkshops$ | async" [workshop]="workshop"> </app-workshop-card>
+      <app-workshop-card class="card" *ngFor="let workshop of topWorkshops$ | async" [workshop]="workshop"></app-workshop-card>
     </div>
   </ng-template>
 
@@ -43,13 +44,13 @@ <h3>{{ 'TOP_WORKSHOPS' | translate }}</h3>
 </div>
 <div
   *ngIf="(role$ | async) === Role.unauthorized"
-  class="main_registration flex flex-row box-border justify-between content-center items-center">
-  <div class="main_description">
-    <h2 class="main_question">{{ 'DO_YOU_PROVIDE_EDUCATIONAL_SERVICES' | translate }}</h2>
-    <h4 class="main_hint">{{ 'SIGN_UP_WE_WILL_HELP_YOU_ATTRACT_NEW_STUDENTS' | translate }}</h4>
+  class="main-registration flex flex-row box-border justify-between content-center items-center">
+  <div class="main-description">
+    <h2 class="main-question">{{ 'DO_YOU_PROVIDE_EDUCATIONAL_SERVICES' | translate }}</h2>
+    <h4 class="main-hint">{{ 'SIGN_UP_WE_WILL_HELP_YOU_ATTRACT_NEW_STUDENTS' | translate }}</h4>
   </div>
-  <div class="main_button-wrapper">
-    <button mat-stroked-button class="main_button" (click)="onRegister()" data-testid="register-button">
+  <div class="main-button-wrapper">
+    <button mat-stroked-button class="main-button" (click)="onRegister()" data-testid="register-button">
       {{ 'SIGN_UP' | translate }}
     </button>
   </div>