Fix carousel

Author: Blari

src/app/shared/header/components/email/email.component.html

@@ -0,0 +1,26 @@
+<button class="email-button" color="primary" mat-mini-fab [matMenuTriggerFor]="email">
+  <mat-icon matBadge="4" matBadgeColor="accent" class="email-button__icon">mail_outline</mat-icon>
+</button>
+<mat-menu #email="matMenu" xPosition="before">
+  <div class="email-menu-header">
+    <h4 class="email-menu-header__title">New Messages</h4>
+    <p class="email-menu-header__subtitle">{{emails.length}} New Messages</p>
+  </div>
+
+  <div *ngFor="let email of emails, let i = index" class="mail-wrapper">
+    <div class="mail-wrapper__icon-wrapper">
+      <button class="mail-wrapper__icon" [ngClass]="colors[i]" mat-mini-fab>{{email.name | shortName}}</button>
+      <span class="mail-wrapper__time">{{email.time}}</span>
+    </div>
+    <div class="mail-content">
+      <span class="mail-content__user">{{email.name}}</span>
+      <span class="mail-content__message">{{email.message}}</span>
+    </div>
+  </div>
+
+  <div class="send-message-button-wrapper">
+    <button class="send-message-button" mat-raised-button color="primary">
+      Send New Message <mat-icon class="send-message-button__icon">send</mat-icon>
+    </button>
+  </div>
+</mat-menu>

src/app/shared/header/components/email/email.component.scss

@@ -0,0 +1,122 @@
+@import 'src/app/styles/colors';
+@import 'src/app/styles/font';
+@import 'src/app/styles/variables';
+
+.email-button {
+  margin-left: 16px;
+
+  &__icon {
+    color: $white-35;
+  }
+
+  @media (max-width: $small) {
+    margin-top: 0;
+  }
+}
+
+.email-menu-header {
+  padding: 16px 16px 0 16px;
+
+  &__title {
+    margin: 0;
+    font-weight: $fw-lighter;
+    font-size: $fs-large;
+    color: $dark-grey;
+  }
+
+  &__subtitle {
+    color: $pink;
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    margin: 4px 0 16px 0;
+  }
+}
+
+.mail-wrapper {
+  cursor: pointer;
+  display: flex;
+  padding: 6px 16px;
+
+  &:hover {
+    background-color: $blue-white;
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__icon {
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    color: $white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    width: 30px;
+    height: 30px;
+  }
+
+  &__time {
+    text-align: center;
+    color: $grey;
+    font-weight: $fw-lighter;
+    font-size: $fs-xs;
+  }
+}
+
+.mail-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-left: 16px;
+  justify-content: space-between;
+
+  &__user {
+    margin-top: 3px;
+    font-weight: $fw-normal;
+    font-size: $fs-small;
+    color: $dark-grey;
+  }
+
+  &__message {
+    color: $grey;
+    font-weight: $fs-small;
+    font-size: $fs-small;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.send-message-button-wrapper {
+  margin: 16px 0;
+  text-align: center;
+
+  .send-message-button {
+    width: 224px;
+    height: 48px;
+    border-radius: 32px;
+
+    &__icon {
+      margin-left: 16px;
+    }
+  }
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.green {
+  background-color: $green;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.ping {
+  background-color: $pink;
+}

src/app/shared/header/components/email/email.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+import { Email } from '../../../../modules/auth/models';
+
+@Component({
+  selector: 'app-email',
+  templateUrl: './email.component.html',
+  styleUrls: ['./email.component.scss']
+})
+export class EmailComponent {
+  @Input() emails: Email[];
+  public colors: string[] = [
+    'yellow',
+    'green',
+    'blue',
+    'ping'
+  ];
+}