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; $participantNameColor: #fff;
$thumbnailPictogramColor: #fff; $thumbnailPictogramColor: #fff;
$dominantSpeakerBg: #165ecc; $dominantSpeakerBg: #165ecc;
$raiseHandBg: #D6D61E; $raiseHandBg: #F8AE1A;
$audioLevelBg: #44A5FF; $audioLevelBg: #44A5FF;
$connectionIndicatorBg: #165ecc; $connectionIndicatorBg: #165ecc;
$audioLevelShadow: rgba(9, 36, 77, 0.9); $audioLevelShadow: rgba(9, 36, 77, 0.9);

View File

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

View File

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

View File

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