From 486d4d59bcab621996655ad72bd6e3450def5940 Mon Sep 17 00:00:00 2001
From: Will Hunt <will@half-shot.uk>
Date: Mon, 3 Nov 2025 16:02:21 +0000
Subject: [PATCH] Use compound Button styles for Jitsi button (#31159)

* Use compound styles for jitsi button

* lint
---
 src/vector/jitsi/index.pcss | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/vector/jitsi/index.pcss b/src/vector/jitsi/index.pcss
index 09299f1b7f..f51559f19a 100644
--- a/src/vector/jitsi/index.pcss
+++ b/src/vector/jitsi/index.pcss
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 /* TODO: Match the user's theme: https://github.com/element-hq/element-web/issues/12794 */
 
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
 /* Path to `res` dir in the source tree */
 $res: ../../../res;
 
@@ -70,16 +71,22 @@ html {
 }
 
 #joinButton {
-    /* A mix of AccessibleButton styles */
-    cursor: pointer;
-    padding: 7px 18px;
+    /* Copy of Compound Button styles */
+    border: 1px solid var(--cpd-color-bg-action-primary-rest);
+    color: var(--cpd-color-text-on-solid-primary);
+    background-color: var(--cpd-color-bg-action-primary-rest);
+    padding-block: var(--cpd-space-2x);
+    padding-inline: var(--cpd-space-8x);
+    min-block-size: var(--cpd-space-12x);
     text-align: center;
-    border-radius: 4px;
-    display: inline-block;
-    font-size: 14px;
-    color: #ffffff;
-    background-color: #03b381;
-    border: 0;
+    border-radius: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--cpd-font-body-lg-semibold);
+    border: none;
+    word-break: keep-all;
+    cursor: pointer;
 }
 
 .icon {