From cdf00b5696d364300d8804bcdd5f259161b4c63c Mon Sep 17 00:00:00 2001
From: hmuresan <horatiu.muresan@8x8.com>
Date: Mon, 11 Oct 2021 14:30:00 +0300
Subject: [PATCH] feat(raise-hand): Change raise hand indicator background
 color

---
 css/_variables.scss                                |  2 +-
 css/_videolayout_default.scss                      |  2 +-
 .../base/react/components/native/BaseIndicator.js  | 14 ++++++++++++--
 .../components/native/RaisedHandIndicator.js       |  2 ++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/css/_variables.scss b/css/_variables.scss
index f8fae8a97..df4636083 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -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);
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 5cd3462a7..c622d123e 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -390,7 +390,7 @@
 }
 
 .raisehandindicator {
-  background: $raiseHandBg;
+  background: $raiseHandBg !important;
 }
 
 .connection-indicator {
diff --git a/react/features/base/react/components/native/BaseIndicator.js b/react/features/base/react/components/native/BaseIndicator.js
index 9bf4edaf9..4674c8fcf 100644
--- a/react/features/base/react/components/native/BaseIndicator.js
+++ b/react/features/base/react/components/native/BaseIndicator.js
@@ -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 = { [
diff --git a/react/features/filmstrip/components/native/RaisedHandIndicator.js b/react/features/filmstrip/components/native/RaisedHandIndicator.js
index 85d4f96ed..1c1272c82 100644
--- a/react/features/filmstrip/components/native/RaisedHandIndicator.js
+++ b/react/features/filmstrip/components/native/RaisedHandIndicator.js
@@ -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 } />
         );