Styling and Refinements

We just have a few things to finish up in this lesson to polish off the application, these are:

• Supplying the active user as an input to the message list component so we can provide different styles for the users own messages
• The ability to log out
• General styling

Let’s get into it!

Active User Input

Add the following input to the MessageListComponent:

@Input() activeUser!: User;

NOTE: The User type should be imported from here:

import { User } from '@angular/fire/auth';

Modify the ion-avatar in the template to reflect the following:

        <ion-avatar
          *ngIf="activeUser"
          [slot]="message.author === activeUser.email ? 'start' : 'end'"
          class="animate-in-primary"
        >
          <img
            *ngIf="message.author"
            src="https://avatars.dicebear.com/api/bottts/{{
              message.author.split('@')[0]
            }}.svg"
          />
        </ion-avatar>

Now we are using the activeUser value to determine the slot position for the avatar. If the currently authenticated user matches the author of the message we will use the start slot, otherwise we will use the end slot.

Log Out Functionality

Add the following effect to the HomeStore:

  logout = this.effect(($) =>
    $.pipe(
      switchMap(() =>
        this.authService.logout().pipe(
          tapResponse(
            () => this.navCtrl.navigateRoot('/login'),
            (err) => console.log(err)
          )
        )
      )
    )
  );

Modify the header in the HomeComponent to reflect the following:

      <ion-header class="ion-no-border">
        <ion-toolbar color="primary">
          <ion-title>
            <img src="assets/images/logo.png" />
          </ion-title>
          <ion-buttons slot="start">
            <ion-button (click)="store.logout()">
              <ion-icon name="log-out-outline" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

General Styling

Now we have just a few final style configurations to make.

Add the following styles to the HomeComponent:

      ion-content {
        --ion-background-color: var(--ion-color-primary);
      }

      ion-title img {
        max-height: 39px;
        margin-top: 9px;
        filter: drop-shadow(2px 4px 6px var(--ion-color-primary-shade));
      }

Add the following styles to src/global.scss: