From 4d5eaf288b7a411e8dafad65531c417f20f9fe78 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 30 Jun 2025 21:35:46 +0300
Subject: [PATCH] Fix SendouQ chat buttons styling

---
 app/features/chat/components/Chat.tsx |  6 +++---
 app/styles/common.css                 | 12 ++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/features/chat/components/Chat.tsx b/app/features/chat/components/Chat.tsx
index f5793e0d6..26d1210f0 100644
--- a/app/features/chat/components/Chat.tsx
+++ b/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>
diff --git a/app/styles/common.css b/app/styles/common.css
index 401ba9fbe..26d034513 100644
--- a/app/styles/common.css
+++ b/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 {