feat(filmstrip): fix indicators size

react/features/filmstrip/components/native/styles.js

@@ -7,9 +7,14 @@ import { SMALL_THUMBNAIL_SIZE } from '../../constants';
 export const AVATAR_SIZE = 50;
 
 const indicatorContainer = {
+    alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
     borderRadius: BaseTheme.shape.borderRadius,
+    flexShrink: 1,
+    height: 24,
+    justifyContent: 'center',
     margin: 2,
+    minWidth: 16,
     padding: 2
 };
 
@@ -53,12 +58,12 @@ export default {
      * to {@code FILMSTRIP_SIZE}.
      */
     filmstripWide: {
-        bottom: 0,
+        bottom: BaseTheme.spacing[0],
         flexDirection: 'column',
         flexGrow: 0,
         position: 'absolute',
-        right: 0,
-        top: 0
+        right: BaseTheme.spacing[0],
+        top: BaseTheme.spacing[0]
     },
 
     /**
@@ -103,7 +108,7 @@ export default {
         alignItems: 'stretch',
         backgroundColor: BaseTheme.palette.ui02,
         borderColor: '#424242',
-        borderRadius: 4,
+        borderRadius: BaseTheme.shape.borderRadius,
         borderStyle: 'solid',
         borderWidth: 1,
         flex: 1,
@@ -118,30 +123,22 @@ export default {
     },
 
     indicatorContainer: {
-        ...indicatorContainer,
-        flexShrink: 1,
-        height: 32,
-        justifyContent: 'center',
-        marginBottom: BaseTheme.spacing[0],
-        marginHorizontal: BaseTheme.spacing[1],
-        marginTop: BaseTheme.spacing[2],
-        width: 32
+        ...indicatorContainer
     },
 
     /**
-     * The thumbnails indicator container.
+     * The thumbnail indicator container.
      */
     thumbnailIndicatorContainer: {
-        alignSelf: 'center',
-        bottom: 4,
+        ...indicatorContainer,
+        bottom: BaseTheme.spacing[1],
         flex: 1,
         flexDirection: 'row',
-        left: 4,
+        left: BaseTheme.spacing[1],
         position: 'absolute',
         maxWidth: '95%',
         overflow: 'hidden',
-        ...indicatorContainer,
-        padding: 0
+        padding: BaseTheme.spacing[0]
     },
 
     bottomIndicatorsContainer: {
@@ -150,14 +147,14 @@ export default {
     },
 
     thumbnailTopIndicatorContainer: {
-        padding: 4,
+        flexDirection: 'row',
+        padding: BaseTheme.spacing[1],
         position: 'absolute',
-        top: 0,
-        flexDirection: 'row'
+        top: BaseTheme.spacing[0]
     },
 
     thumbnailTopLeftIndicatorContainer: {
-        left: 0
+        left: BaseTheme.spacing[0]
     },
 
     raisedHandIndicator: {