Styling Changes and My Courses Hotfix (#508)

* Attempt to Fix Profile Image Roundness

* Revamp Community Agreement Dialog

* Fix Office Hours Editor HTML Issue

* Add Attributions for My Courses

* Add a Few More Attributions

frontend/src/app/app.module.ts

@@ -34,6 +34,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 /* Application Specific */
 import { AppRoutingModule } from './app-routing.module';
@@ -84,6 +85,7 @@ import { MatChipsModule } from '@angular/material/chips';
     MatToolbarModule,
     MatTooltipModule,
     MatCheckboxModule,
+    MatSlideToggleModule,
     FormsModule,
     RouterModule,
     SharedModule,

frontend/src/app/my-courses/catalog/catalog.component.ts

@@ -1,3 +1,9 @@
+/**
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2023
+ * @license MIT
+ */
+
 import { Component } from '@angular/core';
 
 @Component({

frontend/src/app/my-courses/catalog/course-catalog/course-catalog.component.ts

@@ -2,7 +2,7 @@
  * The Course Catalog enables users to view all COMP courses at UNC.
  *
  * @author Ajay Gandecha <[email protected]>
- * @copyright 2023
+ * @copyright 2024
  * @license MIT
  */
 

frontend/src/app/my-courses/course/course.component.ts

@@ -1,3 +1,11 @@
+/**
+ * Tab navigation controller for courses.
+ *
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2024
+ * @license MIT
+ */
+
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 

frontend/src/app/my-courses/course/office-hours/office-hours-editor/office-hours-editor.component.html

@@ -66,8 +66,8 @@
           matInput
           type="datetime-local"
           placeholder="Start Time"
-          formControlName="end_time"
-          name="end_time"
+          formControlName="start_time"
+          name="start_time"
           required />
       </mat-form-field>
 

frontend/src/app/my-courses/course/office-hours/office-hours-editor/office-hours-editor.component.ts

@@ -1,3 +1,11 @@
+/**
+ * Component that enables the editing of office hours.
+ *
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2024
+ * @license MIT
+ */
+
 import { Component } from '@angular/core';
 import {
   courseSitePageGuard,

frontend/src/app/my-courses/course/office-hours/office-hours-get-help/office-hours-get-help.component.ts

@@ -1,3 +1,11 @@
+/**
+ * Office hours page for students that enables them to create tickets and get help.
+ *
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2024
+ * @license MIT
+ */
+
 import {
   Component,
   OnDestroy,

frontend/src/app/my-courses/course/office-hours/office-hours-page/office-hours-page.component.ts

@@ -1,3 +1,11 @@
+/**
+ * Office hours page that shows events.
+ *
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2024
+ * @license MIT
+ */
+
 import { Component, WritableSignal, signal } from '@angular/core';
 import { PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';

frontend/src/app/my-courses/course/office-hours/office-hours-queue/office-hours-queue.component.ts

@@ -1,3 +1,11 @@
+/**
+ * Office hours queue for instructors.
+ *
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2024
+ * @license MIT
+ */
+
 import {
   Component,
   OnDestroy,

frontend/src/app/my-courses/course/roster/roster.component.ts

@@ -1,3 +1,11 @@
+/**
+ * The Roster Component enables instructors to view the roster of their courses.
+ *
+ * @author Ajay Gandecha <[email protected]>
+ * @copyright 2024
+ * @license MIT
+ */
+
 import {
   Component,
   Signal,

frontend/src/app/navigation/navigation.component.css

@@ -115,4 +115,8 @@ a {
 /* Round the border for the profile image chip */
 .mat-mdc-standard-chip {
   --mdc-chip-container-shape-radius: 16px;
+}
+
+::ng-deep #profile-icon {
+  border-radius: 9px !important;
 }

frontend/src/app/navigation/navigation.component.html

@@ -134,7 +134,7 @@ <h3 matSubheader>Other</h3>
             @if(profile$ | async; as profile) {
               <mat-chip class="profile-chip" routerLink="/profile">
                 @if(profile.github_avatar) {
-                  <img matChipAvatar [src]="profile.github_avatar" alt="GitHub Avatar"/>
+                  <img id="profile-icon" matChipAvatar [src]="profile.github_avatar" alt="GitHub Avatar"/>
                 } @else {
                   <mat-icon matChipAvatar>account_circle</mat-icon>
                 }

frontend/src/app/profile/profile-page/profile-page.component.ts

@@ -89,7 +89,8 @@ export class ProfilePageComponent {
   /** Open Community Agreement Dialog */
   openAgreementDialog(): void {
     const dialogRef = this.dialog.open(CommunityAgreement, {
-      autoFocus: 'dialog'
+      width: '1000px',
+      height: '800px'
     });
     this.profileService.profile$.subscribe();
     dialogRef.afterClosed().subscribe();

frontend/src/app/shared/community-agreement/community-agreement.widget.css

@@ -1,26 +1,20 @@
-.content-container {
-  max-width: 100%;
-  max-height: 90vh; 
-  overflow: auto; 
-  scroll-behavior: auto; 
-  padding-bottom: env(safe-area-inset-bottom);
+.mat-divider {
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
-::-webkit-scrollbar {
-  width: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 10px;
+.mat-mdc-dialog-content {
+  overflow-y: scroll;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
+/* Always show scrollbar */
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .content-container {
-    color: white;
-  }
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 }