feat(raise-hand): Change raise hand indicator background color
This commit is contained in:
parent
4a322d2e60
commit
cdf00b5696
|
@ -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);
|
||||||
|
|
|
@ -390,7 +390,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.raisehandindicator {
|
.raisehandindicator {
|
||||||
background: $raiseHandBg;
|
background: $raiseHandBg !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.connection-indicator {
|
.connection-indicator {
|
||||||
|
|
|
@ -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 = { [
|
||||||
|
|
|
@ -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 } />
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue