teams modules

src/app/modules/components/header/header.component.html

@@ -1,5 +1,16 @@
 <header fxLayout="row wrap" fxLayoutAlign="space-between center">
-  <h1 fxFlex.lt-md="100" fxFlex.gt-sm="50">Good morning, Mohamed!</h1>
+  <h1 fxFlex.lt-md="100" fxFlex.gt-sm="20">Good morning, Mohamed!</h1>
+
+  <div
+    fxFlex.lt-md="100"
+    fxFlex.gt-sm="30"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+    class="gap-20 white"
+  >
+    <mat-slide-toggle> <span class="white"> Check In</span></mat-slide-toggle>
+    <mat-slide-toggle><span class="white"> Check Out</span></mat-slide-toggle>
+  </div>
 
   <div
     class="gap-20"

src/app/modules/components/side-nav/side-nav.component.html

@@ -1,6 +1,6 @@
 <nav fxLayout="column" fxLayoutAlign="start center">
   <img src="../../../../assets/images/logo.svg" alt="" title="" />
-  <ul fxLayout="column" fxLayoutAlign="start start" class="gap-10">
+  <ul fxLayout="column" fxLayoutAlign="start start" class="gap-20">
     <li *ngFor="let item of navItems">
       <a
         [routerLink]="item.link"

src/app/modules/components/side-nav/side-nav.component.scss

@@ -14,7 +14,7 @@
         li {
           border-bottom: 1px solid $white-color;
           width: 100%;
-          padding-bottom: 10px;
+          padding-bottom: 20px;
           cursor: pointer;
           &:hover {
             color: $light-blue;

src/app/modules/components/side-nav/side-nav.component.ts

@@ -24,7 +24,7 @@ export class SideNavComponent {
       index: 3,
       name: 'Teams',
       img: '../../../../assets/images/teams.svg',
-      link: '/teams',
+      link: '/modules/teams',
     },
     {
       index: 4,

src/app/modules/dashboard/dashboard-theme.scss

@@ -12,10 +12,8 @@
         background: $card-color;
         box-shadow: -2px 6px 9px #2f2c8333;
         border-radius: 20px;
-        height: 307px;
-        @media (max-width: 767px) {
-          height: inherit;
-        }
+        height: 100%;
+
         &__title {
           background-color: $main-color;
           padding: 10px 20px;
@@ -181,6 +179,7 @@
       width: 100%;
       margin-top: 2rem;
       margin-bottom: 2rem;
+      padding-bottom: 3rem;
       &__main {
         background-color: $main-color;
         padding: 20px;

src/app/modules/dashboard/dashboard.component.html

@@ -1,6 +1,6 @@
 <section class="dashboard" fxLayout="row" fxLayoutAlign="start start">
   <div class="div" fxFlex.lt-md="100" fxFlex.gt-sm="100">
-    <div class="gap-10" fxLayout="row wrap" fxLayoutAlign="start start">
+    <div class="gap-10" fxLayout="row wrap" fxLayoutAlign="start stretch">
       <app-payslip fxFlex.lt-md="100" fxFlex.gt-sm="25"></app-payslip>
       <app-today-meetings
         fxFlex.lt-md="100"

src/app/modules/modules-routing.module.ts

@@ -18,6 +18,11 @@ const routes: Routes = [
           import('./profile/profile.module').then((m) => m.ProfileModule),
       },
       {
+        path: 'teams',
+        loadChildren: () =>
+          import('./teams/teams.module').then((m) => m.TeamsModule),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/app/modules/teams/components/create-team/create-team.component.html

@@ -0,0 +1,29 @@
+<h2 mat-dialog-title class="text-center">Create team</h2>
+<mat-dialog-content class="mat-typography">
+  <form fxLayout="column" fxLayoutAlign="start stretch">
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="100"
+    >
+      <label for="company_name">
+        <span>Team Name <span class="red">*</span></span>
+      </label>
+      <input type="text" id="company_name" placeholder="Company Name" />
+    </div>
+    <mat-form-field appearance="outline" class="mt-3">
+      <mat-label>Assigne</mat-label>
+      <mat-select multiple>
+        <mat-select-trigger> </mat-select-trigger>
+        <mat-option>test</mat-option>
+        <mat-option>test</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Save</button>
+</mat-dialog-actions>

src/app/modules/teams/components/create-team/create-team.component.scss

@@ -0,0 +1,22 @@
+form {
+  width: 450px;
+  .form-input {
+    width: 100%;
+    label {
+      margin-bottom: 5px;
+      font-size: 13px;
+      span {
+        margin: 0 5px;
+      }
+    }
+    input,
+    select {
+      padding: 15px 20px;
+      border-radius: 10px;
+      box-shadow: 0px 5px 6px #2f2c8324;
+      border: 0.5px solid #2e368f;
+      border-radius: 10px;
+      outline: none;
+    }
+  }
+}

src/app/modules/teams/components/create-team/create-team.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTeamComponent } from './create-team.component';
+
+describe('CreateTeamComponent', () => {
+  let component: CreateTeamComponent;
+  let fixture: ComponentFixture<CreateTeamComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateTeamComponent]
+    });
+    fixture = TestBed.createComponent(CreateTeamComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/components/create-team/create-team.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-create-team',
+  templateUrl: './create-team.component.html',
+  styleUrls: ['./create-team.component.scss'],
+})
+export class CreateTeamComponent {
+  constructor(public readonly dialog: MatDialog) {}
+}

src/app/modules/teams/components/team-info-header/team-info-header.component.html

@@ -0,0 +1,22 @@
+<section
+  class="teams-filter"
+  fxLayout="row"
+  fxLayoutAlign="space-between center"
+>
+  <h1
+    fxLayout="row"
+    fxLayoutAlign="start center"
+    class="gap-10 ptr"
+    (click)="onBack()"
+  >
+    <img src="../../../../../assets/images/teams.svg" alt="" title="" />
+    <span class="bold">Marketing Team Information</span>
+  </h1>
+  <div
+    class="teams-filter__filter gap-20"
+    fxLayout="row"
+    fxLayoutAlign="end center"
+  >
+    <button class="team-setting">Team Setting</button>
+  </div>
+</section>

src/app/modules/teams/components/team-info-header/team-info-header.component.scss

@@ -0,0 +1 @@
+

src/app/modules/teams/components/team-info-header/team-info-header.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamInfoHeaderComponent } from './team-info-header.component';
+
+describe('TeamInfoHeaderComponent', () => {
+  let component: TeamInfoHeaderComponent;
+  let fixture: ComponentFixture<TeamInfoHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TeamInfoHeaderComponent]
+    });
+    fixture = TestBed.createComponent(TeamInfoHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/components/team-info-header/team-info-header.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-team-info-header',
+  templateUrl: './team-info-header.component.html',
+  styleUrls: ['./team-info-header.component.scss'],
+})
+export class TeamInfoHeaderComponent {
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+
+  onBack(): void {
+    this.router.navigate(['../'], { relativeTo: this.route });
+  }
+}

