feat(raise-hand): Change raise hand indicator background color

This commit is contained in:
hmuresan 2021-10-11 14:30:00 +03:00 committed by Horatiu Muresan
parent 4a322d2e60
commit cdf00b5696
4 changed files with 16 additions and 4 deletions

View File

@ -61,7 +61,7 @@ $videoThumbnailSelected: #165ECC;
$participantNameColor: #fff;
$thumbnailPictogramColor: #fff;
$dominantSpeakerBg: #165ecc;
$raiseHandBg: #D6D61E;
$raiseHandBg: #F8AE1A;
$audioLevelBg: #44A5FF;
$connectionIndicatorBg: #165ecc;
$audioLevelShadow: rgba(9, 36, 77, 0.9);

View File

@ -390,7 +390,7 @@
}
.raisehandindicator {
background: $raiseHandBg;
background: $raiseHandBg !important;
}
.connection-indicator {

View File

@ -11,6 +11,11 @@ import { BASE_INDICATOR } from './styles';
type Props = {
/**
* Overwritten background color when indicator is highlighted.
*/
backgroundColor?: string;
/**
* True if a highlighted background has to be applied.
*/
@ -38,12 +43,17 @@ export default class BaseIndicator extends Component<Props> {
* @inheritdoc
*/
render() {
const { highlight, icon, iconStyle } = this.props;
const { highlight, icon, iconStyle, backgroundColor } = this.props;
const highlightedIndicator = { ...styles.highlightedIndicator };
if (backgroundColor) {
highlightedIndicator.backgroundColor = backgroundColor;
}
return (
<View
style = { [ BASE_INDICATOR,
highlight ? styles.highlightedIndicator : null ] }>
highlight ? highlightedIndicator : null ] }>
<Icon
src = { icon }
style = { [

View File

@ -5,6 +5,7 @@ import React from 'react';
import { IconRaisedHand } from '../../../base/icons';
import { BaseIndicator } from '../../../base/react';
import { connect } from '../../../base/redux';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import AbstractRaisedHandIndicator, {
type Props,
_mapStateToProps
@ -24,6 +25,7 @@ class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
_renderIndicator() {
return (
<BaseIndicator
backgroundColor = { BaseTheme.palette.warning01 }
highlight = { true }
icon = { IconRaisedHand } />
);