Use Back and Close buttons in Modal

src/react-components/input/BackButton.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./BackButton.scss";
+import { IconButton } from "../input/IconButton";
+import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
+
+export function BackButton({ children, className, ...rest }) {
+  return (
+    <IconButton className={classNames(styles.backButton, className)} {...rest}>
+      <ChevronBackIcon />
+      <span>{children}</span>
+    </IconButton>
+  );
+}
+
+BackButton.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};
+
+BackButton.defaultProps = {
+  children: "Back"
+};

src/react-components/input/BackButton.scss

@@ -0,0 +1,3 @@
+:local(.back-button) {
+  margin-left: -8px;
+}

src/react-components/input/CloseButton.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { IconButton } from "../input/IconButton";
+import { ReactComponent as CloseIcon } from "../icons/Close.svg";
+
+export function CloseButton(props) {
+  return (
+    <IconButton {...props}>
+      <CloseIcon width={16} height={16} />
+    </IconButton>
+  );
+}

src/react-components/modal/Modal.js

@@ -2,6 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./Modal.scss";
+import { IconButton } from "../input/IconButton";
+import { ReactComponent as CloseIcon } from "../icons/Close.svg";
+
+export function CloseButton(props) {
+  return (
+    <IconButton {...props} className={styles.sidebarButton}>
+      <CloseIcon width={16} height={16} />
+    </IconButton>
+  );
+}
 
 export function Modal({ title, beforeTitle, afterTitle, children, contentClassName, className, disableFullscreen }) {
   return (

src/react-components/modal/Modal.scss

@@ -32,11 +32,13 @@
 :local(.before-title) {
   position: absolute;
   left: 0;
+  margin-left: 16px;
 }
 
 :local(.after-title) {
   position: absolute;
   right: 0;
+  margin-right: 16px;
 }
 
 :local(.content) {

src/react-components/room/AvatarSettingsSidebar.js

@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Sidebar, BackButton, CloseButton } from "../sidebar/Sidebar";
+import { Sidebar } from "../sidebar/Sidebar";
+import { CloseButton } from "../input/CloseButton";
+import { BackButton } from "../input/BackButton";
 import { AvatarSettingsContent } from "./AvatarSettingsContent";
 
 export function AvatarSettingsSidebar({ className, showBackButton, onBack, onClose, ...rest }) {

src/react-components/room/AvatarSetupModal.js

@@ -1,22 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Modal } from "../modal/Modal";
-import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
-import { IconButton } from "../input/IconButton";
+import { BackButton } from "../input/BackButton";
 import { AvatarSettingsContent } from "./AvatarSettingsContent";
 
 export function AvatarSetupModal({ className, onBack, ...rest }) {
   return (
-    <Modal
-      title="Avatar Setup"
-      beforeTitle={
-        <IconButton onClick={onBack}>
-          <ChevronBackIcon />
-          <span>Back</span>
-        </IconButton>
-      }
-      className={className}
-    >
+    <Modal title="Avatar Setup" beforeTitle={<BackButton onClick={onBack} />} className={className}>
       <AvatarSettingsContent {...rest} />
     </Modal>
   );

src/react-components/room/ChatSidebar.js

@@ -1,7 +1,8 @@
 import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { CloseButton, Sidebar } from "../sidebar/Sidebar";
+import { Sidebar } from "../sidebar/Sidebar";
+import { CloseButton } from "../input/CloseButton";
 import { ReactComponent as WandIcon } from "../icons/Wand.svg";
 import { ReactComponent as AttachIcon } from "../icons/Attach.svg";
 import { ReactComponent as ChatIcon } from "../icons/Chat.svg";

src/react-components/room/EnterOnDeviceModal.js

@@ -4,9 +4,8 @@ import classNames from "classnames";
 import { Modal } from "../modal/Modal";
 import { Button } from "../input/Button";
 import { ReactComponent as VRIcon } from "../icons/VR.svg";
-import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
 import styles from "./EnterOnDeviceModal.scss";
-import { IconButton } from "../input/IconButton";
+import { BackButton } from "../input/BackButton";
 
 export function EnterOnDeviceModal({
   className,
@@ -22,12 +21,7 @@ export function EnterOnDeviceModal({
   return (
     <Modal
       title="Enter on Device"
-      beforeTitle={
-        <IconButton onClick={onBack}>
-          <ChevronBackIcon />
-          <span>Back</span>
-        </IconButton>
-      }
+      beforeTitle={<BackButton onClick={onBack} />}
       className={className}
       contentClassName={classNames(styles.content, { [styles.loadingCode]: loadingCode })}
       {...rest}

src/react-components/room/MicPermissionsModal.js

@@ -2,21 +2,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Modal } from "../modal/Modal";
 import { Button } from "../input/Button";
-import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
 import { ReactComponent as MicrophoneIcon } from "../icons/Microphone.svg";
 import styles from "./MicPermissionsModal.scss";
-import { IconButton } from "../input/IconButton";
+import { BackButton } from "../input/BackButton";
 
 export function MicPermissionsModal({ className, error, onClickErrorButton, errorButtonLabel, onBack, ...rest }) {
   return (
     <Modal
       title="Enter on Device"
-      beforeTitle={
-        <IconButton onClick={onBack}>
-          <ChevronBackIcon />
-          <span>Back</span>
-        </IconButton>
-      }
+      beforeTitle={<BackButton onClick={onBack} />}
       className={className}
       contentClassName={styles.content}
       {...rest}

src/react-components/room/MicSetupModal.js

@@ -3,13 +3,12 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import { Modal } from "../modal/Modal";
 import { Button } from "../input/Button";
-import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
 import { ReactComponent as MicrophoneIcon } from "../icons/Microphone.svg";
 import { ReactComponent as MicrophoneMutedIcon } from "../icons/MicrophoneMuted.svg";
 import { ReactComponent as VolumeHighIcon } from "../icons/VolumeHigh.svg";
 import { ReactComponent as VolumeOffIcon } from "../icons/VolumeOff.svg";
 import styles from "./MicSetupModal.scss";
-import { IconButton } from "../input/IconButton";
+import { BackButton } from "../input/BackButton";
 import { SelectInputField } from "../input/SelectInputField";
 import { ToggleInput } from "../input/ToggleInput";
 import { ToolbarButton } from "../input/ToolbarButton";
@@ -35,12 +34,7 @@ export function MicSetupModal({
   return (
     <Modal
       title="Microphone Setup"
-      beforeTitle={
-        <IconButton onClick={onBack}>
-          <ChevronBackIcon />
-          <span>Back</span>
-        </IconButton>
-      }
+      beforeTitle={<BackButton onClick={onBack} />}
       className={className}
       contentClassName={styles.content}
       {...rest}

src/react-components/room/ObjectsSidebar.js

@@ -2,7 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./ObjectsSidebar.scss";
-import { Sidebar, CloseButton } from "../sidebar/Sidebar";
+import { Sidebar } from "../sidebar/Sidebar";
+import { CloseButton } from "../input/CloseButton";
 import { ButtonListItem } from "../layout/List";
 import listStyles from "../layout/List.scss";
 import { ReactComponent as ObjectIcon } from "../icons/Object.svg";

src/react-components/room/PeopleSidebar.js

@@ -1,7 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styles from "./PeopleSidebar.scss";
-import { Sidebar, CloseButton, SidebarButton } from "../sidebar/Sidebar";
+import { Sidebar } from "../sidebar/Sidebar";
+import { CloseButton } from "../input/CloseButton";
+import { IconButton } from "../input/IconButton";
 import { ReactComponent as StarIcon } from "../icons/Star.svg";
 import { ReactComponent as DesktopIcon } from "../icons/Desktop.svg";
 import { ReactComponent as DiscordIcon } from "../icons/Discord.svg";
@@ -97,7 +99,7 @@ export function PeopleSidebar({ people, onSelectPerson, onClose, showMuteAll, on
     <Sidebar
       title={`People (${people.length})`}
       beforeTitle={<CloseButton onClick={onClose} />}
-      afterTitle={showMuteAll ? <SidebarButton onClick={onMuteAll}>Mute All</SidebarButton> : undefined}
+      afterTitle={showMuteAll ? <IconButton onClick={onMuteAll}>Mute All</IconButton> : undefined}
     >
       <List>
         {people.map(person => {

src/react-components/room/UserProfileSidebar.js

@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Sidebar, BackButton, CloseButton } from "../sidebar/Sidebar";
+import { Sidebar } from "../sidebar/Sidebar";
+import { CloseButton } from "../input/CloseButton";
+import { BackButton } from "../input/BackButton";
 import { Button } from "../input/Button";
 import styles from "./UserProfileSidebar.scss";
 

src/react-components/sidebar/Sidebar.js

@@ -2,46 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./Sidebar.scss";
-import { IconButton } from "../input/IconButton";
-import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
-import { ReactComponent as CloseIcon } from "../icons/Close.svg";
-
-export function BackButton({ children, ...rest }) {
-  return (
-    <IconButton {...rest} className={styles.backButton}>
-      <ChevronBackIcon />
-      <span>{children}</span>
-    </IconButton>
-  );
-}
-
-BackButton.propTypes = {
-  children: PropTypes.node
-};
-
-BackButton.defaultProps = {
-  children: "Back"
-};
-
-export function CloseButton(props) {
-  return (
-    <IconButton {...props} className={styles.sidebarButton}>
-      <CloseIcon width={16} height={16} />
-    </IconButton>
-  );
-}
-
-export function SidebarButton({ children, ...rest }) {
-  return (
-    <IconButton {...rest} className={styles.sidebarButton}>
-      {children}
-    </IconButton>
-  );
-}
-
-SidebarButton.propTypes = {
-  children: PropTypes.node
-};
 
 export function Sidebar({ title, beforeTitle, afterTitle, children, contentClassName, className }) {
   return (

src/react-components/sidebar/Sidebar.scss

@@ -29,11 +29,13 @@
 :local(.before-title) {
   position: absolute;
   left: 0;
+  margin-left: 16px;
 }
 
 :local(.after-title) {
   position: absolute;
   right: 0;
+  margin-right: 16px;
 }
 
 :local(.content) {
@@ -42,17 +44,3 @@
   flex-direction: column;
   overflow-y: auto;
 }
-
-:local(.back-button) {
-  margin-left: 8px;
-}
-
-:local(.sidebar-button) {
-  &:first-child {
-    margin-left: 16px;
-  }
-
-  &:last-child {
-    margin-right: 16px;
-  }
-}

src/react-components/sign-in-dialog.js

@@ -5,8 +5,9 @@ import { FormattedMessage } from "react-intl";
 import configs from "../utils/configs";
 import IfFeature from "./if-feature";
 import styles from "../assets/stylesheets/sign-in-dialog.scss";
-import DialogContainer from "./dialog-container";
 import { handleTextFieldFocus, handleTextFieldBlur } from "../utils/focus-utils";
+import { Modal } from "./modal/Modal";
+import { CloseButton } from "./input/CloseButton";
 
 export default class SignInDialog extends Component {
   static propTypes = {
@@ -16,6 +17,7 @@ export default class SignInDialog extends Component {
     onContinue: PropTypes.func,
     message: PropTypes.string,
     continueText: PropTypes.string,
+    onClose: PropTypes.func,
     closable: PropTypes.bool
   };
 
@@ -107,9 +109,9 @@ export default class SignInDialog extends Component {
     }
 
     return (
-      <DialogContainer title="Sign In" {...this.props}>
+      <Modal title="Sign In" beforeTitle={this.props.closable && <CloseButton onClick={this.props.onClose} />}>
         {contents}
-      </DialogContainer>
+      </Modal>
     );
   }
 }

src/react-components/ui-root.js

@@ -1482,7 +1482,6 @@ class UIRoot extends Component {
       <MoreMenuContextProvider>
         <ReactAudioContext.Provider value={this.state.audioContext}>
           <div className={classNames(rootStyles)}>
-            {this.state.dialog}
             {preload &&
               this.props.hub && (
                 <PreloadOverlay
@@ -1794,7 +1793,7 @@ class UIRoot extends Component {
                   undefined
                 )
               }
-              modal={renderEntryFlow && entryDialog}
+              modal={this.state.dialog || (renderEntryFlow && entryDialog)}
               toolbarLeft={<InvitePopoverContainer hub={this.props.hub} />}
               toolbarCenter={
                 <>