Create Feedback dialog

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],

src/app/core/navigation/navigation.component.html

-<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>

src/app/core/navigation/navigation.component.scss

 @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;
+  }
 }

src/app/core/navigation/navigation.component.ts

 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);
+  }
 }

src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.html

+<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>

src/app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component.ts

+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',
+    );
+  }
+}

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,
   ],