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
• Adding CdkScrollable from the Angular CDK to provide a better UX
• 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.

Add the following input to the MessageListComponent:

activeUser = input.required<AuthUser>();

Modify the <li> in the template to reflect the following:

    <ul class="gradient-bg">
      @for (message of messages(); track message.created){
        <li
          [style.flex-direction]="
            message.author === activeUser()?.email ? 'row-reverse' : 'row'
          "
        >

Now we are using the activeUser value to determine the flex-direction for the item. If the currently authenticated user matches the author of the message we will use row-reverse, otherwise we will use row. This will swap which side of the screen the message is aligned to.

Pass the activeUser into the component:

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

General Styling

Things are generally functional now, but they don’t look good and there are still aspects that make the application awkward to use — the message input bar for example will go off the bottom of the screen if there are too many messages.

We are going to create a custom Angular Material theme for our application now — which will make things look nicer — and we will also add some styling to deal with the message bar situation.

When we first created the application we installed Angular Material and we chose the Custom theme option. If you take a look at your src/styles.scss file you might notice some interesting code like this:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  ));
}/* You can add global styles to this file, and also import other style files */

One of the key aspects we are going to configure here are our “palettes”. You can see we have a primary and tertiary palette by default.

There is some rather advanced customisations you can do with themeing here, but fortunately with Angular Material v3 a basic set up is now much easier than it used to be.

At a basic level, we can just swap out the default configuration with whatever colour palette we want to use.

Modify your src/styles.scss file to reflect the following:

// Custom Theming for Angular Material For more information:
// https://material.angular.io/guide/theming
@use "@angular/material" as mat;

html {
  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$orange-palette,
        tertiary: mat.$blue-palette,
      ),
    )
  );
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

This lays the foundation for a nice colour scheme for our application to use, but we are still going to configure this further. In general, it is a good idea to stick to using a pre-defined palette and reference those values throughout your application, rather than hard coding colours using rgb or hex values throughout the application. This keeps everything much more consistent. What we are going to do is expose some of these Angular Material theme variables as CSS variables so that we can use them throughout the application.

To achieve this, we are going to make some changes to the way we set up our theme.

Modify the theme setup to reflect the following:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use "@angular/material" as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$orange-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

:root {
  --primary-color: #{mat.get-theme-color($theme, primary, 70)};
  --primary-lighter-color: #{mat.get-theme-color($theme, primary, 90)};
  --primary-darker-color: #{mat.get-theme-color($theme, primary, 50)};
  --accent-color: #{mat.get-theme-color($theme, primary, 70)};
  --accent-lighter-color: #{mat.get-theme-color($theme, primary, 90)};
  --accent-darker-color: #{mat.get-theme-color($theme, primary, 50)};
  --white: #ecf0f1;
}

html {
  @include mat.all-component-themes($theme);
}