refactor: install tailwind and restyle most components

.devcontainer/devcontainer.json

@@ -35,6 +35,7 @@
                 },
                 "[html]": {
                     "editor.formatOnSave": false,
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
                 },
                 "python.analysis.extraPaths": [
                     "/backend/"

frontend/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

frontend/.prettierrc.json

@@ -7,6 +7,8 @@
   "arrowParens": "always",
   "trailingComma": "none",
   "bracketSameLine": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/styles/tailwind.css",
   "printWidth": 80,
   "endOfLine": "auto",
   "overrides": [

frontend/angular.json

@@ -27,7 +27,8 @@
             ],
             "styles": [
               "node_modules/@angular/material/prebuilt-themes/magenta-violet.css",
-              "src/styles/styles.scss"
+              "src/styles/styles.scss",
+              "src/styles/tailwind.css"
 
             ],
             "scripts": [],

frontend/package.json

@@ -57,6 +57,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "~3.3.3",
     "prettier-eslint": "~16.3.0",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "typescript": "~5.9.2"
   }
-}
+}

frontend/src/app/about/about.component.html

@@ -11,8 +11,11 @@
       Join the CSXL Slack to get updates on the XL, learn about new
       opportunities for CS students, or meet your fellow CS majors!
     </p>
+
+  </mat-card-content>
+  <mat-card-actions>
     <button mat-flat-button color="primary" (click)="onSlackInviteClick()">
       Get Slack Invite
     </button>
-  </mat-card-content>
+  </mat-card-actions>
 </mat-pane>

frontend/src/app/academics/academics-admin/academics-admin.component.ts

@@ -13,10 +13,9 @@ import { Profile } from 'src/app/models.module';
 import { ProfileService } from 'src/app/profile/profile.service';
 
 @Component({
-    selector: 'app-academics-admin',
-    templateUrl: './academics-admin.component.html',
-    styleUrls: ['./academics-admin.component.css'],
-    standalone: false
+  selector: 'app-academics-admin',
+  templateUrl: './academics-admin.component.html',
+  standalone: false
 })
 export class AcademicsAdminComponent {
   public profile$: Observable<Profile | undefined>;

frontend/src/app/academics/academics-admin/course/admin-course.component.html

@@ -1,26 +1,26 @@
 <!-- HTML Structure of Admin Course List -->
-<mat-pane>
+<mat-card appearance="outlined" class="border-transparent! max-w-full! mr-8!">
   <mat-card-content>
     @if (courses()) {
     <div class="content">
       <div class="table-responsive">
         <table mat-table [dataSource]="courses()">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>
-              <div class="header">
+              <div class="flex items-center justify-between">
                 Courses
                 <button mat-stroked-button (click)="createCourse()">
                   Create
                 </button>
               </div>
             </th>
-            <td mat-cell *matCellDef="let element">
-              <div class="row" (click)="updateCourse(element)">
+            <td class="border-0! border-transparent! hover:cursor-pointer hover:bg-black/5! dark:hover:bg-white/5! hover:rounded-xl" mat-cell *matCellDef="let element">
+              <div class="flex flex-row w-full items-center justify-between" (click)="updateCourse(element)">
                 <p>
                   {{ element.subject_code }}{{ element.number }}:
                   {{ element.title }}
                 </p>
-                <div clas="modify-buttons">
+                <div clas="ml-auto">
                   <button
                     mat-stroked-button
                     (click)="deleteCourse(element, $event)">
@@ -37,4 +37,4 @@
     </div>
     }
   </mat-card-content>
-</mat-pane>
+</mat-card>

frontend/src/app/academics/academics-admin/course/admin-course.component.ts

@@ -8,19 +8,16 @@
  */
 
 import { Component, WritableSignal, inject, signal } from '@angular/core';
-import { Observable } from 'rxjs';
 import { permissionGuard } from 'src/app/permission.guard';
 import { Course } from '../../academics.models';
-import { Route, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { AcademicsService } from '../../academics.service';
-import { RxCourseList } from '../rx-academics-admin';
 
 @Component({
-    selector: 'app-admin-course',
-    templateUrl: './admin-course.component.html',
-    styleUrls: ['./admin-course.component.css'],
-    standalone: false
+  selector: 'app-admin-course',
+  templateUrl: './admin-course.component.html',
+  standalone: false
 })
 export class AdminCourseComponent {
   public static Route = {