diff --git a/react/features/always-on-top/AudioMuteButton.js b/react/features/always-on-top/AudioMuteButton.js
index f4caec5f8a..337b44e96e 100644
--- a/react/features/always-on-top/AudioMuteButton.js
+++ b/react/features/always-on-top/AudioMuteButton.js
@@ -1,10 +1,7 @@
 // @flow
 
-// XXX Import the button directly in order to avoid bringing in other components
-// that use lib-jitsi-meet, which always-on-top does not import.
-import AbstractAudioMuteButton
-    from '../toolbox/components/buttons/AbstractAudioMuteButton';
-import type { Props } from '../toolbox/components/buttons/AbstractButton';
+import { AbstractAudioMuteButton } from '../base/toolbox';
+import type { AbstractButtonProps as Props } from '../base/toolbox';
 
 const { api } = window.alwaysOnTop;
 
diff --git a/react/features/always-on-top/HangupButton.js b/react/features/always-on-top/HangupButton.js
index b4fb41e1af..c8b7e37cc6 100644
--- a/react/features/always-on-top/HangupButton.js
+++ b/react/features/always-on-top/HangupButton.js
@@ -1,10 +1,7 @@
 // @flow
 
-// XXX Import the button directly in order to avoid bringing in other components
-// that use lib-jitsi-meet, which always-on-top does not import.
-import AbstractHangupButton
-    from '../toolbox/components/buttons/AbstractHangupButton';
-import type { Props } from '../toolbox/components/buttons/AbstractButton';
+import { AbstractHangupButton } from '../base/toolbox';
+import type { AbstractButtonProps as Props } from '../base/toolbox';
 
 const { api } = window.alwaysOnTop;
 
diff --git a/react/features/always-on-top/VideoMuteButton.js b/react/features/always-on-top/VideoMuteButton.js
index 377f7f680b..37e7d3971c 100644
--- a/react/features/always-on-top/VideoMuteButton.js
+++ b/react/features/always-on-top/VideoMuteButton.js
@@ -1,10 +1,7 @@
 // @flow
 
-// XXX Import the button directly in order to avoid bringing in other components
-// that use lib-jitsi-meet, which always-on-top does not import.
-import AbstractVideoMuteButton
-    from '../toolbox/components/buttons/AbstractVideoMuteButton';
-import type { Props } from '../toolbox/components/buttons/AbstractButton';
+import { AbstractVideoMuteButton } from '../base/toolbox';
+import type { AbstractButtonProps as Props } from '../base/toolbox';
 
 const { api } = window.alwaysOnTop;
 
diff --git a/react/features/toolbox/components/buttons/AbstractAudioMuteButton.js b/react/features/base/toolbox/components/AbstractAudioMuteButton.js
similarity index 92%
rename from react/features/toolbox/components/buttons/AbstractAudioMuteButton.js
rename to react/features/base/toolbox/components/AbstractAudioMuteButton.js
index f462aca841..201b68340b 100644
--- a/react/features/toolbox/components/buttons/AbstractAudioMuteButton.js
+++ b/react/features/base/toolbox/components/AbstractAudioMuteButton.js
@@ -6,7 +6,9 @@ import type { Props } from './AbstractButton';
 /**
  * An abstract implementation of a button for toggling audio mute.
  */
