fix: Native styles fixes (#12606)

* feat(conference/native): update indicator styles

* feat(prejoin/native): removed unnecessary styles

* feat(mobile/navigation): fixed header buttons style

* feat(mobile/navigation): fixed linter

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

@@ -129,8 +129,8 @@ export default {
     },
 
     roomTimer: {
-        color: BaseTheme.palette.text01,
         ...BaseTheme.typography.bodyShortBold,
+        color: BaseTheme.palette.text01,
         paddingHorizontal: 8,
         paddingVertical: 6,
         textAlign: 'center'
@@ -138,8 +138,9 @@ export default {
 
     roomTimerView: {
         backgroundColor: BaseTheme.palette.ui03,
-        borderRadius: 3,
+        borderRadius: BaseTheme.shape.borderRadius,
         justifyContent: 'center',
+        minHeight: 32,
         minWidth: 50
     },
 
@@ -190,6 +191,7 @@ export default {
     raisedHandsCountLabel: {
         alignItems: 'center',
         backgroundColor: BaseTheme.palette.warning02,
+        borderRadius: BaseTheme.shape.borderRadius,
         flexDirection: 'row',
         marginLeft: BaseTheme.spacing[0],
         marginBottom: BaseTheme.spacing[0]

react/features/mobile/navigation/components/HeaderNavigationButton.js

@@ -2,18 +2,11 @@ import React from 'react';
 import { Text, TouchableRipple } from 'react-native-paper';
 
 import { Icon } from '../../../base/icons';
-import type { StyleType } from '../../../base/styles';
-import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import { navigationStyles } from './styles';
 
 type Props = {
 
-    /**
-     * Style of the header button .
-     */
-    buttonStyle?: StyleType,
-
     /**
      * Is the button disabled?
      */
@@ -42,7 +35,6 @@ type Props = {
 
 const HeaderNavigationButton
     = ({
-        buttonStyle,
         disabled,
         label,
         onPress,
@@ -55,14 +47,10 @@ const HeaderNavigationButton
                     src ? (
                         <TouchableRipple
                             onPress = { onPress }
-                            style = { [
+                            style = { navigationStyles.headerNavigationButtonIcon } >
-                                buttonStyle,
-                                navigationStyles.headerNavigationButtonIcon ] } >
                             <Icon
-                                color = { BaseTheme.palette.link01Active }
                                 size = { 24 }
-                                src = { src }
+                                src = { src } />
-                                style = { navigationStyles.headerNavigationIcon } />
                         </TouchableRipple>
                     ) : (
                         <TouchableRipple

react/features/mobile/navigation/components/styles.js

@@ -7,12 +7,12 @@ export const TEXT_COLOR = BaseTheme.palette.text01;
 const HEADER_ACTION_BUTTON_SIZE = 17;
 
 const headerNavigationButton = {
-    alignContent: 'center',
+    alignItems: 'center',
-    height: '100%',
+    justifyContent: 'center'
-    justifyItems: 'center'
 };
 
 const headerNavigationText = {
+    ...BaseTheme.typography.bodyShortBoldLarge,
     color: BaseTheme.palette.link01,
     fontSize: HEADER_ACTION_BUTTON_SIZE
 };
@@ -49,29 +49,26 @@ export const navigationStyles = {
 
     headerNavigationButtonIcon: {
         ...headerNavigationButton,
-        paddingTop: 18,
+        height: BaseTheme.spacing[5],
-        width: BaseTheme.spacing[7]
+        paddingLeft: BaseTheme.spacing[3],
+        width: BaseTheme.spacing[5]
     },
 
     headerNavigationButtonText: {
         ...headerNavigationButton,
-        paddingTop: 10,
+        height: BaseTheme.spacing[9],
-        width: BaseTheme.spacing[10]
+        width: BaseTheme.spacing[9]
-    },
-
-    headerNavigationIcon: {
-        marginLeft: 12
     },
 
     headerNavigationText: {
         ...headerNavigationText,
-        marginLeft: BaseTheme.spacing[3]
+        marginLeft: BaseTheme.spacing[2]
     },
 
     headerNavigationTextBold: {
         ...headerNavigationText,
-        ...BaseTheme.typography.labelButton,
+        ...BaseTheme.typography.bodyShortRegularLarge,
-        marginRight: BaseTheme.spacing[3]
+        marginRight: BaseTheme.spacing[1]
     },
 
     unreadCounterContainer: {

react/features/prejoin/components/native/Prejoin.tsx

@@ -126,18 +126,15 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     let contentWrapperStyles;
     let contentContainerStyles;
     let largeVideoContainerStyles;
-    let toolboxContainerStyles;
 
     if (aspectRatio === ASPECT_RATIO_NARROW) {
         contentWrapperStyles = styles.contentWrapper;
         contentContainerStyles = styles.contentContainer;
         largeVideoContainerStyles = styles.largeVideoContainer;
-        toolboxContainerStyles = styles.toolboxContainer;
     } else {
         contentWrapperStyles = styles.contentWrapperWide;
         contentContainerStyles = styles.contentContainerWide;
         largeVideoContainerStyles = styles.largeVideoContainerWide;
-        toolboxContainerStyles = styles.toolboxContainerWide;
     }
 
     return (
@@ -161,7 +158,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                 </View>
             }
             <View style = { contentContainerStyles }>
-                <View style = { toolboxContainerStyles }>
+                <View style = { styles.toolboxContainer }>
                     <AudioMuteButton
                         // @ts-ignore
                         styles = { styles.buttonStylesBorderless } />

react/features/prejoin/components/styles.js

@@ -2,6 +2,7 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 
 export default {
+
     joinButton: {
         marginTop: BaseTheme.spacing[3],
         width: 352
@@ -77,11 +78,6 @@ export default {
         width: 148
     },
 
-    toolboxContainerWide: {
-        flexDirection: 'row',
-        justifyContent: 'center'
-    },
-
     formWrapper: {
         alignItems: 'center',
         justifyContent: 'center'