@import '~../../styles/_color.scss';

:host {
  cursor: pointer;
  &.new {
    color: red;
  }
}

h3 {
  margin-bottom: 0;
  margin-top: 0;
}

.body {
  .sending {
    display: flex;
    mat-form-field {
      flex: 1;
    }
    button {
      margin-left: 10px;
    }
  }
}

.messages-container {
  max-height: 300px;
  overflow: auto;
}
.messages {
  display: flex;
  flex-direction: column;
}

.message {
  &:not(:first-child) {
    margin-top: 10px;
  }
  .login {
    font-weight: bold;
    color: $dark_purple;
  }
  .time {
    color: $dark_purple;
    font-style: italic;
  }
  .text {
    padding-left: 20px;
  }
}

@import '~../../styles/_color.scss';

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(0);
  }
}

:host {
  cursor: pointer;
  &.new {
    mat-icon {
      color: red;
      animation: bounce 1s ease infinite;
    }
  }
}

h3 {
  margin-bottom: 0;
  margin-top: 0;
}

.body {
  .sending {
    display: flex;
    mat-form-field {
      flex: 1;
    }
    button {
      margin-left: 10px;
    }
  }
}

.messages-container {
  max-height: 300px;
  overflow: auto;
}
.messages {
  display: flex;
  flex-direction: column;
}

.message {
  &:not(:first-child) {
    margin-top: 10px;
  }
  .login {
    font-weight: bold;
    color: $dark_purple;
  }
  .time {
    color: $dark_purple;
    font-style: italic;
  }
  .text {
    padding-left: 20px;
  }
}

Add animation on new message
Add animation on new message