src/app/modules/teams/components/teams-filter/teams-filter.component.html

@@ -0,0 +1,20 @@
+<section
+  class="teams-filter"
+  fxLayout="row"
+  fxLayoutAlign="space-between center"
+>
+  <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-10">
+    <img src="../../../../../assets/images/teams.svg" alt="" title="" />
+    <span class="bold">Teams</span>
+  </h1>
+  <div
+    class="teams-filter__filter gap-20"
+    fxLayout="row"
+    fxLayoutAlign="end center"
+  >
+    <button (click)="onCreateTeam()">+ Create New Team</button>
+    <select>
+      <option>All</option>
+    </select>
+  </div>
+</section>

src/app/modules/teams/components/teams-filter/teams-filter.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamsFilterComponent } from './teams-filter.component';
+
+describe('TeamsFilterComponent', () => {
+  let component: TeamsFilterComponent;
+  let fixture: ComponentFixture<TeamsFilterComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TeamsFilterComponent]
+    });
+    fixture = TestBed.createComponent(TeamsFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/components/teams-filter/teams-filter.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CreateTeamComponent } from '../create-team/create-team.component';
+
+@Component({
+  selector: 'app-teams-filter',
+  templateUrl: './teams-filter.component.html',
+  styleUrls: ['./teams-filter.component.scss'],
+})
+export class TeamsFilterComponent {
+  constructor(public readonly dialog: MatDialog) {}
+
+  onCreateTeam(): void {
+    const dialogRef = this.dialog.open(CreateTeamComponent);
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
+}

src/app/modules/teams/list/item/item.component.html

@@ -0,0 +1,10 @@
+<section
+  class="team-card gap-20"
+  fxLayout="column"
+  fxLayoutAlign="center center"
+  (click)="onTeamInfo()"
+>
+  <img src="" alt="" title="" />
+  <h2 class="bold">Marketing Team</h2>
+  <p class="bold">Members : 25</p>
+</section>

src/app/modules/teams/list/item/item.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemComponent } from './item.component';
+
+describe('ItemComponent', () => {
+  let component: ItemComponent;
+  let fixture: ComponentFixture<ItemComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ItemComponent]
+    });
+    fixture = TestBed.createComponent(ItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/list/item/item.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.scss'],
+})
+export class ItemComponent {
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+  onTeamInfo(): void {
+    this.router.navigate(['./info'], { relativeTo: this.route });
+  }
+}

