WIP add group

src/app/app.module.ts

@@ -57,6 +57,7 @@ import {MatSortModule} from '@angular/material/sort';
 import { SearchComponent } from './components/search/search.component';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
+import {MatDialogModule} from '@angular/material/dialog';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
@@ -132,6 +133,7 @@ const appRoutes: Routes = [
     MatSortModule,
     MatBadgeModule,
     MatProgressSpinnerModule,
+    MatDialogModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/social/friends/friends.component.sass

@@ -20,3 +20,6 @@
 #button-box
   text-align: right
   width: 100%
+
+.mat-toolbar
+  height: 40px

src/app/components/social/groups/groups.component.html

@@ -5,9 +5,9 @@
 </div>-->
 <mat-toolbar>
   <span>Groups</span>
-  <!--<div id="button-box">
-    <button mat-icon-button><mat-icon>group_add</mat-icon></button>
-  </div>-->
+  <div id="button-box">
+    <button mat-icon-button (click)="openDialog()"><mat-icon>group_add</mat-icon></button>
+  </div>
 </mat-toolbar>
 <div id="grouplist">
     <!--<div class="groupitem" *ngFor="let group of groups"

src/app/components/social/groups/groups.component.sass

@@ -19,3 +19,6 @@
 #button-box
   text-align: right
   width: 100%
+
+.mat-toolbar
+  height: 40px

src/app/components/social/groups/groups.component.ts

@@ -1,5 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { GroupInfo } from 'src/app/models/groupinfo';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+export interface DialogData {
+  animal: string;
+  name: string;
+}
 
 @Component({
   selector: 'social-groups',

src/app/components/social/social.component.sass

@@ -16,3 +16,6 @@
 #tabs
   /deep/ .mat-tab-label
     min-width: 50px
+
+/deep/ .mat-toolbar-row
+  max-height: 40px