updated auth page, refactored code and fixed chat

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.0.9] - 09/27/2021
+### Updated
+
+- Updated auth page;
+- Refactored code, fixed chat;
+
 ## [1.0.8] - 09/14/2021
 ### Updated
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-admin",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/modules/auth/containers/auth-page/auth-page.component.html

@@ -1,51 +1,51 @@
 <div class="auth-page">
-  <div class="auth-page__content-block">
-    <div class="auth-page__content-wrapper">
-      <mat-tab-group class="auth-page__group" mat-stretch-tabs>
+  <div class="content-block">
+    <div class="content-wrapper">
+      <mat-tab-group class="group" mat-stretch-tabs>
         <mat-tab label="Login">
-          <h4 class="auth-page__group-title">Good Morning, User</h4>
-          <div class="auth-page__google-button-wrapper">
-            <button (click)="googleLogin()" mat-raised-button class="auth-page__google-button">
-              <img class="auth-page__google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
+          <h4 class="group-title">Good Morning, User</h4>
+          <div class="google-button-wrapper">
+            <button (click)="googleLogin()" mat-raised-button class="google-button">
+              <img class="google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
             </button>
           </div>
 
-          <div class="auth-page__border-wrapper">
-            <div class="auth-page__border-line"></div>
-            <p class="auth-page__border-title">or</p>
-            <div class="auth-page__border-line"></div>
+          <div class="border-wrapper">
+            <div class="border-line"></div>
+            <p class="border-title">or</p>
+            <div class="border-line"></div>
           </div>
 
           <app-login-form (sendLoginForm)="sendLoginForm($event)"></app-login-form>
 
         </mat-tab>
         <mat-tab label="New User">
-          <h4 class="auth-page__group-title">Welcome!</h4>
-          <p class="auth-page__group-sub-title">Create your account</p>
+          <h4 class="group-title">Welcome!</h4>
+          <p class="group-sub-title">Create your account</p>
 
           <app-sign-form (sendSignForm)="sendSignForm($event)"></app-sign-form>
 
-          <div class="auth-page__border-wrapper">
-            <div class="auth-page__border-line"></div>
-            <p class="auth-page__border-title">or</p>
-            <div class="auth-page__border-line"></div>
+          <div class="border-wrapper">
+            <div class="border-line"></div>
+            <p class="border-title">or</p>
+            <div class="border-line"></div>
           </div>
 
-          <div class="auth-page__google-button-wrapper">
-            <button (click)="googleLogin()" mat-raised-button class="auth-page__google-button">
-              <img class="auth-page__google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
+          <div class="google-button-wrapper">
+            <button (click)="googleLogin()" mat-raised-button class="google-button">
+              <img class="google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
             </button>
           </div>
         </mat-tab>
       </mat-tab-group>
 
-      <p class="auth-page__footer-title">© 2014-{{todayDate | year}} <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.</p>
+      <p class="footer-title">© 2014-{{todayDate | year}} <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.</p>
     </div>
   </div>
-  <div class="auth-page__logo">
-    <div class="auth-page__logo-wrapper">
-      <img class="auth-page__logo-img" src="./assets/auth/logo.svg" alt="logo">
-      <h6 class="auth-page__logo-title">Material Admin</h6>
+  <div class="logo">
+    <div class="logo-wrapper">
+      <img class="logo-img" src="./assets/auth/logo.svg" alt="logo">
+      <h6 class="logo-title">Material Admin</h6>
     </div>
   </div>
 </div>

src/app/modules/auth/containers/auth-page/auth-page.component.scss

@@ -7,12 +7,16 @@
   height: 100%;
   display: flex;
 
+  .mat-tab-label {
+    font-size: $fs-medium;
+  }
+
   @media (max-width: $medium) {
     flex-direction: column;
   }
 
-  &__content-block {
-    width: 37%;
+  .content-block {
+    width: 40%;
     height: 100%;
     background-color: $white;
     display: flex;
@@ -24,8 +28,8 @@
     }
   }
 
-  &__content-wrapper {
-    width: 45%;
+  .content-wrapper {
+    width: 55%;
     height: 100%;
     padding: 16px;
     display: flex;
@@ -41,21 +45,21 @@
     }
   }
 
