web/roomlist: make background color prettier

web/src/ui/RoomView.css

@@ -2,7 +2,6 @@ div.room-view {
 	overflow: hidden;
 	height: 100%;
 	display: grid;
-	border-left: 2px solid #ccc;
 	grid-template:
 		"header" 3rem
 		"messageview" 1fr
@@ -14,7 +13,7 @@ div.room-view {
 		align-items: center;
 		gap: .5rem;
 		padding-left: 1rem;
-		border-bottom: 2px solid #ccc;
+		border-bottom: 1px solid #ccc;
 
 		> span.room-name {
 			font-weight: bold;

web/src/ui/roomlist/RoomList.css

@@ -1,8 +1,16 @@
-div.room-list {
+div.room-list-wrapper {
 	grid-area: roomlist;
+	background: linear-gradient(in hsl longer hue, red 0 0, magenta);
+	box-sizing: border-box;
 	overflow-y: auto;
+}
 
-	div.room-entry {
+div.room-list {
+	background-color: hsla(0, 0%, 96%, .9);
+	min-height: 100vh;
+}
+
+div.room-entry {
 	width: 100%;
 	display: flex;
 	gap: 4px;
@@ -11,11 +19,11 @@ div.room-list {
 	cursor: pointer;
 
 	&:hover {
-			background-color: #EEE;
+		background-color: rgba(5, 38, 87, 0.1);
 	}
 
 	&.active {
-			background-color: #DDD;
+		background-color: rgba(5, 38, 87, 0.15);
 	}
 
 	> div.room-entry-left {
@@ -57,7 +65,6 @@ div.room-list {
 			}
 		}
 	}
-	}
 }
 
 img.avatar {

web/src/ui/roomlist/RoomList.tsx

@@ -14,8 +14,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { use, useCallback } from "react"
-import type { RoomID } from "../../api/types"
-import { useNonNullEventAsState } from "../../util/eventdispatcher.ts"
+import type { RoomID } from "@/api/types"
+import { useNonNullEventAsState } from "@/util/eventdispatcher.ts"
 import { ClientContext } from "../ClientContext.ts"
 import Entry from "./Entry.tsx"
 import "./RoomList.css"
@@ -36,11 +36,18 @@ const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
 		}
 	}, [setActiveRoom])
 
-	return <div className="room-list">
+	return <div className="room-list-wrapper">
+		<div className="room-list">
 			{reverseMap(roomList, room =>
-			<Entry key={room.room_id} isActive={room.room_id === activeRoomID} room={room} setActiveRoom={clickRoom}/>,
+				<Entry
+					key={room.room_id}
+					isActive={room.room_id === activeRoomID}
+					room={room}
+					setActiveRoom={clickRoom}
+				/>,
 			)}
 		</div>
+	</div>
 }
 
 function reverseMap<T, O>(arg: T[], fn: (a: T) => O) {