feat(base): TERTIARY type rework

react/features/base/react/components/native/Button.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button as NativePaperButton } from 'react-native-paper';
+import {
+    Button as NativePaperButton,
+    Text,
+    TouchableRipple
+} from 'react-native-paper';
 
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 import styles from './styles';
@@ -20,7 +24,7 @@ const Button: React.FC<ButtonProps> = ({
     type
 }: ButtonProps) => {
     const { t } = useTranslation();
-    const { CONTAINED, TEXT } = BUTTON_MODES;
+    const { CONTAINED } = BUTTON_MODES;
     const { DESTRUCTIVE, PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
 
     let buttonLabelStyles;
@@ -40,9 +44,6 @@ const Button: React.FC<ButtonProps> = ({
         color = BaseTheme.palette.actionDanger;
         buttonLabelStyles = styles.buttonLabelDestructive;
         mode = CONTAINED
-    } else if ( type === TERTIARY) {
-        buttonLabelStyles = styles.buttonLabelTertiary
-        mode = TEXT
     }  else {
         color = buttonColor;
         buttonLabelStyles = styles.buttonLabel;
@@ -55,6 +56,26 @@ const Button: React.FC<ButtonProps> = ({
         buttonStyles = styles.button;
     }
 
+    if ( type === TERTIARY) {
+        return (
+            <TouchableRipple
+                accessibilityLabel = { accessibilityLabel }
+                disabled = { disabled }
+                onPress = { onPress }
+                rippleColor = 'transparent'
+                style = { [
+                    buttonStyles,
+                    style
+                ] }>
+                <Text
+                    style = { [
+                    buttonLabelStyles,
+                    labelStyle
+                ] }>{ t(label) }</Text>
+            </TouchableRipple>
+        );
+    }
+
     return (
         <NativePaperButton
             accessibilityLabel = { t(accessibilityLabel) }

react/features/base/react/constants.js

@@ -20,6 +20,5 @@ export const BUTTON_TYPES = {
  * The modes of the buttons.
  */
 export const BUTTON_MODES = {
-    CONTAINED: 'contained',
-    TEXT: 'text'
+    CONTAINED: 'contained'
 };

react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.js

@@ -23,7 +23,7 @@ const AutoAssignButton = () => {
             label = 'breakoutRooms.actions.autoAssign'
             labelStyle = { styles.autoAssignLabel }
             onPress = { onAutoAssign }
-            style = { styles.transparentButton }
+            style = { styles.autoAssignButton }
             type = { BUTTON_TYPES.TERTIARY } />
     );
 };

react/features/participants-pane/components/breakout-rooms/components/native/styles.js

@@ -66,10 +66,6 @@ export default {
         marginLeft: BaseTheme.spacing[2]
     },
 
-    transparentButton: {
-        marginTop: BaseTheme.spacing[3]
-    },
-
     leaveButtonLabel: {
         ...baseLabel,
         color: BaseTheme.palette.textError
@@ -77,5 +73,11 @@ export default {
 
     autoAssignLabel: {
         color: BaseTheme.palette.link01
+    },
+
+    autoAssignButton: {
+        alignSelf: 'center',
+        justifyContent: 'center',
+        marginTop: BaseTheme.spacing[3]
     }
 };