-  &__group {
+  .group {
     margin-top: 28px;
   }
 
-  &__group-title {
-    font-size: 32px;
+  .group-title {
+    font-size: 3rem;
     font-weight: $fw-normal;
     margin-top: 37px;
-    letter-spacing: -0.7px;
     text-align: center;
-    line-height: 37px;
+    line-height: 3.125rem;
+    letter-spacing: normal;
     color: $dark-grey;
   }
 
-  &__group-sub-title {
+  .group-sub-title {
     font-size: $fs-large;
     font-weight: $fw-normal;
     margin-bottom: 30px;
@@ -65,7 +69,7 @@
     color: $dark-grey;
   }
 
-  &__google-button-wrapper {
+  .google-button-wrapper {
     margin-top: 32px;
     margin-bottom: 10px;
     width: 100%;
@@ -74,40 +78,42 @@
     align-items: center;
   }
 
-  &__google-button {
+  .google-button {
     width: 95%;
     padding: 0;
+    font-size: .875rem;
     background-color: $white;
     box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
   }
 
-  &__google-button-icon {
+  .google-button-icon {
     width: 20px;
     margin-right: 16px;
   }
 
-  &__border-wrapper {
+  .border-wrapper {
     align-items: center;
     display: flex;
     justify-content: center;
     margin: 32px 0;
   }
 
-  &__border-line {
+  .border-line {
     height: 1px;
     width: 100%;
     background-color: $light-grey;
     opacity: 0.3;
   }
 
-  &__border-title {
-    font-size: $fs-xs;
+  .border-title {
+    font-size: $fs-small;
+    font-family: Roboto,Helvetica,Arial,sans-serif;
     padding: 0 16px;
     margin: 0;
-    color: $dark-grey
+    color: black;
   }
 
-  &__logo {
+  .logo {
     width: 63%;
     height: 100%;
     background-color: $blue;
@@ -119,27 +125,27 @@
     }
   }
 
-  &__logo-wrapper {
+  .logo-wrapper {
     width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
   }
 
-  &__logo-img {
+  .logo-img {
     margin-bottom: 50px;
   }
 
-  &__logo-title {
+  .logo-title {
     font-size: 62px;
     color: $white;
     font-weight: 500;
     letter-spacing: -1.5px;
     line-height: 62px;
   }
 
-  &__footer-title {
+  .footer-title {
     color: $blue;
     font-size: 10px;
     opacity: 0.7;

src/app/modules/auth/containers/auth-page/auth-page.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { AuthService } from '../../services';
@@ -7,7 +7,8 @@ import { routes } from '../../../../consts';
 @Component({
   selector: 'app-auth-page',
   templateUrl: './auth-page.component.html',
-  styleUrls: ['./auth-page.component.scss']
+  styleUrls: ['./auth-page.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AuthPageComponent {
   public todayDate: Date = new Date();
@@ -17,7 +18,7 @@ export class AuthPageComponent {
               private route: ActivatedRoute,
               private router: Router) {
     if (this.authService.isAuthenticated()) {
-      this.authService.receiveLogin();
+      this.authService.logoutUser();
     }
 
     this.route.queryParams.subscribe((params) => {

src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts

@@ -60,45 +60,37 @@ export class DailyLineChartComponent implements OnInit, OnChanges, AfterViewInit
 
   public ngOnChanges(changes: SimpleChanges): void {
     if (changes.currentTheme && changes.currentTheme.currentValue && this.chartObj) {
-      this.chartObj.updateOptions({
-        colors: [
-          this.currentTheme === 'blue'
-          ? colors.BLUE
-          : this.currentTheme === 'green'
-            ? colors.GREEN
-            : colors.PINK,
-          this.currentMode === 'dark'
-          ? colors.DARK_BLUE
-          : colors.LIGHT_BLUE,
-          colors.YELLOW
-        ]
-      })
+      this.updateChartOptions();
     }
-
     if (changes.currentMode && changes.currentMode.currentValue && this.chartObj) {
-      this.chartObj.updateOptions({
-        colors: [
-          this.currentTheme === 'blue'
-            ? colors.BLUE
-            : this.currentTheme === 'green'
-            ? colors.GREEN
-            : colors.PINK,
-          this.currentMode === 'dark'
-            ? colors.DARK_BLUE
-            : colors.LIGHT_BLUE,
-          colors.YELLOW
-        ]
-      })
+      this.updateChartOptions();
     }
   }
 
   public ngAfterViewInit() {
     this.chartObj = new ApexCharts(
       this.chart.nativeElement,
       this.chartOptions
-    )
+    );
 
     this.chartObj.render();
+    this.updateChartOptions();
+  }
+
+  private updateChartOptions(): void {
+    this.chartObj.updateOptions({
+      colors: [
+        this.currentTheme === 'blue'
+          ? colors.BLUE
+          : this.currentTheme === 'green'
+          ? colors.GREEN
+          : colors.PINK,
+        this.currentMode === 'dark'
+          ? colors.DARK_BLUE
+          : colors.LIGHT_BLUE,
+        colors.YELLOW
+      ]
+    });
   }
 
   public initChart(data: TimeData, labels: string[]): void {

src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.scss

@@ -29,11 +29,10 @@
   &__content {
     display: flex;
     align-items: center;
-    justify-content: space-between;
 
     &-chart {
       height: 140px;
-      width: 50%;
+      width: 60%;
       max-width: 218px
     }
   }

src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.html

@@ -5,13 +5,13 @@
     <mat-card-title>
       <p>Badge Example</p>
     </mat-card-title>
-    <mat-card-subtitle>
+    <mat-card-subtitle class="subtitle">
       <p>Badge generates a small badge to the top-right of its child(ren)</p>
     </mat-card-subtitle>
 
     <mat-card-content>
-      <h1 class="text h1" matBadge="Primary" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
-      <h2 class="text" matBadge="Accent" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
+      <h1 class="text h1" matBadge="Primary" matBadgePosition="above after" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
+      <h2 class="text" matBadge="Accent" matBadgePosition="after" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
       <h3 class="text" matBadge="Warn" matBadgeOverlap="false" matBadgeColor="warn">Example heading</h3>
       <h4 class="text" matBadge="Info" matBadgeOverlap="false" matBadgeColor="info">Example heading</h4>
       <h5 class="text" matBadge="Success" matBadgeOverlap="false" matBadgeColor="success">Example heading</h5>

src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.scss

@@ -14,12 +14,21 @@
   width: 50%;
   margin-right: 18px;
 
+  .subtitle {
+    margin-bottom: 22px;
+  }
+
   @media (max-width: $small) {
     width: 100%;
     margin-right: 0;
   }
 }
 
+.mat-badge-medium.mat-badge-above .mat-badge-content {
+  margin-right: -21px;
+  top: -20px;
+}
+
 .second-subtitle {
   padding-top: 24px;
 }
@@ -55,7 +64,8 @@
   width: 100%;
 
   & span.mat-badge-content {
-    right: -22px;
+    margin-right: -10px !important;
+    top: -12px !important;
     padding: 0;
     width: 22px;
     height: 22px;