diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 7aa0079ce7bf648480fe507525fff489cc5b3d46..014ca0a7a7f7f32e20db86d9a4725da7beb5d011 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -45,7 +45,7 @@ body { position: fixed; top: 0; left: 0; - opacity: 0.66; + opacity: 0.45; min-width: 100%; min-height: 100%; z-index: 1; diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss index ae46af24e2d332f746c67b498e85bc7633af51a0..47b06a43623b109a9fa27060d83f7da44889e59c 100644 --- a/src/assets/stylesheets/info-dialog.scss +++ b/src/assets/stylesheets/info-dialog.scss @@ -3,8 +3,7 @@ height: 100%; top: 0; left: 0; - position: absolute; - pointer-events: none; + position: fixed; color: white; z-index: 2; } @@ -54,6 +53,17 @@ a { color: white } } + &__links { + display: flex; + justify-content: center; + margin: 16px 0; + a { + margin: 0 12px; + color: $light-text; + } + } + + &__close { position: absolute; left: 12px; diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js index ab7bdda1c22098e1991afd98ff23ffdeb63df83e..6e27e39c91262cf7e23a2597d00793f5f172f34b 100644 --- a/src/react-components/info-dialog.js +++ b/src/react-components/info-dialog.js @@ -27,6 +27,28 @@ class InfoDialog extends Component { const loc = document.location; this.shareLink = `${loc.protocol}//${loc.host}${loc.pathname}`; + this.onKeyDown = this.onKeyDown.bind(this); + this.onContainerClicked = this.onContainerClicked.bind(this); + } + + componentDidMount() { + window.addEventListener("keydown", this.onKeyDown); + } + + componentWillUnmount() { + window.removeEventListener("keydown", this.onKeyDown); + } + + onKeyDown(e) { + if (e.key === "Escape") { + this.props.onCloseDialog(); + } + } + + onContainerClicked(e) { + if (e.currentTarget === e.target) { + this.props.onCloseDialog(); + } } shareLinkClicked = () => { @@ -211,6 +233,18 @@ class InfoDialog extends Component { <p> The <b>Bubble Toggle</b> hides avatars that enter your personal space. </p> + <p className="dialog__box__contents__links"> + <a target="_blank" rel="noopener noreferrer" href="https://github.com/mozilla/hubs/blob/master/TERMS.md"> + <FormattedMessage id="profile.terms_of_use" /> + </a> + <a + target="_blank" + rel="noopener noreferrer" + href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md" + > + <FormattedMessage id="profile.privacy_notice" /> + </a> + </p> </div> ); break; @@ -223,7 +257,7 @@ class InfoDialog extends Component { return ( <div className="dialog-overlay"> - <div className={dialogClasses}> + <div className={dialogClasses} onClick={this.onContainerClicked}> <div className="dialog__box"> <div className="dialog__box__contents"> <button className="dialog__box__contents__close" onClick={this.props.onCloseDialog}>