Styling and Refinements

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 user’s own messages
• Automatic scroll to bottom
• General styling

Let’s get into it!

Active User Input

If you create a second account and add some more messages to the chat, you will notice that all of the messages have the same styling. Typically in a chat application you would have the users own messages appear on a different side of the screen.

Action

Add the following input to the MessageListComponent:

activeUser = input.required<AuthUser>();

Action

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

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

Now we are using the activeUser value to determine the slot for the avatar.

Action

Pass the activeUser into the component:

      <app-message-list
        [messages]="messageService.messages()"
        [activeUser]="authService.user()"
      />

Add Automatic Scrolling

If we add a message, and there are already enough messages to fill the screen, we can’t actually see it until we manually scroll down. Also, if we log into the application we will be seeing the oldest messages at the top of the page until we manually scroll to the bottom.

To fix this, we will use one of the methods available on ion-content components.

The idea is that we will call the scrollTo method on the scrollContainer whenever our message list changes. This will cause the container to scroll to the bottom.

Action

Add the following effect to the HomeComponent:

  scrollContainer = viewChild.required(IonContent);

  constructor() {
    addIcons({ logOutOutline });

    effect(() => {
      if (this.messageService.messages().length && this.scrollContainer()) {
        this.scrollContainer().scrollToBottom(200);
      }
    });

    effect(() => {
      if (!this.authService.user()) {
        this.router.navigate(['auth', 'login']);
      }
    });
  }

General Styling

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

Action

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));
      }