diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6d92c95..2b9d6a1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { CalendarComponent } from './calendar/calendar.component'; import { AttendanceComponent } from './tabs/more/attendance/attendance.component'; import { ForumComponent } from './reusable-components/forum/forum.component'; import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component'; +import { ConfirmationPopupComponent } from './reusable-components/confirmation-popup/confirmation-popup.component'; @NgModule({ declarations: [ @@ -39,6 +40,7 @@ import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component' AttendanceComponent, ForumComponent, ForumPageComponent, + ConfirmationPopupComponent, ], imports: [ BrowserModule, diff --git a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html new file mode 100644 index 0000000..c93c478 --- /dev/null +++ b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html @@ -0,0 +1,16 @@ +
+
+ +
Delete Media
+
+

+ Are you sure you want to delete this? +

+

+ Note: You can always download it back if you would like to. +

+
+ + +
+
diff --git a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.scss b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.scss new file mode 100644 index 0000000..1c9d848 --- /dev/null +++ b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.scss @@ -0,0 +1,55 @@ +.alert-box { + background-color: var(--ash-black); + border-radius: 5px; + width: 80%; + padding: 15px; + margin: 0 auto; + + header { + display: flex; + align-items: center; + width: 100%; + + .icon { + width: 20px; + height: 20px; + fill: var(--danger); + margin-right: 10px; + } + + h5 { + font-size: 16px; + color: var(--danger); + font-weight: 400; + } + } + + p { + color: var(--light-grey); + font-size: 14px; + margin: 7px auto; + padding-left: 30px; + } + + .action-buttons { + display: flex; + align-items: stretch; + justify-content: flex-end; + margin-top: 15px; + + button { + background-color: transparent; + color: var(--light-grey); + font-size: 14px; + border-radius: 5px; + margin-left: 10px; + border: 0px; + padding: 7px 15px; + + &.confirmation-button { + background-color: var(--dark-grey); + color: var(--danger); + } + } + } +} diff --git a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.spec.ts b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.spec.ts new file mode 100644 index 0000000..b61a715 --- /dev/null +++ b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmationPopupComponent } from './confirmation-popup.component'; + +describe('ConfirmationPopupComponent', () => { + let component: ConfirmationPopupComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfirmationPopupComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmationPopupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts new file mode 100644 index 0000000..d549763 --- /dev/null +++ b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'app-confirmation-popup', + templateUrl: './confirmation-popup.component.html', + styleUrls: ['./confirmation-popup.component.scss'] +}) +export class ConfirmationPopupComponent implements OnInit { + @Output() popupTerminator = new EventEmitter(); + + constructor() { } + + ngOnInit(): void { + } + + closePopup() { + this.popupTerminator.emit(true); + } + +} diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html index 239596b..89b4c39 100644 --- a/src/app/tabs/courses/details/details.component.html +++ b/src/app/tabs/courses/details/details.component.html @@ -46,43 +46,51 @@ @@ -97,47 +105,59 @@ + +
+ +