ref(ui-components) Move components to base/ui (#11912)

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

@@ -6,8 +6,7 @@ import { TouchableRipple } from 'react-native-paper';
 import { Icon } from '../../../icons';
 // @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
-// @ts-ignore
+import { BUTTON_TYPES } from '../../../ui/constants';
-import { BUTTON_TYPES } from '../../constants';
 import { IconButtonProps } from '../../types';
 
 // @ts-ignore

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

@@ -136,17 +136,6 @@ export const BASE_INDICATOR = {
     justifyContent: 'center'
 };
 
-const button = {
-    borderRadius: BaseTheme.shape.borderRadius,
-    height: BUTTON_HEIGHT
-};
-
-const buttonLabel = {
-    ...BaseTheme.typography.bodyShortBold,
-    padding: 6,
-    textTransform: 'capitalize'
-};
-
 const iconButtonContainer = {
     alignItems: 'center',
     display: 'flex',
@@ -163,44 +152,6 @@ const iconButtonContainer = {
 export default {
     ...SECTION_LIST_STYLES,
 
-    button: {
-        ...button
-    },
-
-    buttonLabel: {
-        ...buttonLabel
-    },
-
-    buttonLabelDisabled: {
-        ...buttonLabel,
-        color: BaseTheme.palette.text03
-    },
-
-    buttonDisabled: {
-        ...button,
-        backgroundColor: BaseTheme.palette.actionDisabled
-    },
-
-    buttonLabelPrimary: {
-        ...buttonLabel,
-        color: BaseTheme.palette.text01
-    },
-
-    buttonLabelSecondary: {
-        ...buttonLabel,
-        color: BaseTheme.palette.text0
-    },
-
-    buttonLabelDestructive: {
-        ...buttonLabel,
-        color: BaseTheme.palette.text01
-    },
-
-    buttonLabelTertiary: {
-        ...buttonLabel,
-        color: BaseTheme.palette.text01
-    },
-
     iconButtonContainer: {
         ...iconButtonContainer
     },

react/features/base/react/constants.ts

@@ -3,20 +3,3 @@
  * everything, such as modal-type of components, or dialogs.
  */
 export const OVERLAY_Z_INDEX = 1000;
-
-/**
- * The types of the buttons.
- */
-export enum BUTTON_TYPES {
-    DESTRUCTIVE = 'destructive',
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    TERTIARY = 'tertiary'
-}
-
-/**
- * The modes of the buttons.
- */
-export const BUTTON_MODES = {
-    CONTAINED: 'contained'
-};

react/features/base/react/types.ts

@@ -1,12 +1,3 @@
-import { ButtonProps } from '../components/common/types';
-
-export interface IButtonProps extends ButtonProps {
-    color?: string;
-    labelStyle?: Object|undefined;
-    onPress?: Function;
-    style?: Object|undefined;
-}
-
 export interface IconButtonProps {
     accessibilityLabel?: string;
     color?: string;

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

@@ -7,15 +7,19 @@ import {
     TouchableRipple
 } from 'react-native-paper';
 
-// @ts-ignore
-import BaseTheme from '../../../ui/components/BaseTheme.native';
-// @ts-ignore
 import { BUTTON_MODES, BUTTON_TYPES } from '../../constants';
-import { IButtonProps } from '../../types';
-
 // @ts-ignore
-import styles from './styles';
+import BaseTheme from '../BaseTheme.native';
+import { ButtonProps } from '../types';
 
+import styles from './buttonStyles';
+
+export interface IButtonProps extends ButtonProps {
+    color?: string;
+    labelStyle?: Object | undefined;
+    onPress?: Function;
+    style?: Object | undefined;
+}
 
 const Button: React.FC<IButtonProps> = ({
     accessibilityLabel,

react/features/base/ui/components/native/Input.tsx

@@ -10,12 +10,12 @@ import {
     ViewStyle
 } from 'react-native';
 
-import { InputProps } from '../../../components/common/types';
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
+import { InputProps } from '../types';
 
 import styles from './inputStyles';
 

react/features/base/ui/components/native/buttonStyles.ts

@@ -0,0 +1,55 @@
+// @ts-ignore
+import BaseTheme from '../../../ui/components/BaseTheme.native';
+
+const BUTTON_HEIGHT = BaseTheme.spacing[7];
+
+const button = {
+    borderRadius: BaseTheme.shape.borderRadius,
+    height: BUTTON_HEIGHT
+};
+
+const buttonLabel = {
+    ...BaseTheme.typography.bodyShortBold,
+    padding: 6,
+    textTransform: 'capitalize'
+};
+
+export default {
+    button: {
+        ...button
+    },
+
+    buttonLabel: {
+        ...buttonLabel
+    },
+
+    buttonLabelDisabled: {
+        ...buttonLabel,
+        color: BaseTheme.palette.text03
+    },
+
+    buttonDisabled: {
+        ...button,
+        backgroundColor: BaseTheme.palette.actionDisabled
+    },
+
+    buttonLabelPrimary: {
+        ...buttonLabel,
+        color: BaseTheme.palette.text01
+    },
+
+    buttonLabelSecondary: {
+        ...buttonLabel,
+        color: BaseTheme.palette.text0
+    },
+
+    buttonLabelDestructive: {
+        ...buttonLabel,
+        color: BaseTheme.palette.text01
+    },
+
+    buttonLabelTertiary: {
+        ...buttonLabel,
+        color: BaseTheme.palette.text01
+    }
+};

react/features/base/ui/components/types.ts

@@ -1,4 +1,4 @@
-import { BUTTON_TYPES } from '../../react/constants';
+import { BUTTON_TYPES } from '../constants';
 
 export interface ButtonProps {
 

react/features/base/ui/components/web/Button.tsx

@@ -2,12 +2,12 @@ import { makeStyles } from '@material-ui/core';
 import clsx from 'clsx';
 import React from 'react';
 
-import Icon from '../../icons/components/Icon';
+import Icon from '../../../icons/components/Icon';
-import { BUTTON_TYPES } from '../../react/constants';
+import { withPixelLineHeight } from '../../../styles/functions.web';
-import { withPixelLineHeight } from '../../styles/functions.web';
+import { BUTTON_TYPES } from '../../constants';
-import { Theme } from '../../ui/types';
+import { Theme } from '../../types';
+import { ButtonProps } from '../types';
 
-import { ButtonProps } from './types';
 
 interface IButtonProps extends ButtonProps {
 

react/features/base/ui/components/web/Input.tsx

@@ -2,13 +2,12 @@ import { makeStyles } from '@material-ui/core';
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
 
-import { isMobileBrowser } from '../../environment/utils';
+import { isMobileBrowser } from '../../../environment/utils';
-import Icon from '../../icons/components/Icon';
+import Icon from '../../../icons/components/Icon';
-import { IconCloseCircle } from '../../icons/svg/index';
+import { IconCloseCircle } from '../../../icons/svg/index';
-import { withPixelLineHeight } from '../../styles/functions.web';
+import { withPixelLineHeight } from '../../../styles/functions.web';
-import { Theme } from '../../ui/types';
+import { Theme } from '../../../ui/types';
-
+import { InputProps } from '../types';
-import { InputProps } from './types';
 
 interface IInputProps extends InputProps {
     bottomLabel?: string;

react/features/base/ui/constants.ts

@@ -1,4 +1,21 @@
-// @flow
+import { Theme } from './types';
+
+/**
+ * The types of the buttons.
+ */
+export enum BUTTON_TYPES {
+    DESTRUCTIVE = 'destructive',
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary'
+}
+
+/**
+ * The modes of the buttons.
+ */
+export const BUTTON_MODES = {
+    CONTAINED: 'contained'
+};
 
 /**
  * An object containing all the class names for common CSS.
@@ -25,7 +42,7 @@ export const commonClassName = {
  *
  * @returns {Object} - The common styles.
  */
-export const commonStyles = (theme: Object) => {
+export const commonStyles = (theme: Theme) => {
     return {
         // '.empty-list'
         [commonClassName.emptyList]: {
@@ -293,7 +310,7 @@ export const commonStyles = (theme: Object) => {
  * @param {Object} theme - The Jitsi theme.
  * @returns {Object}
  */
-export const getGlobalStyles = (theme: Object) => {
+export const getGlobalStyles = (theme: Theme) => {
     return {
         // @atlaskit/modal-dialog OVERRIDES
         '.atlaskit-portal div[role=dialog]': {

react/features/base/ui/types.ts

@@ -7,8 +7,8 @@ interface TypographyType {
 
 export interface Theme {
     breakpoints: {
-        down: (value: number) => string;
+        down: (value: number|string) => string;
-        up: (value: number) => string;
+        up: (value: number|string) => string;
     },
     palette: {
         action01: string;

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

@@ -5,9 +5,9 @@ import { getFeatureFlag, INVITE_ENABLED } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import { Icon, IconAddPeople } from '../../../base/icons';
 import { getParticipantCountWithFake } from '../../../base/participants';
-import Button from '../../../base/react/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import { connect } from '../../../base/redux';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { doInvitePeople } from '../../../invite/actions.native';
 

react/features/conference/components/native/carmode/EndMeetingButton.tsx

@@ -6,9 +6,8 @@ import { useDispatch } from 'react-redux';
 import { createToolbarEvent, sendAnalytics } from '../../../../analytics';
 // @ts-ignore
 import { appNavigate } from '../../../../app/actions';
-import Button from '../../../../base/react/components/native/Button';
+import Button from '../../../../base/ui/components/native/Button';
-// @ts-ignore
+import { BUTTON_TYPES } from '../../../../base/ui/constants';
-import { BUTTON_TYPES } from '../../../../base/react/constants';
 
 import EndMeetingIcon from './EndMeetingIcon';
 // @ts-ignore

react/features/conference/components/native/carmode/SoundDeviceButton.tsx

@@ -4,9 +4,8 @@ import { useDispatch } from 'react-redux';
 
 // @ts-ignore
 import { openSheet } from '../../../../base/dialog/actions';
-import Button from '../../../../base/react/components/native/Button';
+import Button from '../../../../base/ui/components/native/Button';
-// @ts-ignore
+import { BUTTON_TYPES } from '../../../../base/ui/constants';
-import { BUTTON_TYPES } from '../../../../base/react/constants';
 // @ts-ignore
 import AudioRoutePickerDialog from '../../../../mobile/audio-mode/components/AudioRoutePickerDialog';
 

react/features/lobby/components/native/LobbyScreen.js

@@ -6,11 +6,11 @@ import { Text, View, TextInput } from 'react-native';
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../base/react';
-import Button from '../../../base/react/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
 import BaseTheme from '../../../base/ui/components/BaseTheme';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { BrandingImageBackground } from '../../../dynamic-branding';
 import { LargeVideo } from '../../../large-video/components';
 import { navigate }

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

@@ -3,8 +3,8 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import Button from '../../../../../base/react/components/native/Button';
+import Button from '../../../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
 import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';
 
 import styles from './styles';

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

@@ -3,8 +3,8 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import Button from '../../../../../base/react/components/native/Button';
+import Button from '../../../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
 import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';
 
 import styles from './styles';

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

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
-import Button from '../../../../../base/components/common/Button';
+import Button from '../../../../../base/ui/components/web/Button';
-import { BUTTON_TYPES } from '../../../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
 // @ts-ignore
 import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';
 

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

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
-import Button from '../../../../../base/components/common/Button';
+import Button from '../../../../../base/ui/components/web/Button';
-import { BUTTON_TYPES } from '../../../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
 // @ts-ignore
 import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';
 

react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx

@@ -5,8 +5,8 @@ import { useDispatch } from 'react-redux';
 
 // @ts-ignore
 import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
-import Button from '../../../../../base/components/common/Button';
+import Button from '../../../../../base/ui/components/web/Button';
-import { BUTTON_TYPES } from '../../../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
 // @ts-ignore
 import { moveToRoom } from '../../../../../breakout-rooms/actions';
 

react/features/participants-pane/components/native/LobbyParticipantItem.js

@@ -4,8 +4,8 @@ import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { hasRaisedHand } from '../../../base/participants';
-import Button from '../../../base/react/components/native/Button';
+import Button from '../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { approveKnockingParticipant } from '../../../lobby/actions.native';
 import { showContextMenuReject } from '../../actions.native';
 import { MEDIA_STATE } from '../../constants';

react/features/participants-pane/components/native/LobbyParticipantList.js

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { ScrollView, Text, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Button from '../../../base/react/components/native/Button';
+import Button from '../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { admitMultiple } from '../../../lobby/actions.native';
 import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
 

react/features/participants-pane/components/native/MeetingParticipantList.js

@@ -7,10 +7,10 @@ import { FlatList } from 'react-native';
 import { translate } from '../../../base/i18n';
 import { Icon, IconInviteMore } from '../../../base/icons';
 import { getLocalParticipant, getParticipantCountWithFake, getRemoteParticipants } from '../../../base/participants';
-import Button from '../../../base/react/components/native/Button';
-import Input from '../../../base/react/components/native/Input';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import { connect } from '../../../base/redux';
+import Button from '../../../base/ui/components/native/Button';
+import Input from '../../../base/ui/components/native/Input';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
 import { doInvitePeople } from '../../../invite/actions.native';
 import { participantMatchesSearch, shouldRenderInviteButton } from '../../functions';

react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx

@@ -7,10 +7,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { openDialog, openSheet } from '../../../base/dialog';
 // @ts-ignore
 import { IconHorizontalPoints } from '../../../base/icons';
-import Button from '../../../base/react/components/native/Button';
 import IconButton from '../../../base/react/components/native/IconButton';
-// @ts-ignore
+import Button from '../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import MuteEveryoneDialog
 // @ts-ignore
     from '../../../video-menu/components/native/MuteEveryoneDialog';

react/features/participants-pane/components/web/InviteButton.tsx

@@ -5,9 +5,9 @@ import { useDispatch } from 'react-redux';
 
 // @ts-ignore
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
-import Button from '../../../base/components/common/Button';
 import { IconInviteMore } from '../../../base/icons/svg/index';
-import { BUTTON_TYPES } from '../../../base/react/constants';
+import Button from '../../../base/ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 // @ts-ignore
 import { beginAddPeople } from '../../../invite';
 

react/features/participants-pane/components/web/MeetingParticipants.js

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { rejectParticipantAudio } from '../../../av-moderation/actions';
-import Input from '../../../base/components/common/Input';
 import useContextMenu from '../../../base/components/context-menu/useContextMenu';
 import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
 import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
@@ -16,6 +15,7 @@ import {
     getParticipantCountWithFake
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
+import Input from '../../../base/ui/components/web/Input';
 import { normalizeAccents } from '../../../base/util/strings';
 import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { showOverflowDrawer } from '../../../toolbox/functions';

react/features/participants-pane/components/web/ParticipantsPane.js

@@ -3,14 +3,14 @@
 import { withStyles } from '@material-ui/core';
 import React, { Component } from 'react';
 
-import Button from '../../../base/components/common/Button';
 import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
 import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import { connect } from '../../../base/redux';
+import Button from '../../../base/ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions';
 import { MuteEveryoneDialog } from '../../../video-menu/components/';
 import { close } from '../../actions';

react/features/polls/components/native/PollAnswer.js

@@ -5,9 +5,9 @@ import { Switch, Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { getLocalParticipant } from '../../../base/participants';
-import Button from '../../../base/react/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { isSubmitAnswerDisabled } from '../../functions';
 import AbstractPollAnswer from '../AbstractPollAnswer';
 import type { AbstractProps } from '../AbstractPollAnswer';

react/features/polls/components/native/PollCreate.js

@@ -4,9 +4,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View, Text, TextInput, FlatList, Platform } from 'react-native';
 import { Divider, TouchableRipple } from 'react-native-paper';
 
-import Button from '../../../base/react/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import styles
     from '../../../welcome/components/native/settings/components/styles';
 import { ANSWERS_LIMIT, CHAR_LIMIT } from '../../constants';

react/features/polls/components/native/PollsPane.js

@@ -6,8 +6,8 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
-import Button from '../../../base/react/components/native/Button';
+import Button from '../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { getUnreadPollCount } from '../../functions';
 import AbstractPollsPane from '../AbstractPollsPane';
 import type { AbstractProps } from '../AbstractPollsPane';

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

@@ -18,23 +18,21 @@ import { appNavigate } from '../../app/actions.native';
 import { setAudioOnly } from '../../base/audio-only/actions';
 // @ts-ignore
 import { connect } from '../../base/connection/actions.native';
-// @ts-ignore
+import { IconClose } from '../../base/icons/svg/index';
-import { IconClose } from '../../base/icons';
 // @ts-ignore
 import JitsiScreen from '../../base/modal/components/JitsiScreen';
 // @ts-ignore
 import { getLocalParticipant } from '../../base/participants';
 // @ts-ignore
 import { getFieldValue } from '../../base/react';
-import Button from '../../base/react/components/native/Button';
-// @ts-ignore
-import { BUTTON_TYPES } from '../../base/react/constants';
 // @ts-ignore
 import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
 // @ts-ignore
 import { updateSettings } from '../../base/settings';
 // @ts-ignore
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
+import Button from '../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../base/ui/constants';
 import { BrandingImageBackground } from '../../dynamic-branding';
 // @ts-ignore
 import { LargeVideo } from '../../large-video/components';

react/features/reactions/components/native/RaiseHandButton.js

@@ -15,10 +15,10 @@ import {
     hasRaisedHand,
     raiseHand
 } from '../../../base/participants';
-import Button from '../../../base/react/components/native/Button';
-import { BUTTON_TYPES } from '../../../base/react/constants';
 import { connect } from '../../../base/redux';
 import { type AbstractButtonProps } from '../../../base/toolbox/components';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 
 import styles from './styles';
 

react/features/recording/components/Recording/native/HighlightDialog.js

@@ -4,8 +4,8 @@ import { Text, View } from 'react-native';
 import { useDispatch, batch } from 'react-redux';
 
 import { BottomSheet, hideSheet } from '../../../../base/dialog';
-import Button from '../../../../base/react/components/native/Button';
+import Button from '../../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../../base/react/constants';
+import { BUTTON_TYPES } from '../../../../base/ui/constants';
 import { highlightMeetingMoment } from '../../../actions.any';
 import styles from '../styles.native';
 

react/features/security/components/security-dialog/native/SecurityDialog.js

@@ -14,10 +14,10 @@ import { getFeatureFlag, MEETING_PASSWORD_ENABLED } from '../../../../base/flags
 import { translate } from '../../../../base/i18n';
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 import { isLocalParticipantModerator } from '../../../../base/participants';
-import Button from '../../../../base/react/components/native/Button';
-import { BUTTON_TYPES } from '../../../../base/react/constants';
 import { connect } from '../../../../base/redux';
 import BaseTheme from '../../../../base/ui/components/BaseTheme';
+import Button from '../../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../../base/ui/constants';
 import { isInBreakoutRoom } from '../../../../breakout-rooms/functions';
 import { toggleLobbyMode } from '../../../../lobby/actions.any';
 import LobbyModeSwitch