Use compound Button styles for Jitsi button (#31159)

* Use compound styles for jitsi button

* lint
This commit is contained in:
Will Hunt
2025-11-03 16:02:21 +00:00
committed by GitHub
parent 54f967efd5
commit 486d4d59bc

View File

@@ -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 */ /* 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 */ /* Path to `res` dir in the source tree */
$res: ../../../res; $res: ../../../res;
@@ -70,16 +71,22 @@ html {
} }
#joinButton { #joinButton {
/* A mix of AccessibleButton styles */ /* Copy of Compound Button styles */
cursor: pointer; border: 1px solid var(--cpd-color-bg-action-primary-rest);
padding: 7px 18px; 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; text-align: center;
border-radius: 4px; border-radius: 24px;
display: inline-block; display: inline-flex;
font-size: 14px; align-items: center;
color: #ffffff; justify-content: center;
background-color: #03b381; font: var(--cpd-font-body-lg-semibold);
border: 0; border: none;
word-break: keep-all;
cursor: pointer;
} }
.icon { .icon {