diff --git a/src/tile/GridTile.module.css b/src/tile/GridTile.module.css index 7416e2e4..bb068512 100644 --- a/src/tile/GridTile.module.css +++ b/src/tile/GridTile.module.css @@ -21,6 +21,15 @@ borders don't support gradients */ transition: opacity ease 0.15s; inset: calc(-1 * var(--cpd-border-width-4)); border-radius: var(--cpd-space-5x); + background-blend-mode: overlay, normal; +} + +.tile.speaking { + /* !important because speaking border should take priority over hover */ + outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important; +} + +.tile.speaking::before { background: linear-gradient( 119deg, rgba(13, 92, 189, 0.7) 0%, @@ -31,15 +40,25 @@ borders don't support gradients */ rgba(13, 92, 189, 0.9) 0%, rgba(13, 189, 168, 0.9) 100% ); - background-blend-mode: overlay, normal; + opacity: 1; } -.tile.speaking { - /* !important because speaking border should take priority over hover */ - outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important; +.tile.handRaised { + /* !important because hand raised border should take priority over hover */ + outline: var(--cpd-border-width-2) solid var(--cpd-color-bg-canvas-default) !important; } -.tile.speaking::before { +.tile.handRaised::before { + background: linear-gradient( + 119deg, + var(--cpd-color-yellow-1200) 0%, + var(--cpd-color-yellow-900) 100% + ), + linear-gradient( + 180deg, + var(--cpd-color-yellow-1200) 0%, + var(--cpd-color-yellow-900) 100% + ); opacity: 1; } diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index 59902c94..06c47382 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -109,6 +109,10 @@ const UserMediaTile = forwardRef( ); + const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""]; + + const showSpeaking = showSpeakingIndicators && speaking; + const tile = ( ( videoEnabled={videoEnabled && showVideo} videoFit={cropVideo ? "cover" : "contain"} className={classNames(className, styles.tile, { - [styles.speaking]: showSpeakingIndicators && speaking, + [styles.speaking]: showSpeaking, + [styles.handRaised]: !showSpeaking && !!handRaised, })} nameTagLeadingIcon={ ( {menu} } - raisedHandTime={raisedHands[vm.member?.userId ?? ""]} + raisedHandTime={handRaised} {...props} /> ); diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css index 64ac3b0a..adde1c7b 100644 --- a/src/tile/MediaView.module.css +++ b/src/tile/MediaView.module.css @@ -90,15 +90,6 @@ unconditionally select the container so we can use cqmin units */ place-items: start; } -.raisedHandBorder { - border: var(--cpd-space-1x) solid var(--cpd-color-yellow-1200); -} - -/* Offset by the size of the border to prevent resizing */ -.media:not(.raisedHandBorder) { - margin: var(--cpd-space-1x); -} - .nameTag { grid-area: nameTag; padding: var(--cpd-space-1x); diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx index 693078b9..d8b03dc9 100644 --- a/src/tile/MediaView.tsx +++ b/src/tile/MediaView.tsx @@ -68,7 +68,6 @@ export const MediaView = forwardRef( className={classNames(styles.media, className, { [styles.mirror]: mirror, [styles.videoMuted]: !videoEnabled, - [styles.raisedHandBorder]: !!raisedHandTime, })} style={style} ref={ref}