Conform Room Reservation Feature to CSXL's Material UI Conventions (#332

)

frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.css

@@ -1,12 +1,23 @@
-.table-container {
-  overflow-x: auto; /* Enable horizontal scrolling for the table container */
-  max-width: 100%; /* Ensure it doesn't exceed the viewport width */
+.mat-mdc-card {
+  max-width: 100%;
 }
 
-.horizontal-scroll {
-  white-space: nowrap; /* Prevent line breaks for child elements */
+.mat-mdc-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
 }
 
+.mat-mdc-card-title {
+  padding-left: 10px;
+}
+
+.mat-mdc-card-subtitle {
+  padding-left: 10px;
+}
+
+
 /* Add any additional styling for the room-reservation-table if needed */
 
 .date-selector {
@@ -47,6 +58,7 @@
   width: 20px;
   height: 20px;
   margin-right: 5px;
+  border-radius: 6px;
 }
 
 .legend-text {
@@ -56,3 +68,10 @@
 .reservation-limit {
   padding-left: 10px;
 }
+
+@media only screen and (max-width: 900px) {
+  .mat-mdc-card-header {
+    flex-direction: column;
+    align-items: baseline;
+  }
+}

frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.html

@@ -1,34 +1,39 @@
-<div class="date-selector">
-  <date-selector></date-selector>
-</div>
+<mat-card appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Reserve a Room</mat-card-title>
+    <mat-card-subtitle
+      >Total Hours Remaining:
+      {{ numHoursStudyRoomReservations$ | async }}</mat-card-subtitle
+    >
+    <div class="date-selector">
+      <date-selector></date-selector>
+    </div>
+  </mat-card-header>
 
-<div class="table-container">
-  <room-reservation-table class="horizontal-scroll"></room-reservation-table>
-</div>
+  <mat-card-content>
+    <room-reservation-table class="horizontal-scroll"></room-reservation-table>
 
-<div class="legend-container">
-  <div class="legend-item">
-    <div class="legend-color" style="background-color: #03691e"></div>
-    <span class="legend-text">Available</span>
-  </div>
-  <div class="legend-item">
-    <div class="legend-color" style="background-color: red"></div>
-    <span class="legend-text">Reserved</span>
-  </div>
-  <div class="legend-item">
-    <div class="legend-color" style="background-color: #3479be"></div>
-    <span class="legend-text">Your Reservations</span>
-  </div>
-  <div class="legend-item">
-    <div class="legend-color" style="background-color: orange"></div>
-    <span class="legend-text">Selected</span>
-  </div>
-  <div class="legend-item">
-    <div class="legend-color" style="background-color: #4d4d4d"></div>
-    <span class="legend-text">Unavailable</span>
-  </div>
-</div>
-
-<div class="reservation-limit">
-  <p>Total Hours Remaining: {{ numHoursStudyRoomReservations$ | async }}</p>
-</div>
+    <div class="legend-container">
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: #03691e"></div>
+        <span class="legend-text">Available</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: red"></div>
+        <span class="legend-text">Reserved</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: #3479be"></div>
+        <span class="legend-text">Your Reservations</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: orange"></div>
+        <span class="legend-text">Selected</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: #4d4d4d"></div>
+        <span class="legend-text">Unavailable</span>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/coworking/widgets/date-selector/date-selector.widget.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline" subscriptSizing="dynamic">
   <input
     matInput
     [matDatepicker]="picker"

frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.css

@@ -1,9 +1,16 @@
 /* room-reservation-table.widget.css */
 
+
+.table-container {
+  overflow-x: auto;
+  max-width: 100%;
+
+}
 table {
   border-collapse: collapse;
   width: 99%;
   margin-left: 10px;
+  white-space: nowrap; /* Prevent line breaks for child elements */
 }
 
 th,

frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.html

@@ -1,26 +1,29 @@
-<table class="table">
-  <tr>
-    <th></th>
-    <ng-container *ngFor="let timeSlot of timeSlots">
-      <th [innerHTML]="timeSlot" class="time-slot"></th>
-    </ng-container>
-  </tr>
-  <tr *ngFor="let record of reservationsMap | keyvalue">
-    <th>{{ record.key }}</th>
-    <td
-      *ngFor="let timeSlot of record.value; let j = index"
-      [style.background]="cellPropertyMap[timeSlot].backgroundColor"
-      (click)="
-        !cellPropertyMap[timeSlot].isDisabled && toggleCellColor(record.key, j)
-      "></td>
-  </tr>
-</table>
+<div class="table-container">
+  <table class="table">
+    <tr>
+      <th></th>
+      <ng-container *ngFor="let timeSlot of timeSlots">
+        <th [innerHTML]="timeSlot" class="time-slot"></th>
+      </ng-container>
+    </tr>
+    <tr *ngFor="let record of reservationsMap | keyvalue">
+      <th>{{ record.key }}</th>
+      <td
+        *ngFor="let timeSlot of record.value; let j = index"
+        [style.background]="cellPropertyMap[timeSlot].backgroundColor"
+        (click)="
+          !cellPropertyMap[timeSlot].isDisabled &&
+            toggleCellColor(record.key, j)
+        "></td>
+    </tr>
+  </table>
+</div>
 <div class="divider">
   <button
-    mat-raised-button
+    mat-stroked-button
     class="button"
     (click)="draftReservation()"
     [disabled]="!selectButton">
-    Select
+    Reserve
   </button>
 </div>