Fix SendouQ chat buttons styling

app/features/chat/components/Chat.tsx

@@ -4,6 +4,7 @@ import { sub } from "date-fns";
 import { nanoid } from "nanoid";
 import { WebSocket } from "partysocket";
 import * as React from "react";
+import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import type { Tables } from "~/db/tables";
 import { useUser } from "~/features/auth/core/user";
@@ -136,12 +137,11 @@ export function Chat({
 						const unseen = unseenMessages.get(room.code);
 
 						return (
-							<SendouButton
+							<Button
 								key={room.code}
 								className={clsx("chat__room-button", {
 									current: currentRoom === room.code,
 								})}
-								size="small"
 								onPress={() => {
 									setCurrentRoom(room.code);
 									resetScroller();
@@ -154,7 +154,7 @@ export function Chat({
 								) : (
 									<span className="chat__room-button__unseen invisible" />
 								)}
-							</SendouButton>
+							</Button>
 						);
 					})}
 				</div>

app/styles/common.css

@@ -1138,12 +1138,20 @@ html[dir="rtl"] .fix-rtl {
 }
 
 .chat__room-button {
-	background-color: var(--bg-light);
+	background-color: transparent;
 	color: var(--text-lighter);
 	border-radius: var(--rounded) var(--rounded) 0 0;
-	font-size: var(--fonts-xs);
 	padding: var(--s-1) var(--s-1);
 	border-color: var(--bg-light-variation);
+	font-size: var(--fonts-xs);
+	padding-block: var(--s-1);
+	padding-inline: var(--s-2);
+	display: flex;
+	width: auto;
+	align-items: center;
+	justify-content: center;
+	font-weight: var(--bold);
+	flex: 1 1 0px;
 }
 
 .chat__room-button.current {