-class AbstractAudioMuteButton<P: Props, S: *> extends AbstractButton<P, S> {
+export default class AbstractAudioMuteButton<P: Props, S: *>
+    extends AbstractButton<P, S> {
+
     accessibilityLabel = 'Audio mute';
     iconName = 'icon-microphone';
     toggledIconName = 'icon-mic-disabled toggled';
@@ -58,5 +60,3 @@ class AbstractAudioMuteButton<P: Props, S: *> extends AbstractButton<P, S> {
         // To be implemented by subclass.
     }
 }
-
-export default AbstractAudioMuteButton;
diff --git a/react/features/toolbox/components/buttons/AbstractButton.js b/react/features/base/toolbox/components/AbstractButton.js
similarity index 97%
rename from react/features/toolbox/components/buttons/AbstractButton.js
rename to react/features/base/toolbox/components/AbstractButton.js
index f549d6c526..ceaa09c501 100644
--- a/react/features/toolbox/components/buttons/AbstractButton.js
+++ b/react/features/base/toolbox/components/AbstractButton.js
@@ -2,8 +2,8 @@
 
 import React, { Component } from 'react';
 
-import ToolboxItem from '../ToolboxItem';
-import type { Styles } from '../AbstractToolboxItem';
+import type { Styles } from './AbstractToolboxItem';
+import ToolboxItem from './ToolboxItem';
 
 export type Props = {
 
diff --git a/react/features/toolbox/components/buttons/AbstractHangupButton.js b/react/features/base/toolbox/components/AbstractHangupButton.js
similarity index 85%
rename from react/features/toolbox/components/buttons/AbstractHangupButton.js
rename to react/features/base/toolbox/components/AbstractHangupButton.js
index b55903bcd0..181ad07a01 100644
--- a/react/features/toolbox/components/buttons/AbstractHangupButton.js
+++ b/react/features/base/toolbox/components/AbstractHangupButton.js
@@ -6,7 +6,9 @@ import type { Props } from './AbstractButton';
 /**
  * An abstract implementation of a button for disconnecting a conference.
  */
-class AbstractHangupButton<P : Props, S: *> extends AbstractButton<P, S> {
+export default class AbstractHangupButton<P : Props, S: *>
+    extends AbstractButton<P, S> {
+
     accessibilityLabel = 'Hangup';
     iconName = 'icon-hangup';
 
@@ -31,5 +33,3 @@ class AbstractHangupButton<P : Props, S: *> extends AbstractButton<P, S> {
         // To be implemented by subclass.
     }
 }
-
-export default AbstractHangupButton;
diff --git a/react/features/toolbox/components/AbstractToolboxItem.js b/react/features/base/toolbox/components/AbstractToolboxItem.js
similarity index 100%
rename from react/features/toolbox/components/AbstractToolboxItem.js
rename to react/features/base/toolbox/components/AbstractToolboxItem.js
diff --git a/react/features/toolbox/components/buttons/AbstractVideoMuteButton.js b/react/features/base/toolbox/components/AbstractVideoMuteButton.js
similarity index 92%
rename from react/features/toolbox/components/buttons/AbstractVideoMuteButton.js
rename to react/features/base/toolbox/components/AbstractVideoMuteButton.js
index f8ed25abec..7fe979851e 100644
--- a/react/features/toolbox/components/buttons/AbstractVideoMuteButton.js
+++ b/react/features/base/toolbox/components/AbstractVideoMuteButton.js
@@ -6,7 +6,9 @@ import type { Props } from './AbstractButton';
 /**
  * An abstract implementation of a button for toggling video mute.
  */
-class AbstractVideoMuteButton<P : Props, S : *> extends AbstractButton<P, S> {
+export default class AbstractVideoMuteButton<P : Props, S : *>
+    extends AbstractButton<P, S> {
+
     accessibilityLabel = 'Video mute';
     iconName = 'icon-camera';
     toggledIconName = 'icon-camera-disabled toggled';
@@ -57,5 +59,3 @@ class AbstractVideoMuteButton<P : Props, S : *> extends AbstractButton<P, S> {
         // To be implemented by subclass.
     }
 }
-
-export default AbstractVideoMuteButton;
diff --git a/react/features/toolbox/components/ToolboxItem.native.js b/react/features/base/toolbox/components/ToolboxItem.native.js
similarity index 96%
rename from react/features/toolbox/components/ToolboxItem.native.js
rename to react/features/base/toolbox/components/ToolboxItem.native.js
index eda1a77075..ed3ccd6824 100644
--- a/react/features/toolbox/components/ToolboxItem.native.js
+++ b/react/features/base/toolbox/components/ToolboxItem.native.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import { TouchableHighlight } from 'react-native';
 
-import { Icon } from '../../base/font-icons';
+import { Icon } from '../../../base/font-icons';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props } from './AbstractToolboxItem';
diff --git a/react/features/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js
similarity index 100%
rename from react/features/toolbox/components/ToolboxItem.web.js
rename to react/features/base/toolbox/components/ToolboxItem.web.js
diff --git a/react/features/base/toolbox/components/index.js b/react/features/base/toolbox/components/index.js
new file mode 100644
index 0000000000..59444b1fd8
--- /dev/null
+++ b/react/features/base/toolbox/components/index.js
@@ -0,0 +1,7 @@
+// @flow
+
+export { default as AbstractButton } from './AbstractButton';
+export type { Props as AbstractButtonProps } from './AbstractButton';
+export { default as AbstractAudioMuteButton } from './AbstractAudioMuteButton';
+export { default as AbstractHangupButton } from './AbstractHangupButton';
+export { default as AbstractVideoMuteButton } from './AbstractVideoMuteButton';
diff --git a/react/features/base/toolbox/index.js b/react/features/base/toolbox/index.js
new file mode 100644
index 0000000000..68ddef9ba1
--- /dev/null
+++ b/react/features/base/toolbox/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export * from './components';
diff --git a/react/features/filmstrip/components/index.js b/react/features/filmstrip/components/index.js
index 0205f7fc69..cda61441e4 100644
--- a/react/features/filmstrip/components/index.js
+++ b/react/features/filmstrip/components/index.js
@@ -1,3 +1 @@
 export * from './_';
-
-export { default as Filmstrip } from './Filmstrip';
diff --git a/react/features/filmstrip/components/native/AudioMutedIndicator.js b/react/features/filmstrip/components/native/AudioMutedIndicator.js
index 5c45ab0aa0..1d7c2bdd27 100644
--- a/react/features/filmstrip/components/native/AudioMutedIndicator.js
+++ b/react/features/filmstrip/components/native/AudioMutedIndicator.js
@@ -7,7 +7,7 @@ import styles from './styles';
 /**
  * Thumbnail badge for displaying the audio mute status of a participant.
  */
-export class AudioMutedIndicator extends Component {
+export default class AudioMutedIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *
diff --git a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js
index 442fc107e8..0591d94457 100644
--- a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js
+++ b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js
@@ -8,7 +8,7 @@ import styles from './styles';
  * Thumbnail badge showing that the participant is the dominant speaker in
  * the conference.
  */
-export class DominantSpeakerIndicator extends Component {
+export default class DominantSpeakerIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *
diff --git a/react/features/filmstrip/components/Filmstrip.native.js b/react/features/filmstrip/components/native/Filmstrip.js
similarity index 98%
rename from react/features/filmstrip/components/Filmstrip.native.js
rename to react/features/filmstrip/components/native/Filmstrip.js
index 36b6d51c36..e956505b2e 100644
--- a/react/features/filmstrip/components/Filmstrip.native.js
+++ b/react/features/filmstrip/components/native/Filmstrip.js
@@ -4,11 +4,11 @@ import React, { Component } from 'react';
 import { ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Container } from '../../base/react';
+import { Container } from '../../../base/react';
 import {
     isNarrowAspectRatio,
     makeAspectRatioAware
-} from '../../base/responsive-ui';
+} from '../../../base/responsive-ui';
 
 import LocalThumbnail from './LocalThumbnail';
 import styles from './styles';
diff --git a/react/features/filmstrip/components/LocalThumbnail.js b/react/features/filmstrip/components/native/LocalThumbnail.js
similarity index 92%
rename from react/features/filmstrip/components/LocalThumbnail.js
rename to react/features/filmstrip/components/native/LocalThumbnail.js
index eaca85dca5..17ca76680d 100644
--- a/react/features/filmstrip/components/LocalThumbnail.js
+++ b/react/features/filmstrip/components/native/LocalThumbnail.js
@@ -4,9 +4,9 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { getLocalParticipant } from '../../base/participants';
+import { getLocalParticipant } from '../../../base/participants';
 
-import styles from './styles';
+import styles from '../styles';
 import Thumbnail from './Thumbnail';
 
 type Props = {
diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.js b/react/features/filmstrip/components/native/ModeratorIndicator.js
index d48be68438..c06644cb71 100644
--- a/react/features/filmstrip/components/native/ModeratorIndicator.js
+++ b/react/features/filmstrip/components/native/ModeratorIndicator.js
@@ -6,7 +6,7 @@ import styles from './styles';
 /**
  * Thumbnail badge showing that the participant is a conference moderator.
  */
-export class ModeratorIndicator extends Component {
+export default class ModeratorIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *
diff --git a/react/features/filmstrip/components/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js
similarity index 89%
rename from react/features/filmstrip/components/Thumbnail.js
rename to react/features/filmstrip/components/native/Thumbnail.js
index d11d9092f0..69d764614d 100644
--- a/react/features/filmstrip/components/Thumbnail.js
+++ b/react/features/filmstrip/components/native/Thumbnail.js
@@ -2,23 +2,21 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { Audio, MEDIA_TYPE } from '../../base/media';
+import { Audio, MEDIA_TYPE } from '../../../base/media';
 import {
     PARTICIPANT_ROLE,
     ParticipantView,
     pinParticipant
-} from '../../base/participants';
-import { Container } from '../../base/react';
-import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
+} from '../../../base/participants';
+import { Container } from '../../../base/react';
+import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
 
-import {
-    AudioMutedIndicator,
-    DominantSpeakerIndicator,
-    ModeratorIndicator,
-    styles,
-    VideoMutedIndicator
-} from './_';
-import { AVATAR_SIZE } from './styles';
+import AudioMutedIndicator from './AudioMutedIndicator';
+import DominantSpeakerIndicator from './DominantSpeakerIndicator';
+import ModeratorIndicator from './ModeratorIndicator';
+import { AVATAR_SIZE } from '../styles';
+import styles from './styles';
+import VideoMutedIndicator from './VideoMutedIndicator';
 
 /**
  * React component for video thumbnail.
diff --git a/react/features/filmstrip/components/native/VideoMutedIndicator.js b/react/features/filmstrip/components/native/VideoMutedIndicator.js
index ce757c347c..5bfe0cd23d 100644
--- a/react/features/filmstrip/components/native/VideoMutedIndicator.js
+++ b/react/features/filmstrip/components/native/VideoMutedIndicator.js
@@ -7,7 +7,7 @@ import styles from './styles';
 /**
  * Thumbnail badge for displaying the video mute status of a participant.
  */
-export class VideoMutedIndicator extends Component {
+export default class VideoMutedIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *
diff --git a/react/features/filmstrip/components/native/index.js b/react/features/filmstrip/components/native/index.js
index 36d8e9696e..e05021cd62 100644
--- a/react/features/filmstrip/components/native/index.js
+++ b/react/features/filmstrip/components/native/index.js
@@ -1,5 +1,2 @@
-export * from './AudioMutedIndicator';
-export * from './DominantSpeakerIndicator';
-export * from './ModeratorIndicator';
+export { default as Filmstrip } from './Filmstrip';
 export { default as styles } from './styles';
-export * from './VideoMutedIndicator';
diff --git a/react/features/filmstrip/components/native/styles.js b/react/features/filmstrip/components/native/styles.js
index ded2d7e18e..dc8bb45d69 100644
--- a/react/features/filmstrip/components/native/styles.js
+++ b/react/features/filmstrip/components/native/styles.js
@@ -18,12 +18,6 @@ const indicator = {
  * The styles of the feature filmstrip.
  */
 export default createStyleSheet(platformIndependentStyles, {
-
-    /**
-     * Audio muted indicator style.
-     */
-    thumbnailIndicator: indicator,
-
     dominantSpeakerIndicator: {
         fontSize: 12
     },
@@ -47,5 +41,10 @@ export default createStyleSheet(platformIndependentStyles, {
     thumbnail: {
         height: 80,
         width: 80
-    }
+    },
+
+    /**
+     * Audio muted indicator style.
+     */
+    thumbnailIndicator: indicator
 });
diff --git a/react/features/filmstrip/components/Filmstrip.web.js b/react/features/filmstrip/components/web/Filmstrip.js
similarity index 97%
rename from react/features/filmstrip/components/Filmstrip.web.js
rename to react/features/filmstrip/components/web/Filmstrip.js
index 6171bc1a63..ec87006e45 100644
--- a/react/features/filmstrip/components/Filmstrip.web.js
+++ b/react/features/filmstrip/components/web/Filmstrip.js
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { dockToolbox } from '../../toolbox';
+import { dockToolbox } from '../../../toolbox';
 
-import { setFilmstripHovered } from '../actions';
-import { shouldRemoteVideosBeVisible } from '../functions';
+import { setFilmstripHovered } from '../../actions';
+import { shouldRemoteVideosBeVisible } from '../../functions';
 import Toolbar from './Toolbar';
 
 declare var interfaceConfig: Object;
diff --git a/react/features/filmstrip/components/Toolbar.web.js b/react/features/filmstrip/components/web/Toolbar.js
similarity index 96%
rename from react/features/filmstrip/components/Toolbar.web.js
rename to react/features/filmstrip/components/web/Toolbar.js
index 4f4f918443..edeba3ca8a 100644
--- a/react/features/filmstrip/components/Toolbar.web.js
+++ b/react/features/filmstrip/components/web/Toolbar.js
@@ -3,12 +3,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { SettingsButton } from '../../../settings';
 import {
     AudioMuteButton,
     HangupButton,
-    SettingsButton,
     VideoMuteButton
-} from '../../toolbox';
+} from '../../../toolbox';
 
 declare var interfaceConfig: Object;
 
diff --git a/react/features/filmstrip/components/web/index.js b/react/features/filmstrip/components/web/index.js
index cbbba44ffd..bce3429b79 100644
--- a/react/features/filmstrip/components/web/index.js
+++ b/react/features/filmstrip/components/web/index.js
@@ -1,6 +1,7 @@
 export { default as AudioMutedIndicator } from './AudioMutedIndicator';
 export { default as DominantSpeakerIndicator }
     from './DominantSpeakerIndicator';
+export { default as Filmstrip } from './Filmstrip';
 export { default as ModeratorIndicator } from './ModeratorIndicator';
 export { default as RaisedHandIndicator } from './RaisedHandIndicator';
 export { default as VideoMutedIndicator } from './VideoMutedIndicator';
diff --git a/react/features/toolbox/components/buttons/native/InviteButton.js b/react/features/invite/components/InviteButton.native.js
similarity index 93%
rename from react/features/toolbox/components/buttons/native/InviteButton.js
rename to react/features/invite/components/InviteButton.native.js
index b067292858..0d8c12e61c 100644
--- a/react/features/toolbox/components/buttons/native/InviteButton.js
+++ b/react/features/invite/components/InviteButton.native.js
@@ -2,15 +2,12 @@
 
 import { connect } from 'react-redux';
 
-import {
-    beginAddPeople,
-    isAddPeopleEnabled,
-    isDialOutEnabled
-} from '../../../../invite';
-import { beginShareRoom } from '../../../../share-room';
+import { AbstractButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
+import { beginShareRoom } from '../../share-room';
 
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { beginAddPeople } from '../actions';
+import { isAddPeopleEnabled, isDialOutEnabled } from '../functions';
 
 type Props = AbstractButtonProps & {
 
diff --git a/react/features/toolbox/components/OverflowMenuProfileItem.native.js b/react/features/invite/components/InviteButton.web.js
similarity index 100%
rename from react/features/toolbox/components/OverflowMenuProfileItem.native.js
rename to react/features/invite/components/InviteButton.web.js
diff --git a/react/features/invite/components/index.js b/react/features/invite/components/index.js
index e32c31d964..796279d1bf 100644
--- a/react/features/invite/components/index.js
+++ b/react/features/invite/components/index.js
@@ -1,3 +1,4 @@
 export { default as AddPeopleDialog } from './AddPeopleDialog';
-export { default as InfoDialogButton } from './InfoDialogButton';
 export { DialInSummary } from './dial-in-summary';
+export { default as InfoDialogButton } from './InfoDialogButton';
+export { default as InviteButton } from './InviteButton';
diff --git a/react/features/toolbox/components/buttons/native/AudioRouteButton.js b/react/features/mobile/audio-mode/components/AudioRouteButton.js
similarity index 91%
rename from react/features/toolbox/components/buttons/native/AudioRouteButton.js
rename to react/features/mobile/audio-mode/components/AudioRouteButton.js
index 919b490110..545947d0ab 100644
--- a/react/features/toolbox/components/buttons/native/AudioRouteButton.js
+++ b/react/features/mobile/audio-mode/components/AudioRouteButton.js
@@ -9,13 +9,12 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 
-import { openDialog } from '../../../../base/dialog';
-import { translate } from '../../../../base/i18n';
-import { AudioRoutePickerDialog } from '../../../../mobile/audio-mode';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
 
+import AudioRoutePickerDialog from './AudioRoutePickerDialog';
 
 /**
  * The {@code MPVolumeView} React {@code Component}. It will only be available
diff --git a/react/features/mobile/audio-mode/components/index.js b/react/features/mobile/audio-mode/components/index.js
index 17f03f9ce7..be47d9216d 100644
--- a/react/features/mobile/audio-mode/components/index.js
+++ b/react/features/mobile/audio-mode/components/index.js
@@ -1,3 +1 @@
-export {
-    default as AudioRoutePickerDialog
-} from './AudioRoutePickerDialog';
+export { default as AudioRouteButton } from './AudioRouteButton';
diff --git a/react/features/toolbox/components/buttons/native/PictureInPictureButton.js b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.js
similarity index 84%
rename from react/features/toolbox/components/buttons/native/PictureInPictureButton.js
rename to react/features/mobile/picture-in-picture/components/PictureInPictureButton.js
index 2d14157bcd..5c585a4248 100644
--- a/react/features/toolbox/components/buttons/native/PictureInPictureButton.js
+++ b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.js
@@ -2,12 +2,12 @@
 
 import { connect } from 'react-redux';
 
-import { getAppProp } from '../../../../app';
-import { translate } from '../../../../base/i18n';
-import { enterPictureInPicture } from '../../../../mobile/picture-in-picture';
+import { getAppProp } from '../../../app';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
 
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { enterPictureInPicture } from '../actions';
 
 type Props = AbstractButtonProps & {
 
diff --git a/react/features/mobile/picture-in-picture/components/index.js b/react/features/mobile/picture-in-picture/components/index.js
new file mode 100644
index 0000000000..46cd68bd52
--- /dev/null
+++ b/react/features/mobile/picture-in-picture/components/index.js
@@ -0,0 +1 @@
+export { default as PictureInPictureButton } from './PictureInPictureButton';
diff --git a/react/features/mobile/picture-in-picture/index.js b/react/features/mobile/picture-in-picture/index.js
index e40f04336c..803dacd06c 100644
--- a/react/features/mobile/picture-in-picture/index.js
+++ b/react/features/mobile/picture-in-picture/index.js
@@ -1,2 +1,3 @@
 export * from './actions';
 export * from './actionTypes';
+export * from './components';
diff --git a/react/features/toolbox/components/buttons/native/RoomLockButton.js b/react/features/room-lock/components/RoomLockButton.js
similarity index 88%
rename from react/features/toolbox/components/buttons/native/RoomLockButton.js
rename to react/features/room-lock/components/RoomLockButton.js
index b1baf79ec7..b2b5ef1a6c 100644
--- a/react/features/toolbox/components/buttons/native/RoomLockButton.js
+++ b/react/features/room-lock/components/RoomLockButton.js
@@ -2,11 +2,11 @@
 
 import { connect } from 'react-redux';
 
-import { translate } from '../../../../base/i18n';
-import { beginRoomLockRequest } from '../../../../room-lock';
+import { translate } from '../../base/i18n';
+import { AbstractButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
 
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { beginRoomLockRequest } from '../actions';
 
 type Props = AbstractButtonProps & {
 
@@ -24,7 +24,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An implementation of a button for locking / unlocking a room.
diff --git a/react/features/room-lock/components/index.js b/react/features/room-lock/components/index.js
index 1c2a0cc8bf..5c2f308c2a 100644
--- a/react/features/room-lock/components/index.js
+++ b/react/features/room-lock/components/index.js
@@ -1,2 +1,3 @@
 export { default as PasswordRequiredPrompt } from './PasswordRequiredPrompt';
+export { default as RoomLockButton } from './RoomLockButton';
 export { default as RoomLockPrompt } from './RoomLockPrompt';
diff --git a/react/features/toolbox/components/buttons/web/SettingsButton.js b/react/features/settings/components/web/SettingsButton.js
similarity index 84%
rename from react/features/toolbox/components/buttons/web/SettingsButton.js
rename to react/features/settings/components/web/SettingsButton.js
index 6cad74fadd..a3b5883397 100644
--- a/react/features/toolbox/components/buttons/web/SettingsButton.js
+++ b/react/features/settings/components/web/SettingsButton.js
@@ -2,13 +2,12 @@
 
 import { connect } from 'react-redux';
 
-import { createToolbarEvent, sendAnalytics } from '../../../../analytics';
-import { translate } from '../../../../base/i18n';
-import { openDeviceSelectionDialog } from '../../../../device-selection';
-import { toggleSettings } from '../../../../side-panel';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { createToolbarEvent, sendAnalytics } from '../../../analytics';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
+import { openDeviceSelectionDialog } from '../../../device-selection';
+import { toggleSettings } from '../../../side-panel';
 
 declare var interfaceConfig: Object;
 
@@ -28,7 +27,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An abstract implementation of a button for accessing settings.
diff --git a/react/features/settings/components/web/index.js b/react/features/settings/components/web/index.js
index d01f80b4c1..35dd0d586e 100644
--- a/react/features/settings/components/web/index.js
+++ b/react/features/settings/components/web/index.js
@@ -1 +1,2 @@
+export { default as SettingsButton } from './SettingsButton';
 export { default as SettingsMenu } from './SettingsMenu';
diff --git a/react/features/toolbox/components/buttons/AudioMuteButton.js b/react/features/toolbox/components/AudioMuteButton.js
similarity index 83%
rename from react/features/toolbox/components/buttons/AudioMuteButton.js
rename to react/features/toolbox/components/AudioMuteButton.js
index 5d4456a5d5..ab084872ba 100644
--- a/react/features/toolbox/components/buttons/AudioMuteButton.js
+++ b/react/features/toolbox/components/AudioMuteButton.js
@@ -6,16 +6,12 @@ import {
     AUDIO_MUTE,
     createToolbarEvent,
     sendAnalytics
-} from '../../../analytics';
-import { translate } from '../../../base/i18n';
-import {
-    MEDIA_TYPE,
-    setAudioMuted
-} from '../../../base/media';
-import { isLocalTrackMuted } from '../../../base/tracks';
-
-import AbstractAudioMuteButton from './AbstractAudioMuteButton';
-import type { Props as AbstractButtonProps } from './AbstractButton';
+} from '../../analytics';
+import { translate } from '../../base/i18n';
+import { MEDIA_TYPE, setAudioMuted } from '../../base/media';
+import { AbstractAudioMuteButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
+import { isLocalTrackMuted } from '../../base/tracks';
 
 type Props = AbstractButtonProps & {
 
diff --git a/react/features/toolbox/components/buttons/HangupButton.js b/react/features/toolbox/components/HangupButton.js
similarity index 76%
rename from react/features/toolbox/components/buttons/HangupButton.js
rename to react/features/toolbox/components/HangupButton.js
index da368d61f4..5c9d305a55 100644
--- a/react/features/toolbox/components/buttons/HangupButton.js
+++ b/react/features/toolbox/components/HangupButton.js
@@ -2,14 +2,13 @@
 
 import { connect } from 'react-redux';
 
-import { createToolbarEvent, sendAnalytics } from '../../../analytics';
-import { appNavigate } from '../../../app';
+import { createToolbarEvent, sendAnalytics } from '../../analytics';
+import { appNavigate } from '../../app';
 
-import { disconnect } from '../../../base/connection';
-import { translate } from '../../../base/i18n';
-
-import AbstractHangupButton from './AbstractHangupButton';
-import type { Props as AbstractButtonProps } from './AbstractButton';
+import { disconnect } from '../../base/connection';
+import { translate } from '../../base/i18n';
+import { AbstractHangupButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
 
 type Props = AbstractButtonProps & {
 
diff --git a/react/features/toolbox/components/Notice.js b/react/features/toolbox/components/Notice.js
deleted file mode 100644
index cb1497e1b0..0000000000
--- a/react/features/toolbox/components/Notice.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react';
-
-declare var config: Object;
-
-/**
- * Notice react component.
- *
- * @class Notice
- */
-export default class Notice extends Component<*, *> {
-    state: Object;
-
-    /**
-     * Constructor of Notice component.
-     *
-     * @param {Object} props - The read-only React Component props with which
-     * the new instance is to be initialized.
-     */
-    constructor(props: Object) {
-        super(props);
-
-        const { noticeMessage } = config;
-
-        this.state = {
-            /**
-             * Message to be shown in notice component.
-             *
-             * @type {string}
-             */
-            noticeMessage
-        };
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { noticeMessage } = this.state;
-
-        if (!noticeMessage) {
-            return null;
-        }
-
-        return (
-            <div className = 'notice'>
-                <span className = 'notice__message' >
-                    { noticeMessage }
-                </span>
-            </div>
-        );
-    }
-}
diff --git a/react/features/toolbox/components/buttons/VideoMuteButton.js b/react/features/toolbox/components/VideoMuteButton.js
similarity index 88%
rename from react/features/toolbox/components/buttons/VideoMuteButton.js
rename to react/features/toolbox/components/VideoMuteButton.js
index 3b8e494085..8a48c055de 100644
--- a/react/features/toolbox/components/buttons/VideoMuteButton.js
+++ b/react/features/toolbox/components/VideoMuteButton.js
@@ -6,17 +6,16 @@ import {
     VIDEO_MUTE,
     createToolbarEvent,
     sendAnalytics
-} from '../../../analytics';
-import { translate } from '../../../base/i18n';
+} from '../../analytics';
+import { translate } from '../../base/i18n';
 import {
     MEDIA_TYPE,
     VIDEO_MUTISM_AUTHORITY,
     setVideoMuted
-} from '../../../base/media';
-import { isLocalTrackMuted } from '../../../base/tracks';
-
-import AbstractVideoMuteButton from './AbstractVideoMuteButton';
-import type { Props as AbstractButtonProps } from './AbstractButton';
+} from '../../base/media';
+import { AbstractVideoMuteButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
+import { isLocalTrackMuted } from '../../base/tracks';
 
 type Props = AbstractButtonProps & {
 
diff --git a/react/features/toolbox/components/buttons/_.native.js b/react/features/toolbox/components/_.native.js
similarity index 100%
rename from react/features/toolbox/components/buttons/_.native.js
rename to react/features/toolbox/components/_.native.js
diff --git a/react/features/toolbox/components/buttons/_.web.js b/react/features/toolbox/components/_.web.js
similarity index 100%
rename from react/features/toolbox/components/buttons/_.web.js
rename to react/features/toolbox/components/_.web.js
diff --git a/react/features/toolbox/components/buttons/index.js b/react/features/toolbox/components/buttons/index.js
deleted file mode 100644
index 5b22811567..0000000000
--- a/react/features/toolbox/components/buttons/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './_';
-
-export { default as AudioMuteButton } from './AudioMuteButton';
-export { default as HangupButton } from './HangupButton';
-export { default as VideoMuteButton } from './VideoMuteButton';
diff --git a/react/features/toolbox/components/buttons/native/ShareRoomButton.js b/react/features/toolbox/components/buttons/native/ShareRoomButton.js
deleted file mode 100644
index 8e00fdb42e..0000000000
--- a/react/features/toolbox/components/buttons/native/ShareRoomButton.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// @flow
-
-import { connect } from 'react-redux';
-
-import { translate } from '../../../../base/i18n';
-import { beginShareRoom } from '../../../../share-room';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
-
-type Props = AbstractButtonProps & {
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-}
-
-/**
- * An implementation of a button for sharing a room using the native OS sharing
- * capabilities.
- */
-class ShareRoomButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Share room';
-    iconName = 'icon-link';
-    label = 'toolbar.shareRoom';
-
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @private
-     * @returns {void}
-     */
-    _handleClick() {
-        this.props.dispatch(beginShareRoom());
-    }
-
-    /**
-     * Indicates whether this button is disabled or not.
-     *
-     * @override
-     * @private
-     * @returns {boolean}
-     */
-    _isDisabled() {
-        return false;
-    }
-}
-
-export default translate(connect()(ShareRoomButton));
diff --git a/react/features/toolbox/components/buttons/native/index.js b/react/features/toolbox/components/buttons/native/index.js
deleted file mode 100644
index d25ed050b3..0000000000
--- a/react/features/toolbox/components/buttons/native/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as AudioOnlyButton } from './AudioOnlyButton';
-export { default as AudioRouteButton } from './AudioRouteButton';
-export { default as InviteButton } from './InviteButton';
-export { default as PictureInPictureButton } from './PictureInPictureButton';
-export { default as RoomLockButton } from './RoomLockButton';
-export { default as ToggleCameraButton } from './ToggleCameraButton';
diff --git a/react/features/toolbox/components/buttons/web/index.js b/react/features/toolbox/components/buttons/web/index.js
deleted file mode 100644
index 8bdfbf413e..0000000000
--- a/react/features/toolbox/components/buttons/web/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SettingsButton } from './SettingsButton';
diff --git a/react/features/toolbox/components/index.js b/react/features/toolbox/components/index.js
index 3a0dac395e..14c7b14621 100644
--- a/react/features/toolbox/components/index.js
+++ b/react/features/toolbox/components/index.js
@@ -1,3 +1,6 @@
-export { default as ToolbarButton } from './ToolbarButton';
-export { default as Toolbox } from './Toolbox';
-export * from './buttons';
+// @flow
+
+export * from './_';
+export { default as AudioMuteButton } from './AudioMuteButton';
+export { default as HangupButton } from './HangupButton';
+export { default as VideoMuteButton } from './VideoMuteButton';
diff --git a/react/features/toolbox/components/buttons/native/AudioOnlyButton.js b/react/features/toolbox/components/native/AudioOnlyButton.js
similarity index 87%
rename from react/features/toolbox/components/buttons/native/AudioOnlyButton.js
rename to react/features/toolbox/components/native/AudioOnlyButton.js
index 9107c41f39..bdb14ee561 100644
--- a/react/features/toolbox/components/buttons/native/AudioOnlyButton.js
+++ b/react/features/toolbox/components/native/AudioOnlyButton.js
@@ -2,11 +2,10 @@
 
 import { connect } from 'react-redux';
 
-import { toggleAudioOnly } from '../../../../base/conference';
-import { translate } from '../../../../base/i18n';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { toggleAudioOnly } from '../../../base/conference';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
 
 type Props = AbstractButtonProps & {
 
@@ -19,7 +18,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An implementation of a button for toggling the audio-only mode.
diff --git a/react/features/toolbox/components/buttons/native/ToggleCameraButton.js b/react/features/toolbox/components/native/ToggleCameraButton.js
similarity index 84%
rename from react/features/toolbox/components/buttons/native/ToggleCameraButton.js
rename to react/features/toolbox/components/native/ToggleCameraButton.js
index fa696c09a0..369859b32d 100644
--- a/react/features/toolbox/components/buttons/native/ToggleCameraButton.js
+++ b/react/features/toolbox/components/native/ToggleCameraButton.js
@@ -2,12 +2,11 @@
 
 import { connect } from 'react-redux';
 
-import { translate } from '../../../../base/i18n';
-import { MEDIA_TYPE, toggleCameraFacingMode } from '../../../../base/media';
-import { isLocalTrackMuted } from '../../../../base/tracks';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { translate } from '../../../base/i18n';
+import { MEDIA_TYPE, toggleCameraFacingMode } from '../../../base/media';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
+import { isLocalTrackMuted } from '../../../base/tracks';
 
 type Props = AbstractButtonProps & {
 
@@ -25,7 +24,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An implementation of a button for toggling the camera facing mode.
diff --git a/react/features/toolbox/components/ToolbarButton.native.js b/react/features/toolbox/components/native/ToolbarButton.js
similarity index 93%
rename from react/features/toolbox/components/ToolbarButton.native.js
rename to react/features/toolbox/components/native/ToolbarButton.js
index 3c1475e367..ccb03c419c 100644
--- a/react/features/toolbox/components/ToolbarButton.native.js
+++ b/react/features/toolbox/components/native/ToolbarButton.js
@@ -3,9 +3,9 @@ import React from 'react';
 import { TouchableHighlight } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Icon } from '../../base/font-icons';
+import { Icon } from '../../../base/font-icons';
 
-import AbstractToolbarButton from './AbstractToolbarButton';
+import AbstractToolbarButton from '../AbstractToolbarButton';
 
 /**
  * Represents a button in {@link Toolbar} on React Native.
diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/native/Toolbox.js
similarity index 88%
rename from react/features/toolbox/components/Toolbox.native.js
rename to react/features/toolbox/components/native/Toolbox.js
index eaa49910db..f37104a66b 100644
--- a/react/features/toolbox/components/Toolbox.native.js
+++ b/react/features/toolbox/components/native/Toolbox.js
@@ -4,26 +4,23 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Container } from '../../base/react';
+import { Container } from '../../../base/react';
 import {
     isNarrowAspectRatio,
     makeAspectRatioAware
-} from '../../base/responsive-ui';
-import { ColorPalette } from '../../base/styles';
+} from '../../../base/responsive-ui';
+import { ColorPalette } from '../../../base/styles';
+import { InviteButton } from '../../../invite';
+import { AudioRouteButton } from '../../../mobile/audio-mode';
+import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
+import { RoomLockButton } from '../../../room-lock';
 
+import AudioMuteButton from '../AudioMuteButton';
+import AudioOnlyButton from './AudioOnlyButton';
+import HangupButton from '../HangupButton';
 import styles from './styles';
-
-import {
-    AudioMuteButton,
-    AudioOnlyButton,
-    AudioRouteButton,
-    HangupButton,
-    PictureInPictureButton,
-    RoomLockButton,
-    InviteButton,
-    ToggleCameraButton,
-    VideoMuteButton
-} from './buttons';
+import ToggleCameraButton from './ToggleCameraButton';
+import VideoMuteButton from '../VideoMuteButton';
 
 /**
  * Styles for the hangup button.
diff --git a/react/features/toolbox/components/native/index.js b/react/features/toolbox/components/native/index.js
new file mode 100644
index 0000000000..118cf0179b
--- /dev/null
+++ b/react/features/toolbox/components/native/index.js
@@ -0,0 +1,2 @@
+export { default as ToolbarButton } from './ToolbarButton';
+export { default as Toolbox } from './Toolbox';
diff --git a/react/features/toolbox/components/styles.js b/react/features/toolbox/components/native/styles.js
similarity index 99%
rename from react/features/toolbox/components/styles.js
rename to react/features/toolbox/components/native/styles.js
index c7e7a9d23f..d38529b777 100644
--- a/react/features/toolbox/components/styles.js
+++ b/react/features/toolbox/components/native/styles.js
@@ -1,4 +1,4 @@
-import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
+import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
 
 /**
  * The base style for toolbars.
diff --git a/react/features/toolbox/components/OverflowMenuButton.web.js b/react/features/toolbox/components/web/OverflowMenuButton.js
similarity index 96%
rename from react/features/toolbox/components/OverflowMenuButton.web.js
rename to react/features/toolbox/components/web/OverflowMenuButton.js
index 55b49526d9..35da66a5a5 100644
--- a/react/features/toolbox/components/OverflowMenuButton.web.js
+++ b/react/features/toolbox/components/web/OverflowMenuButton.js
@@ -2,8 +2,8 @@ import InlineDialog from '@atlaskit/inline-dialog';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import { createToolbarEvent, sendAnalytics } from '../../analytics';
-import { translate } from '../../base/i18n';
+import { createToolbarEvent, sendAnalytics } from '../../../analytics';
+import { translate } from '../../../base/i18n';
 
 import ToolbarButton from './ToolbarButton';
 
diff --git a/react/features/toolbox/components/OverflowMenuItem.web.js b/react/features/toolbox/components/web/OverflowMenuItem.js
similarity index 100%
rename from react/features/toolbox/components/OverflowMenuItem.web.js
rename to react/features/toolbox/components/web/OverflowMenuItem.js
diff --git a/react/features/toolbox/components/OverflowMenuProfileItem.web.js b/react/features/toolbox/components/web/OverflowMenuProfileItem.js
similarity index 98%
rename from react/features/toolbox/components/OverflowMenuProfileItem.web.js
rename to react/features/toolbox/components/web/OverflowMenuProfileItem.js
index 7a5fd8c39f..16c3a73f9b 100644
--- a/react/features/toolbox/components/OverflowMenuProfileItem.web.js
+++ b/react/features/toolbox/components/web/OverflowMenuProfileItem.js
@@ -8,7 +8,7 @@ import {
     Avatar,
     getAvatarURL,
     getLocalParticipant
-} from '../../base/participants';
+} from '../../../base/participants';
 
 /**
  * A React {@code Component} for displaying a link with a profile avatar as an
diff --git a/react/features/toolbox/components/ToolbarButton.web.js b/react/features/toolbox/components/web/ToolbarButton.js
similarity index 97%
rename from react/features/toolbox/components/ToolbarButton.web.js
rename to react/features/toolbox/components/web/ToolbarButton.js
index 586c5f5fd8..9c4d8ee499 100644
--- a/react/features/toolbox/components/ToolbarButton.web.js
+++ b/react/features/toolbox/components/web/ToolbarButton.js
@@ -2,7 +2,7 @@ import Tooltip from '@atlaskit/tooltip';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import AbstractToolbarButton from './AbstractToolbarButton';
+import AbstractToolbarButton from '../AbstractToolbarButton';
 
 /**
  * Represents a button in the toolbar.
diff --git a/react/features/toolbox/components/Toolbox.web.js b/react/features/toolbox/components/web/Toolbox.js
similarity index 96%
rename from react/features/toolbox/components/Toolbox.web.js
rename to react/features/toolbox/components/web/Toolbox.js
index def0d67052..e68274c851 100644
--- a/react/features/toolbox/components/Toolbox.web.js
+++ b/react/features/toolbox/components/web/Toolbox.js
@@ -8,50 +8,47 @@ import {
     createShortcutEvent,
     createToolbarEvent,
     sendAnalytics
-} from '../../analytics';
-import { openDialog } from '../../base/dialog';
-import { translate } from '../../base/i18n';
+} from '../../../analytics';
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
 import {
     PARTICIPANT_ROLE,
     getLocalParticipant,
     participantUpdated
-} from '../../base/participants';
-import { getLocalVideoTrack, toggleScreensharing } from '../../base/tracks';
-import { ChatCounter } from '../../chat';
-import { toggleDocument } from '../../etherpad';
-import { openFeedbackDialog } from '../../feedback';
+} from '../../../base/participants';
+import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
+import { ChatCounter } from '../../../chat';
+import { toggleDocument } from '../../../etherpad';
+import { openFeedbackDialog } from '../../../feedback';
 import {
     beginAddPeople,
     InfoDialogButton,
     isAddPeopleEnabled,
     isDialOutEnabled
-} from '../../invite';
-import { openKeyboardShortcutsDialog } from '../../keyboard-shortcuts';
-import { RECORDING_TYPES, toggleRecording } from '../../recording';
-import { toggleSharedVideo } from '../../shared-video';
-import { toggleChat, toggleProfile } from '../../side-panel';
-import { SpeakerStats } from '../../speaker-stats';
+} from '../../../invite';
+import { openKeyboardShortcutsDialog } from '../../../keyboard-shortcuts';
+import { RECORDING_TYPES, toggleRecording } from '../../../recording';
+import { SettingsButton } from '../../../settings';
+import { toggleSharedVideo } from '../../../shared-video';
+import { toggleChat, toggleProfile } from '../../../side-panel';
+import { SpeakerStats } from '../../../speaker-stats';
 import {
     OverflowMenuVideoQualityItem,
     VideoQualityDialog
-} from '../../video-quality';
+} from '../../../video-quality';
 
 import {
     setFullScreen,
     setOverflowMenuVisible,
     setToolbarHovered
-} from '../actions';
-
+} from '../../actions';
+import AudioMuteButton from '../AudioMuteButton';
+import HangupButton from '../HangupButton';
 import OverflowMenuButton from './OverflowMenuButton';
 import OverflowMenuItem from './OverflowMenuItem';
 import OverflowMenuProfileItem from './OverflowMenuProfileItem';
 import ToolbarButton from './ToolbarButton';
-import {
-    AudioMuteButton,
-    HangupButton,
-    SettingsButton,
-    VideoMuteButton
-} from './buttons';
+import VideoMuteButton from '../VideoMuteButton';
 
 type Props = {
 
diff --git a/react/features/toolbox/components/web/index.js b/react/features/toolbox/components/web/index.js
new file mode 100644
index 0000000000..118cf0179b
--- /dev/null
+++ b/react/features/toolbox/components/web/index.js
@@ -0,0 +1,2 @@
+export { default as ToolbarButton } from './ToolbarButton';
+export { default as Toolbox } from './Toolbox';