src/app/modules/teams/list/list.component.html

@@ -0,0 +1,17 @@
+<section class="teams-list" fxLayout="column" fxLayoutAlign="start stretch">
+  <app-teams-filter></app-teams-filter>
+  <div
+    class="teams-list__items gap-20"
+    fxLayout="row wrap"
+    fxLayoutAlign="center start"
+  >
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+    <app-item fxFlex.lt-md="50" fxFlex.gt-sm="22"></app-item>
+  </div>
+</section>

src/app/modules/teams/list/list.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListComponent]
+    });
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/list/list.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent {
+
+}

src/app/modules/teams/team-info/team-info-card/team-info-card.component.html

@@ -0,0 +1,6 @@
+<section class="team-info-card" fxLayout="column" fxLayoutAlign="start start">
+  <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+  <h2>George Tarielashvili</h2>
+  <span>Senior UI/UX Designer</span>
+  <span>User@gmail.com</span>
+</section>

src/app/modules/teams/team-info/team-info-card/team-info-card.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamInfoCardComponent } from './team-info-card.component';
+
+describe('TeamInfoCardComponent', () => {
+  let component: TeamInfoCardComponent;
+  let fixture: ComponentFixture<TeamInfoCardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TeamInfoCardComponent]
+    });
+    fixture = TestBed.createComponent(TeamInfoCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/team-info/team-info-card/team-info-card.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-team-info-card',
+  templateUrl: './team-info-card.component.html',
+  styleUrls: ['./team-info-card.component.scss'],
+})
+export class TeamInfoCardComponent {}

src/app/modules/teams/team-info/team-info.component.html

@@ -0,0 +1,41 @@
+<section class="teams-list" fxLayout="column" fxLayoutAlign="start stretch">
+  <app-team-info-header></app-team-info-header>
+  <div
+    class="teams-list__items gap-20"
+    fxLayout="row wrap"
+    fxLayoutAlign="center start"
+  >
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+    <app-team-info-card
+      fxFlex.lt-md="50"
+      fxFlex.gt-sm="22"
+    ></app-team-info-card>
+  </div>
+</section>

src/app/modules/teams/team-info/team-info.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamInfoComponent } from './team-info.component';
+
+describe('TeamInfoComponent', () => {
+  let component: TeamInfoComponent;
+  let fixture: ComponentFixture<TeamInfoComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TeamInfoComponent]
+    });
+    fixture = TestBed.createComponent(TeamInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/team-info/team-info.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-team-info',
+  templateUrl: './team-info.component.html',
+  styleUrls: ['./team-info.component.scss']
+})
+export class TeamInfoComponent {
+
+}

