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

+ 1
- 1
css/_videolayout_default.scss View File

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

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

11
 
11
 
12
 type Props = {
12
 type Props = {
13
 
13
 
14
+    /**
15
+     * Overwritten background color when indicator is highlighted.
16
+     */
17
+    backgroundColor?: string;
18
+
14
     /**
19
     /**
15
      * True if a highlighted background has to be applied.
20
      * True if a highlighted background has to be applied.
16
      */
21
      */
38
      * @inheritdoc
43
      * @inheritdoc
39
      */
44
      */
40
     render() {
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
         return (
53
         return (
44
             <View
54
             <View
45
                 style = { [ BASE_INDICATOR,
55
                 style = { [ BASE_INDICATOR,
46
-                    highlight ? styles.highlightedIndicator : null ] }>
56
+                    highlight ? highlightedIndicator : null ] }>
47
                 <Icon
57
                 <Icon
48
                     src = { icon }
58
                     src = { icon }
49
                     style = { [
59
                     style = { [

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

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

Loading…
Cancel
Save