From fb36745212ce991a3afb1ca17c3b117914d8a779 Mon Sep 17 00:00:00 2001
From: vickydotbat <vickydotbat@tutamail.com>
Date: Fri, 24 Apr 2026 13:22:47 +0200
Subject: [PATCH] Theme chat and notification surfaces

---
 scss/westgate/_controls.scss |   8 +++
 scss/westgate/_surfaces.scss | 101 +++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+)

diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss
index d52fef7..a06a6fc 100644
--- a/scss/westgate/_controls.scss
+++ b/scss/westgate/_controls.scss
@@ -17,6 +17,7 @@
 }
 
 .btn-secondary,
+.btn-light,
 .btn-ghost,
 .btn-outline-secondary {
 	--bs-btn-color: #d8cec0;
@@ -31,6 +32,13 @@
 	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
 }
 
+.btn-light {
+	--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+	--bs-btn-hover-border-color: rgba(216, 194, 138, 0.5);
+	--bs-btn-active-bg: rgba(194, 163, 90, 0.15);
+	--bs-btn-active-border-color: rgba(216, 194, 138, 0.56);
+}
+
 .modal-footer .btn-secondary,
 .bootbox .modal-footer .btn-secondary,
 .modal-footer .btn[data-bs-dismiss="modal"],
diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss
index ccae686..c80d340 100644
--- a/scss/westgate/_surfaces.scss
+++ b/scss/westgate/_surfaces.scss
@@ -185,3 +185,104 @@ li[component="category/topic"] .user-icon {
 .profile-card {
 	color: var(--wg-text-soft);
 }
+
+.notifications-dropdown .notification-list > :where(div, li),
+.notifications-list > :where(div, li),
+.chats-dropdown [component="chat/recent/room"],
+.chats-list [component="chat/recent/room"],
+[component="chat/public/room"] {
+	background:
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
+		var(--wg-velvet-panel) !important;
+	border: 1px solid rgba(194, 163, 90, 0.14) !important;
+	border-radius: 8px !important;
+	box-shadow:
+		inset 0 1px 0 rgba(255, 244, 221, 0.028),
+		0 8px 18px rgba(0, 0, 0, 0.18) !important;
+	color: var(--wg-text-soft) !important;
+}
+
+.notifications-dropdown .notification-list > :where(div, li) + :where(div, li),
+.notifications-list > :where(div, li) + :where(div, li),
+.chats-dropdown [component="chat/recent/room"] + hr,
+.chats-list [component="chat/recent/room"] + hr {
+	margin-top: 0.4rem !important;
+}
+
+.notifications-dropdown :where(.btn.btn-ghost, .mark-read),
+.notifications-list :where(.btn.btn-ghost, .mark-read),
+.chats-dropdown :where(.chat-room-btn, .mark-read),
+.chats-list :where(.chat-room-btn, .mark-read),
+[component="chat/public/room"] {
+	color: var(--wg-text-soft) !important;
+}
+
+.notifications-dropdown .mark-read,
+.notifications-list .mark-read,
+.chats-dropdown .mark-read,
+.chats-list .mark-read {
+	border-color: rgba(194, 163, 90, 0.18) !important;
+	border-radius: 6px !important;
+	background: linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.08)) !important;
+}
+
+.notifications-dropdown .mark-read:hover,
+.notifications-dropdown .mark-read:focus,
+.notifications-list .mark-read:hover,
+.notifications-list .mark-read:focus,
+.chats-dropdown .mark-read:hover,
+.chats-dropdown .mark-read:focus,
+.chats-list .mark-read:hover,
+.chats-list .mark-read:focus {
+	background: rgba(194, 163, 90, 0.08) !important;
+}
+
+.chats-dropdown .chat-room-btn,
+.chats-list .chat-room-btn,
+[component="chat/public/room"] {
+	border: 1px solid rgba(194, 163, 90, 0.12) !important;
+	border-radius: 8px !important;
+	background: transparent !important;
+	box-shadow: none !important;
+}
+
+.chats-dropdown [component="chat/recent"] .active .chat-room-btn,
+.chats-list .active .chat-room-btn,
+[component="chat/public/room"]:hover,
+[component="chat/public/room"]:focus,
+[component="chat/public/room"].unread {
+	background: rgba(194, 163, 90, 0.08) !important;
+	border-color: rgba(194, 163, 90, 0.24) !important;
+	color: var(--wg-text) !important;
+}
+
+.notifications-dropdown [component="notifications/item/link"],
+.notifications-list [component="notifications/item/link"],
+.chats-dropdown .room-name,
+.chats-list .room-name,
+.chats-dropdown .teaser-content,
+.chats-list .teaser-content,
+[component="chat/public/room"] {
+	color: var(--wg-text-soft) !important;
+}
+
+.notifications-dropdown [component="notifications/item/link"]:hover,
+.notifications-dropdown [component="notifications/item/link"]:focus,
+.notifications-list [component="notifications/item/link"]:hover,
+.notifications-list [component="notifications/item/link"]:focus,
+.chats-dropdown .chat-room-btn:hover .room-name,
+.chats-dropdown .chat-room-btn:focus .room-name,
+.chats-list .chat-room-btn:hover .room-name,
+.chats-list .chat-room-btn:focus .room-name,
+[component="chat/public/room"]:hover {
+	color: var(--wg-text) !important;
+}
+
+[component="chat/public/room/unread/count"],
+.chats-dropdown .badge.bg-light,
+.chats-list .badge.bg-light {
+	background:
+		linear-gradient(to bottom, rgba(216, 194, 138, 0.13), rgba(70, 45, 52, 0.28)) !important;
+	border: 1px solid rgba(194, 163, 90, 0.28) !important;
+	color: var(--wg-ledger-ink) !important;
+}