src/app/modules/teams/teams-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TeamsComponent } from './teams.component';
+import { ListComponent } from './list/list.component';
+import { TeamInfoComponent } from './team-info/team-info.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TeamsComponent,
+    children: [
+      { path: '', component: ListComponent },
+      { path: 'info', component: TeamInfoComponent },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TeamsRoutingModule {}

src/app/modules/teams/teams.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/modules/teams/teams.component.scss

@@ -0,0 +1,87 @@
+@mixin teams-theme() {
+  app-teams {
+    .teams-list {
+      width: 100%;
+      height: 100%;
+      background-color: $off-white;
+      border-radius: 20px;
+      margin: 2rem 0;
+
+      .teams-filter {
+        width: 100%;
+        padding: 20px;
+        padding-bottom: 40px;
+        h1 {
+          color: $main-color;
+          font-weight: bold;
+          font-size: 25px;
+        }
+        &__filter {
+          button {
+            background-color: #009fe33f;
+            border: 1px dashed $main-color;
+            padding: 10px 20px;
+            border-radius: 10px;
+            color: $main-color;
+            font-weight: bold;
+            font-size: 16px;
+            cursor: pointer;
+          }
+          select {
+            background-color: #2f2c8333;
+            border: 1px solid #2f2c8333;
+            padding: 10px 30px;
+            border-radius: 10px;
+          }
+        }
+        .team-setting {
+          /* UI Properties */
+          background: #2f2c830d;
+          box-shadow: -2px 6px 9px #2f2c8333;
+          border-radius: 10px;
+          opacity: 1;
+          border: none;
+        }
+      }
+
+      .team-card,
+      .team-info-card {
+        padding: 40px 20px;
+        width: 100%;
+        border-radius: 20px;
+        background: $white-color;
+        box-shadow: -2px 6px 9px #2f2c8333;
+        margin-bottom: 8px;
+        h2 {
+          color: $main-color;
+          font-size: 20px;
+        }
+        p {
+          padding: 15px 20px;
+          border-radius: 12px;
+          background-color: $light-blue;
+          color: $white-color;
+        }
+      }
+
+      .team-info-card {
+        img {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          margin-bottom: 10px;
+        }
+
+        h2 {
+          color: #4b5155;
+          font-size: 18px;
+        }
+
+        span {
+          color: $span-color;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+}

src/app/modules/teams/teams.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamsComponent } from './teams.component';
+
+describe('TeamsComponent', () => {
+  let component: TeamsComponent;
+  let fixture: ComponentFixture<TeamsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TeamsComponent]
+    });
+    fixture = TestBed.createComponent(TeamsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/teams/teams.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-teams',
+  templateUrl: './teams.component.html',
+  styleUrls: ['./teams.component.scss']
+})
+export class TeamsComponent {
+
+}

src/app/modules/teams/teams.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TeamsRoutingModule } from './teams-routing.module';
+import { TeamsComponent } from './teams.component';
+import { ListComponent } from './list/list.component';
+import { ItemComponent } from './list/item/item.component';
+import { TeamsFilterComponent } from './components/teams-filter/teams-filter.component';
+import { SharedModule } from '@shared/shared.module';
+import { TeamInfoComponent } from './team-info/team-info.component';
+import { TeamInfoHeaderComponent } from './components/team-info-header/team-info-header.component';
+import { TeamInfoCardComponent } from './team-info/team-info-card/team-info-card.component';
+import { CreateTeamComponent } from './components/create-team/create-team.component';
+
+@NgModule({
+  declarations: [
+    TeamsComponent,
+    ListComponent,
+    ItemComponent,
+    TeamsFilterComponent,
+    TeamInfoComponent,
+    TeamInfoHeaderComponent,
+    TeamInfoCardComponent,
+    CreateTeamComponent,
+  ],
+  imports: [CommonModule, TeamsRoutingModule, SharedModule],
+})
+export class TeamsModule {}

src/app/shared/shared.module.ts

@@ -4,7 +4,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-// import { ErrorStateMatcher } from '@angular/material/core';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxOtpInputModule } from 'ngx-otp-input';
@@ -21,6 +20,8 @@ import { MatNativeDateModule } from '@angular/material/core';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatDialogModule } from '@angular/material/dialog';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -33,13 +34,15 @@ const MATERIAL_MODULES = [
   MatSidenavModule,
   MatMenuModule,
   MatRadioModule,
-  // ErrorStateMatcher,
   MatChipsModule,
   MatCardModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatSelectModule,
   MatSliderModule,
+  MatSlideToggleModule,
+  MatButtonModule,
+  MatDialogModule,
 ];
 
 const COMPONENTS = [WarningComponent, FileUploadComponent];

src/assets/scss/variables.scss

@@ -80,6 +80,7 @@ $span-color: #707070;
 @import "../../app//modules/components/header/header.component.scss";
 @import "../../app/modules/dashboard//dashboard-theme.scss";
 @import "../../app/modules/profile/profile-theme.scss";
+@import "../../app/modules/teams/teams.component.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -92,6 +93,7 @@ $span-color: #707070;
   @include main-header();
   @include dashboard-theme();
   @include profile-theme();
+  @include teams-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -203,3 +203,10 @@ input.mat-input-element {
 .border-0 {
   border: 0 !important;
 }
+.white {
+  color: #fff !important;
+}
+
+.text-center {
+  text-align: center;
+}