From da7cf0ab58be337cbade9e0f9ea76f625610024b Mon Sep 17 00:00:00 2001
From: Ajay Gandecha <ajgandecha@gmail.com>
Date: Thu, 14 Mar 2024 16:56:28 -0400
Subject: [PATCH] Conform Room Reservation Feature to CSXL's Material UI
 Conventions (#332)

---
 .../new-reservation-page.component.css        | 29 ++++++--
 .../new-reservation-page.component.html       | 69 ++++++++++---------
 .../date-selector/date-selector.widget.html   |  2 +-
 .../room-reservation-table.widget.css         |  7 ++
 .../room-reservation-table.widget.html        | 41 ++++++-----
 5 files changed, 91 insertions(+), 57 deletions(-)

diff --git a/frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.css b/frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.css
index baf71848f..787417358 100644
--- a/frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.html b/frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.html
index cc0710a13..ea992af22 100644
--- a/frontend/src/app/coworking/room-reservation/new-reservation-page/new-reservation-page.component.html
+++ b/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>
diff --git a/frontend/src/app/coworking/widgets/date-selector/date-selector.widget.html b/frontend/src/app/coworking/widgets/date-selector/date-selector.widget.html
index e3a11a851..42486efd6 100644
--- a/frontend/src/app/coworking/widgets/date-selector/date-selector.widget.html
+++ b/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"
diff --git a/frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.css b/frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.css
index d1511b90d..122a162c2 100644
--- a/frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.css
+++ b/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,
diff --git a/frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.html b/frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.html
index 72baed4c8..8ffeaad99 100644
--- a/frontend/src/app/coworking/widgets/room-reservation-table/room-reservation-table.widget.html
+++ b/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>