Browse Source

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

master
hmuresan 3 years ago
parent
commit
cdf00b5696

+ 1
- 1
css/_variables.scss View File

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

+ 1
- 1
css/_videolayout_default.scss View File

@@ -390,7 +390,7 @@
390 390
 }
391 391
 
392 392
 .raisehandindicator {
393
-  background: $raiseHandBg;
393
+  background: $raiseHandBg !important;
394 394
 }
395 395
 
396 396
 .connection-indicator {

+ 12
- 2
react/features/base/react/components/native/BaseIndicator.js View File

@@ -11,6 +11,11 @@ import { BASE_INDICATOR } from './styles';
11 11
 
12 12
 type Props = {
13 13
 
14
+    /**
15
+     * Overwritten background color when indicator is highlighted.
16
+     */
17
+    backgroundColor?: string;
18
+
14 19
     /**
15 20
      * True if a highlighted background has to be applied.
16 21
      */
@@ -38,12 +43,17 @@ export default class BaseIndicator extends Component<Props> {
38 43
      * @inheritdoc
39 44
      */
40 45
     render() {
41
-        const { highlight, icon, iconStyle } = this.props;
46
+        const { highlight, icon, iconStyle, backgroundColor } = this.props;
47
+        const highlightedIndicator = { ...styles.highlightedIndicator };
48
+
49
+        if (backgroundColor) {
50
+            highlightedIndicator.backgroundColor = backgroundColor;
51
+        }
42 52
 
43 53
         return (
44 54
             <View
45 55
                 style = { [ BASE_INDICATOR,
46
-                    highlight ? styles.highlightedIndicator : null ] }>
56
+                    highlight ? highlightedIndicator : null ] }>
47 57
                 <Icon
48 58
                     src = { icon }
49 59
                     style = { [

+ 2
- 0
react/features/filmstrip/components/native/RaisedHandIndicator.js View File

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

Loading…
Cancel
Save