cleanup and change styles

src/app/app.component.ts

@@ -6,7 +6,6 @@ import { RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [ RouterOutlet ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
 })
 export class AppComponent {
 

src/app/schedule/components/action-panel/action-panel.component.html

@@ -1,5 +1,7 @@
 @if (form) {
     <ng-container [formGroup]="form">
+        <button class="create-button" (click)="createScheduleItem()">Create New</button>
+
         <mat-card class="calendar-card">
             <date-picker formControlName="startDate"></date-picker>
         </mat-card>

src/app/schedule/components/action-panel/action-panel.component.scss

@@ -17,6 +17,25 @@
   box-shadow: none;
 }
 
+.create-button {
+  font-family: Roboto;
+  border: none;
+  background: white;
+  outline: none;
+  padding: 10px;
+  color: #3c4043;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 16px;
+  text-transform: uppercase;
+  box-shadow: var(--box-shadow);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--hovered-background-color);
+  }
+}
+
 .employees-card {
   padding: 0;
 

src/app/schedule/components/action-panel/action-panel.component.ts

@@ -1,6 +1,6 @@
 import {
   ChangeDetectionStrategy,
-  Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild,
+  Component, EventEmitter, OnDestroy, OnInit, Output,
 } from '@angular/core';
 import { MatCard, MatCardHeader } from '@angular/material/card';
 import { MatCalendar, MatCalendarBody } from '@angular/material/datepicker';
@@ -11,6 +11,7 @@ import { EmployeeService } from '../../employee.service';
 import { startWith, Subscription } from 'rxjs';
 import { IActionPanelValue } from './i-action-panel-value';
 import { DatePickerComponent } from '../date-picker/date-picker.component';
+import { MatButton } from '@angular/material/button';
 
 interface IFormValue {
   startDate: Date;
@@ -23,7 +24,6 @@ interface IFormValue {
   styleUrl: './action-panel.component.scss',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-
   imports: [
     MatCard,
     MatCalendar,
@@ -32,7 +32,8 @@ interface IFormValue {
     ReactiveFormsModule,
     MatCardHeader,
     MatCalendarBody,
-    DatePickerComponent
+    DatePickerComponent,
+    MatButton
   ]
 })
 export class ActionPanelComponent implements OnInit, OnDestroy {
@@ -47,7 +48,7 @@ export class ActionPanelComponent implements OnInit, OnDestroy {
   public valueChange: EventEmitter<IActionPanelValue> = new EventEmitter<IActionPanelValue>();
 
   constructor(
-    private employeeService: EmployeeService
+    private employeeService: EmployeeService,
   ) {
   }
 
@@ -87,6 +88,10 @@ export class ActionPanelComponent implements OnInit, OnDestroy {
     this.form?.get('startDate')?.setValue(date);
   }
 
+  public createScheduleItem(): void {
+    alert('create');
+  }
+
   public ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }

src/app/schedule/components/schedule-item/schedule-item.component.html

@@ -16,8 +16,8 @@
   </mat-card>
 }
 <mat-menu #menu="matMenu">
-    <button mat-menu-item>Edit</button>
-    <button mat-menu-item>Delete</button>
+    <button mat-menu-item (click)="editScheduleItem()">Edit</button>
+    <button mat-menu-item (click)="deleteScheduleItem()">Delete</button>
 </mat-menu>
 
 

src/app/schedule/components/schedule-item/schedule-item.component.ts

@@ -37,7 +37,15 @@ export class ScheduleItemComponent {
   public viewModel: IScheduleItem | undefined;
 
   constructor(
-    private elementReference: ElementRef<HTMLElement>
+      private elementReference: ElementRef<HTMLElement>
   ) {
   }
+
+  public editScheduleItem(): void {
+    alert('edit');
+  }
+
+  public deleteScheduleItem(): void {
+    alert('delete');
+  }
 }

src/styles/_material.scss

@@ -1,3 +1,15 @@
+.cdk-overlay-backdrop {
+  background: transparent;
+}
+
+.mdc-dialog {
+
+  .mat-mdc-dialog-surface {
+    box-shadow: var(--box-shadow) !important;
+    border-radius: 8px;
+  }
+}
+
 .mat-calendar {
   --mat-datepicker-calendar-date-selected-state-background-color: var(--blue-color);
   --mat-datepicker-toggle-active-state-icon-color: var(--blue-color);
@@ -51,7 +63,7 @@
 }
 
 .mat-mdc-menu-panel {
-  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12) !important;
+  box-shadow: var(--box-shadow) !important;
   border-radius: 4px !important;
   min-width: 190px !important;
 

src/styles/_colors.scss → src/styles/_variables.scss

@@ -3,4 +3,6 @@
 
   --text-color: #5f6368;
   --hovered-background-color: #5F63680A;
+
+  --box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, 0.3), 0px 1px 3px 1px rgba(60, 64, 67, 0.15);
 }

src/styles/styles.scss

@@ -1,4 +1,4 @@
-@import "colors";
+@import "variables";
 @import "material";
 
 html, body {