diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 17319464dc7f43c96ba2eee06377d4f4e316741f..3bc4b5e713bc41db755ae3d952d72732cf7890d7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,7 +19,7 @@ import { CourseEffects } from '@app/degree-planner/store/effects/course.effects'
import { ErrorEffects } from '@app/degree-planner/store/effects/error.effects';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { CourseDetailsDialogComponent } from './degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
-
+import { FeedbackDialogComponent } from './degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
@NgModule({
imports: [
StoreModule.forRoot({
@@ -44,7 +44,7 @@ import { CourseDetailsDialogComponent } from './degree-planner/dialogs/course-de
}),
],
declarations: [AppComponent, HeaderComponent],
- entryComponents: [CourseDetailsDialogComponent],
+ entryComponents: [CourseDetailsDialogComponent, FeedbackDialogComponent],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/src/app/core/navigation/navigation.component.html b/src/app/core/navigation/navigation.component.html
index b66997118f993a4557264f242797f41cb0284857..00c22408ea066626957f61d8a9394d8ce7ab044a 100644
--- a/src/app/core/navigation/navigation.component.html
+++ b/src/app/core/navigation/navigation.component.html
@@ -1,7 +1,10 @@
-<nav mat-tab-nav-bar fxHide fxShow.gt-sm>
- <a mat-tab-link href="/search">Search</a>
- <a mat-tab-link href="/my-courses">My courses</a>
- <a mat-tab-link href="/scheduler">Scheduler</a>
- <a mat-tab-link class="active" href="/">Degree Planner</a>
- <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
-</nav>
+<div fxLayout="row" fxLayoutAlign="space-between center" class="nav-wrapper" >
+ <nav mat-tab-nav-bar fxHide fxShow.gt-sm>
+ <a mat-tab-link href="/search">Search</a>
+ <a mat-tab-link href="/my-courses">My courses</a>
+ <a mat-tab-link href="/scheduler">Scheduler</a>
+ <a mat-tab-link class="active" href="/">Degree Planner</a>
+ <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
+ </nav>
+ <button class="btn-feedback" (click)="onFeedbackClick()">Feedback</button>
+</div>
diff --git a/src/app/core/navigation/navigation.component.scss b/src/app/core/navigation/navigation.component.scss
index ce59282128f444b002f79c2e206ec530f9778aa5..71497383b8ea6f3651b500223da4cacbbf02f5f9 100644
--- a/src/app/core/navigation/navigation.component.scss
+++ b/src/app/core/navigation/navigation.component.scss
@@ -1,17 +1,39 @@
@import '~@angular/material/theming';
@import 'assets/material-theme.scss';
-.uw-nav-menu .uw-nav-menu-reverse a, .uw-nav-menu .uw-dropdown a {
- cursor: pointer;
+.nav-wrapper {
+ background-color: #dadfe1;
+}
+
+.uw-nav-menu .uw-nav-menu-reverse a,
+.uw-nav-menu .uw-dropdown a {
+ cursor: pointer;
}
.mat-tab-nav-bar {
- background-color: #DADFE1;
- .mat-tab-link {
- opacity: 1;
- min-width: auto;
- }
- .mat-tab-link.active {
- border-bottom: 2px solid map-get($uw-primary, 500);
- }
+ background-color: #dadfe1;
+ .mat-tab-link {
+ opacity: 1;
+ min-width: auto;
+ }
+ .mat-tab-link.active {
+ border-bottom: 2px solid map-get($uw-primary, 500);
+ }
+}
+
+.btn-feedback {
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ min-width: 160px;
+ text-align: center;
+ font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+@media screen and (max-width: 960px) {
+ .btn-feedback {
+ display: none;
+ }
}
diff --git a/src/app/core/navigation/navigation.component.ts b/src/app/core/navigation/navigation.component.ts
index 867333771d4a86f6da599e0beae3c7fb8b3cc563..caac258e142bf49e65171f0a96e944612f7f308f 100644
--- a/src/app/core/navigation/navigation.component.ts
+++ b/src/app/core/navigation/navigation.component.ts
@@ -1,13 +1,18 @@
import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material';
+
+import { FeedbackDialogComponent } from '@app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
@Component({
- selector: 'cse-navigation',
- templateUrl: './navigation.component.html',
- styleUrls: ['./navigation.component.scss']
+ selector: 'cse-navigation',
+ templateUrl: './navigation.component.html',
+ styleUrls: ['./navigation.component.scss'],
})
export class NavigationComponent {
- current = false;
-
- constructor() { }
+ current = false;
+ constructor(public dialog: MatDialog) {}
+ public onFeedbackClick() {
+ this.dialog.open(FeedbackDialogComponent);
+ }
}
diff --git a/src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.html b/src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..3da769e3baaa65180189774bdeea6d78bc1587c2
--- /dev/null
+++ b/src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.html
@@ -0,0 +1,49 @@
+<style>
+ #feedback-content {
+ margin-top: 1.8em;
+ }
+</style>
+
+<mat-toolbar color="primary" class="dialog-toolbar">
+ <h2 class="dialog-toolbar-title">
+ Course Search & Enroll
+ </h2>
+ <button
+ mat-button
+ mat-dialog-close
+ class="close-btn"
+ aria-label="Close feedback dialog"
+ cdkFocusRegionEnd>
+ <i
+ class="material-icons"
+ alt="Close feedback dialog icon"
+ matTooltip="Close feedback dialog"
+ matTooltipPosition="above"
+ >clear</i>
+ </button>
+ </mat-toolbar>
+
+ <mat-dialog-content id="feedback-dialog" class="mat-typography dialog-with-toolbar">
+ <div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
+ <div id="feedback-content">
+ <mat-dialog-content>
+ <p>Tell us what you think about the new all-in-one, integrated home for course search, scheduling, and enrollment.</p>
+ </mat-dialog-content>
+ </div>
+ <mat-dialog-actions align="end">
+ <button
+ mat-button
+ class="btn-secondary"
+ mat-dialog-close
+ aria-label="Close feedback dialog">
+ Close
+ </button>
+ <button
+ mat-raised-button
+ class="btn-primary mat-button"
+ (click)="shareFeedback()">
+ Share Feedback
+ </button>
+ </mat-dialog-actions>
+ </div>
+ </mat-dialog-content>
diff --git a/src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.ts b/src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b600bafc6e6c2c2474a7d528566eef2e75d0313
--- /dev/null
+++ b/src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'cse-feedback-dialog',
+ templateUrl: './feedback-dialog.component.html',
+})
+export class FeedbackDialogComponent {
+ constructor() {}
+
+ shareFeedback() {
+ window.open(
+ 'https://uwmadison.co1.qualtrics.com/jfe/form/SV_cMEHiSdY5OeNFDT',
+ );
+ }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 6c1d6f2aff598ea6c603341e3fe1b60376caa377..66e6697862f703ae59da409dcd84dbdebfcb8e48 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -27,7 +27,7 @@ import { CourseDetailsComponent } from './components/course-details/course-detai
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CourseDetailsDialogComponent } from '../degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
-
+import { FeedbackDialogComponent } from '../degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.component';
import { PromptDialogComponent } from './dialogs/prompt-dialog/prompt-dialog.component';
import { MatProgressSpinnerModule } from '@angular/material';
@@ -76,6 +76,7 @@ const directives = [ClickStopPropagationDirective];
directives,
CourseDetailsComponent,
CourseDetailsDialogComponent,
+ FeedbackDialogComponent,
ConfirmDialogComponent,
PromptDialogComponent,
],