From 7854437e31adbc40b600d151763f857dda6ddd7d Mon Sep 17 00:00:00 2001
From: Calin Chitu <calinte2002@yahoo.co.uk>
Date: Thu, 1 Jul 2021 17:37:45 +0300
Subject: [PATCH] feat(native-participants-pane) slider ui fixes

---
 .../video-menu/components/native/VolumeSlider.js   | 14 +++++++++-----
 .../video-menu/components/native/styles.js         |  4 ++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/react/features/video-menu/components/native/VolumeSlider.js b/react/features/video-menu/components/native/VolumeSlider.js
index 3a518f2b7..9e93a357e 100644
--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/react/features/video-menu/components/native/VolumeSlider.js
@@ -1,9 +1,8 @@
 // @flow
 
-import Slider from '@react-native-community/slider';
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import { View, Slider } from 'react-native';
 import { withTheme } from 'react-native-paper';
 
 import { translate } from '../../../base/i18n';
@@ -16,6 +15,9 @@ import { connect } from '../../../base/redux';
 import { setVolume } from '../../../participants-pane/actions.native';
 import { VOLUME_SLIDER_SCALE } from '../../constants';
 
+import styles from './styles';
+
+
 /**
  * The type of the React {@code Component} props of {@link VolumeSlider}.
  */
@@ -101,16 +103,18 @@ class VolumeSlider extends PureComponent<Props, State> {
         const onVolumeChange = _startSilent ? undefined : this._onVolumeChange;
 
         return (
-            <View>
+            <View style = { styles.volumeSliderContainer } >
                 <Icon
-                    size = { 24 }
-                    src = { IconVolumeEmpty } />
+                    size = { 20 }
+                    src = { IconVolumeEmpty }
+                    style = { styles.volumeIcon } />
                 <Slider
                     maximumTrackTintColor = { palette.field02 }
                     maximumValue = { VOLUME_SLIDER_SCALE }
                     minimumTrackTintColor = { palette.action01 }
                     minimumValue = { 0 }
                     onValueChange = { onVolumeChange }
+                    style = { styles.sliderContainer }
                     thumbTintColor = { palette.field02 }
                     value = { volumeLevel } />
             </View>
diff --git a/react/features/video-menu/components/native/styles.js b/react/features/video-menu/components/native/styles.js
index 4de866ec6..9323c715e 100644
--- a/react/features/video-menu/components/native/styles.js
+++ b/react/features/video-menu/components/native/styles.js
@@ -63,7 +63,7 @@ export default createStyleSheet({
     },
 
     sliderContainer: {
-        marginLeft: BaseTheme.spacing[3],
-        minWidth: '88%'
+        marginLeft: BaseTheme.spacing[2],
+        minWidth: '92%'
     }
 });