fixing archived rooms ui

components/Dashboard/Rooms.tsx

@@ -294,16 +294,20 @@ export default function DashboardRoom() {
           </>
         );
       case RoomTypeFilter.archived:
-        return archivedRooms.map((room) => {
-          // if the room is
-          return (
-            <RoomCard
-              key={room.id}
-              room={room}
-              updateRoomHandler={handleUpdateRoom}
-            />
-          );
-        });
+        return (
+          <span className="flex flex-col space-y-5 px-10">
+            {archivedRooms.map((room) => {
+              // if the room is
+              return (
+                <RoomCard
+                  key={room.id}
+                  room={room}
+                  updateRoomHandler={handleUpdateRoom}
+                />
+              );
+            })}
+          </span>
+        );
       default:
         return allRooms.map((room) => {
           // if the room is

components/RoomCard.tsx

@@ -263,6 +263,89 @@ export default function RoomCard(props: IRoomCardProps) {
     }
   }
 
+  if (props.room.status == RoomStatus.archived) {
+    return (
+      <>
+        <span
+          className={`flex flex-row bg-gray-300 bg-opacity-25 px-5 items-center justify-start rounded-lg`}
+        >
+          {membersInvited()}
+
+          {/* header */}
+          <span className="flex flex-row justify-between items-start space-x-1 p-5 h-full">
+            {/* meeting details */}
+            <span className="flex flex-col items-baseline justify-start max-w-xs h-full">
+              <span
+                className={`${
+                  isUserInRoom ? " text-gray-500" : "text-white"
+                } font-semibold`}
+              >
+                {props.room.name}
+              </span>
+              <Popover content={AgendaContent} title="Agenda">
+                <span
+                  className={`${
+                    isUserInRoom ? "text-gray-400" : "text-gray-200"
+                  } text-xs mb-auto text-ellipsis whitespace-pre-line max-h-[3rem] overflow-hidden`}
+                >
+                  {props.room.description}
+                </span>
+              </Popover>
+
+              {/* all invited members who are not in the room already */}
+            </span>
+          </span>
+
+          <RoomTypeTag
+            roomStatus={props.room.status}
+            roomType={props.room.type}
+          />
+
+          {/* room status and link(s) */}
+          <span className="ml-auto flex flex-col items-end justify-between h-full w-fit">
+            {renderTopRightCardInfo()}
+
+            <span
+              className={`${
+                isUserInRoom ? "text-gray-400" : "text-gray-200"
+              } text-xs text-right mb-auto`}
+            >
+              {props.room.approximateDateTime}
+            </span>
+          </span>
+
+          {/* room attachments */}
+          <span className="flex flex-row space-x-2">
+            {props.room.attachments && props.room.attachments.length > 0 ? (
+              <button
+                onClick={() => window.open(props.room.attachments[0], "_blank")}
+                className={`${
+                  isUserInRoom
+                    ? " bg-gray-400 bg-opacity-25 text-gray-400"
+                    : "bg-gray-300 bg-opacity-25 text-white"
+                }  bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40`}
+              >
+                <FaLink className="text-sm" />
+              </button>
+            ) : (
+              <></>
+            )}
+          </span>
+
+          {/* footer */}
+          <span className="flex flex-row justify-end items-center p-3 rounded-lg">
+            <button
+              onClick={handleJoiningRoom}
+              className="text-sm font-semibold py-1 px-4 rounded bg-gray-200 text-green-500"
+            >
+              Join
+            </button>
+          </span>
+        </span>
+      </>
+    );
+  }
+
   return (
     <span
       className={`flex flex-col ${

components/RoomTypeTag.tsx

@@ -20,11 +20,34 @@ export default function RoomTypeTag(props: RoomTypeTagProps) {
       </span>
     );
   } else if (props.roomStatus == RoomStatus.archived) {
-    return (
-      <span className={"text-gray-700 bg-gray-200 " + universalClassNames}>
-        <span>archived</span>
-      </span>
-    );
+    if (props.roomType == RoomType.now) {
+      return (
+        // <span className={"text-gray-700 bg-gray-200 " + universalClassNames}>
+        //   <span>archived</span>
+        // </span>
+
+        <span className={"text-gray-700 bg-gray-200 " + universalClassNames}>
+          <FaClock />
+          <span>now room</span>
+        </span>
+      );
+    } else if (props.roomType == RoomType.scheduled) {
+      return (
+        <span className={"text-blue-700 bg-blue-200 " + universalClassNames}>
+          <FaClock />
+          <span>scheduled room</span>
+        </span>
+      );
+    } else if (props.roomType == RoomType.recurring) {
+      return (
+        <span
+          className={"text-yellow-700 bg-yellow-200 " + universalClassNames}
+        >
+          <IoTimer />
+          <span>recurring room</span>
+        </span>
+      );
+    }
   }
 
   // if it's just empty and not empty, then go ahead and show the right type