ROENROLL-1396

src/app/degree-planner/degree-planner.component.ts

+import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confirm-dialog.component';
 import {
   filter,
   map,
@@ -138,10 +139,15 @@ export class DegreePlannerComponent implements OnInit {
   public onMakePrimayClick(_currentPlan: DegreePlan) {
     const data: DialogMode = { mode: 'makePrimary' };
     this.dialog
-      .open(ModifyPlanDialogComponent, { data })
+      .open(ConfirmDialogComponent, {
+        data: {
+          text:
+            "This will change your primary plan and replace the current courses in your cart with the courses in this plan's term.",
+        },
+      })
       .afterClosed()
-      .subscribe((result: { areYouSure: true } | undefined) => {
-        if (result !== undefined && result.areYouSure === true) {
+      .subscribe((result: { confirmed: true } | undefined) => {
+        if (result !== undefined && result.confirmed === true) {
           const action = new MakePlanPrimary();
           this.store.dispatch(action);
         }
@@ -156,11 +162,16 @@ export class DegreePlannerComponent implements OnInit {
 
     const data: DialogMode = { mode: 'delete', name: currentPlan.name };
     this.dialog
-      .open(ModifyPlanDialogComponent, { data })
+      .open(ConfirmDialogComponent, {
+        data: {
+          text:
+            'This will delete this plan and course information related to this plan.',
+        },
+      })
       .afterClosed()
       .pipe(withLatestFrom(this.store))
       .subscribe(([result, state]) => {
-        if (typeof result === 'object' && result.areYouSure === true) {
+        if (result.confirmed) {
           const { roadmapId } = currentPlan;
           const deleteAction = new DeletePlan({ roadmapId });
           this.store.dispatch(deleteAction);

src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html

@@ -7,8 +7,6 @@
 
 <mat-toolbar color="primary" class="dialog-toolbar">
   <span class="dialog-toolbar-title" [ngSwitch]="data.mode">
-    <span *ngSwitchCase="'makePrimary'">Set as the primary plan</span>
-    <span *ngSwitchCase="'delete'">Delete plan</span>
     <span *ngSwitchCase="'rename'">Rename plan</span>
     <span *ngSwitchCase="'create'">Create plan</span>
   </span>
@@ -19,16 +17,10 @@
 
 <mat-dialog-content class="mat-typography dialog-with-toolbar">
   <ng-container [ngSwitch]="data.mode">
-    <div class="delete-plan-content" *ngSwitchCase="'delete'">
-      <mat-dialog-content>
-        <p>Are you sure you want to delete the degree plan named <strong>{{data.name}}</strong>?</p>
-      </mat-dialog-content>
-    </div>
-
     <div class="rename-plan-content" *ngSwitchCase="'rename'">
       <mat-dialog-content [formGroup]="form">
         <mat-form-field class="form-field-stretch">
-          <input matInput placeholder="Name" formControlName="planName">
+          <input matInput placeholder="Name" formControlName="planName" cdkFocusInitial>
         </mat-form-field>
       </mat-dialog-content>
     </div>
@@ -36,21 +28,17 @@
     <div class="create-plan-content" *ngSwitchCase="'create'">
       <mat-dialog-content [formGroup]="form">
         <mat-form-field class="form-field-stretch">
-          <input matInput placeholder="Name" formControlName="planName">
+          <input matInput placeholder="Name" formControlName="planName" cdkFocusInitial>
         </mat-form-field>
       </mat-dialog-content>
     </div>
   </ng-container>
 
   <mat-dialog-actions align="end">
-    <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close note dialog" (click)="onCancel()">
-      Cancel
-    </button>
+    <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close dialog" (click)="onCancel()">Cancel</button>
 
     <button mat-rasied-button class="btn-primary mat-button" [disabled]="form.invalid" (click)="onSubmit()">
       <ng-container [ngSwitch]="data.mode">
-        <span *ngSwitchCase="'makePrimary'">Set as the primary plan</span>
-        <span *ngSwitchCase="'delete'">Delete this plan</span>
         <span *ngSwitchCase="'rename'">Rename plan</span>
         <span *ngSwitchCase="'create'">Create plan</span>
       </ng-container>

src/app/degree-planner/shared/course-item/course-item.component.ts

@@ -222,6 +222,7 @@ export class CourseItemComponent implements OnInit {
       .getCourseDetails(course.subjectCode, course.courseId)
       .subscribe(courseDetails => {
         const dialogRef = this.dialog.open(CourseDetailsDialogComponent, {
+          maxWidth: '800px',
           data: { courseDetails: courseDetails },
         });
       });

src/app/degree-planner/term-container/term-container.component.html

@@ -2,7 +2,7 @@
   <div class="term-inner">
     <div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
       <h2>{{ termCode | getTermDescription }}</h2>
-      <div fxLayout="row" fxLayoutAlign="end center">
+      <div fxLayout="row" fxLayoutAlign="space-between center">
         <p class="text-right semi-bold credits">{{ credits$ | async }} Cr</p>
         <button mat-icon-button>
           <ng-container *ngIf="(note$ | async) as note; else newNote">
@@ -28,9 +28,7 @@
          </button>
       </div>
     </div>
-    <div
-      id="term-{{termCode}}"
-      cdkDropList
+    <div id="term-{{termCode}}" class="term-body" cdkDropList
       [cdkDropListData]="(term$ | async).termCode"
       [cdkDropListConnectedTo]="dropZoneIds$ | async"
       (cdkDropListDropped)="drop($event)">
@@ -44,9 +42,7 @@
       </ng-container>
 
       <!-- Render list of courses in this term -->
-      <div
-        class="course-wrapper"
-        *ngFor="let course of courses$ | async"
+      <div class="course-wrapper" *ngFor="let course of courses$ | async"
         cdkDrag
         [cdkDragDisabled]="(isPastTerm$ | async) || course.id === null"
         [cdkDragData]="course">

src/app/degree-planner/term-container/term-container.component.scss

 @import 'assets/material-theme.scss';
 
 .term-container {
+  height: 100%;
   background-color: #eef1f3;
   padding: 0;
+  transition: all 0.2s ease-out;
+}
+
+.term-body {
+  padding-bottom: 50px;
 }
 
 .add-course-button {
@@ -48,6 +54,10 @@
 .add-new-wrapper {
   border-top: solid #e0e4e7 1px;
   padding: 8px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
 
   button {
     width: 100%;

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html

-<mat-toolbar class="dialog-toolbar">
-    <h1 class="dialog-toolbar-title">{{title}}</h1>
-    <button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button>
-</mat-toolbar>
-<mat-dialog-content id="confirmation-dialog" class="mat-typography dialog-with-toolbar">
+<div id="confirmation-dialog" class="mat-dialog-content mat-typography">
+  <h1 mat-dialog-title>{{title}}</h1>
 	<mat-dialog-content>
 		<p class="dialog-text" *ngFor="let line of text">{{line}}</p>
 	</mat-dialog-content>
 	<mat-dialog-actions align="end">
-        <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
-		<button mat-button [color]="confirmColor" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
+    <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
+		<button mat-button [color]="confirmColor" class="mat-button" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
 	</mat-dialog-actions>
-</mat-dialog-content>
\ No newline at end of file
+</div>
\ No newline at end of file

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss

-.dialog-text {
-  color: #7e7e7e;
-  font-size: 16px;
-  margin-top: 1.2em;
-}

src/app/shared/dialogs/dialogs.scss

 .dialog-text {
   color: #7e7e7e;
-  font-size: 16px;
-  margin-top: 1.2em;
+}
+
+#confirmation-dialog {
+  padding: 24px;
+  margin: 0;
+  width: 400px;
 }

src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html

-<mat-toolbar class="dialog-toolbar">
+<mat-toolbar color="primary" class="dialog-toolbar">
     <h1 class="dialog-toolbar-title">{{title}}</h1>
     <button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button>
 </mat-toolbar>
@@ -13,7 +13,7 @@
 		</form>
 	</mat-dialog-content>
 	<mat-dialog-actions align="end">
-        <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
-		<button mat-button [color]="confirmColor" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
+    <button mat-button class="btn-secondary" (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
+		<button mat-button class="btn-primary mat-button" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
 	</mat-dialog-actions>
 </mat-dialog-content>
\ No newline at end of file