fix(participants-pane): leave breakout room button appearance

react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx

@@ -1,14 +1,20 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import Button from '../../../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants';
+// @ts-ignore
 import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';
 
+// @ts-ignore
 import styles from './styles';
 
+/**
+ * Button to add a breakout room.
+ *
+ * @returns {JSX.Element} - The add breakout room button.
+ */
 const AddBreakoutRoomButton = () => {
     const dispatch = useDispatch();
 
@@ -21,7 +27,7 @@ const AddBreakoutRoomButton = () => {
             accessibilityLabel = 'breakoutRooms.actions.add'
             label = 'breakoutRooms.actions.add'
             onPress = { onAdd }
-            style = { styles.addButton }
+            style = { styles.button }
             type = { BUTTON_TYPES.SECONDARY } />
     );
 };

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

@@ -1,15 +1,20 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import Button from '../../../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants';
+// @ts-ignore
 import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';
 
+// @ts-ignore
 import styles from './styles';
 
-
+/**
+ * Button to auto assign participants to breakout rooms.
+ *
+ * @returns {JSX.Element} - The auto assign button.
+ */
 const AutoAssignButton = () => {
     const dispatch = useDispatch();
 

react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx

@@ -1,17 +1,23 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
+// @ts-ignore
 import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
+import Button from '../../../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
+// @ts-ignore
 import { moveToRoom } from '../../../../../breakout-rooms/actions';
 
+// @ts-ignore
 import styles from './styles';
 
+/**
+ * Button to leave a breakout rooms.
+ *
+ * @returns {JSX.Element} - The leave breakout room button.
+ */
 const LeaveBreakoutRoomButton = () => {
-    const { t } = useTranslation();
     const dispatch = useDispatch();
 
     const onLeave = useCallback(() => {
@@ -22,12 +28,11 @@ const LeaveBreakoutRoomButton = () => {
 
     return (
         <Button
-            accessibilityLabel = { t('breakoutRooms.actions.leaveBreakoutRoom') }
+            accessibilityLabel = 'breakoutRooms.actions.leaveBreakoutRoom'
-            children = { t('breakoutRooms.actions.leaveBreakoutRoom') }
+            label = 'breakoutRooms.actions.leaveBreakoutRoom'
-            labelStyle = { styles.leaveButtonLabel }
-            mode = 'contained'
             onPress = { onLeave }
-            style = { styles.transparentButton } />
+            style = { styles.button }
+            type = { BUTTON_TYPES.DESTRUCTIVE } />
     );
 };
 

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

@@ -8,18 +8,12 @@ const baseButton = {
     marginRight: BaseTheme.spacing[3]
 };
 
-const baseLabel = {
-    fontSize: 15,
-    lineHeight: 30,
-    textTransform: 'capitalize'
-};
-
 /**
  * The styles of the native components of the feature {@code breakout rooms}.
  */
 export default {
 
-    addButton: {
+    button: {
         marginTop: BaseTheme.spacing[3],
         marginLeft: BaseTheme.spacing[3],
         marginRight: BaseTheme.spacing[3]
@@ -66,11 +60,6 @@ export default {
         marginLeft: BaseTheme.spacing[2]
     },
 
-    leaveButtonLabel: {
-        ...baseLabel,
-        color: BaseTheme.palette.textError
-    },
-
     autoAssignLabel: {
         color: BaseTheme.palette.link01
     },