diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss index eaaf04010bf8d47dadb67abe3623b83392c25e18..f7463cbffab7b33c96b145792327494adc6f7c48 100644 --- a/src/assets/stylesheets/footer.scss +++ b/src/assets/stylesheets/footer.scss @@ -30,7 +30,7 @@ background-color: transparent; border-bottom: 1px solid rgba(32, 32, 32, 0.65); - @media (min-width: 768px) { + @media (min-width: 768px) , (max-height: 380px) { display: none; } } @@ -105,4 +105,16 @@ :local(.menu-button__text) { @extend %fa-icon-button-text; } + + :local(.menu-button__narrow-close-icon) { + @media (max-width: 767px) { + display: none; + } + } + + :local(.menu-button__wide-close-icon) { + @media (min-width: 768px) { + display: none; + } + } } diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss index c7e2cbf5ab0b5c7003c508a5e0d06e3c7de1e213..4947cacbe84027d2170ced33976a29b02a7f41d9 100644 --- a/src/assets/stylesheets/profile.scss +++ b/src/assets/stylesheets/profile.scss @@ -120,7 +120,6 @@ overflow: hidden; white-space: nowrap; display: flex; - justify-content: flex-end; align-items: center; } diff --git a/src/react-components/avatar-selector.js b/src/react-components/avatar-selector.js index 05c47c86ee22112683283c7a83e516949e427aa2..266278013074732ae19c8d3ba4bbe3681c3a12ed 100644 --- a/src/react-components/avatar-selector.js +++ b/src/react-components/avatar-selector.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; -import { injectIntl, FormattedMessage } from "react-intl"; +import { injectIntl } from "react-intl"; import FontAwesomeIcon from "@fortawesome/react-fontawesome"; import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft"; import faAngleRight from "@fortawesome/fontawesome-free-solid/faAngleRight"; diff --git a/src/react-components/footer.js b/src/react-components/footer.js index ada01e432c910c1f7cdbace0aaac8668851ef161..e155bea128a151fd2013251ada9b94a5c67e6794 100644 --- a/src/react-components/footer.js +++ b/src/react-components/footer.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import FontAwesomeIcon from "@fortawesome/react-fontawesome"; import faUsers from "@fortawesome/fontawesome-free-solid/faUsers"; -import faEllipsisH from "@fortawesome/fontawesome-free-solid/faEllipsisH"; +import faBars from "@fortawesome/fontawesome-free-solid/faBars"; import faShareAlt from "@fortawesome/fontawesome-free-solid/faShareAlt"; import faExclamation from "@fortawesome/fontawesome-free-solid/faExclamation"; import faTimes from "@fortawesome/fontawesome-free-solid/faTimes"; @@ -34,7 +34,8 @@ export default class Footer extends Component { </div> <button className={styles.menuButton} onClick={() => this.setState({ menuVisible: !menuVisible })}> <i className={styles.menuButtonIcon}> - <FontAwesomeIcon icon={menuVisible ? (window.innerWidth < 768 ? faTimes : faArrowDown) : faEllipsisH} /> + <FontAwesomeIcon className={styles.menuButtonNarrowCloseIcon} icon={menuVisible ? faArrowDown : faBars} /> + <FontAwesomeIcon className={styles.menuButtonWideCloseIcon} icon={menuVisible ? faTimes : faBars} /> </i> </button> <div className={styles.hubStats}> @@ -59,7 +60,7 @@ export default class Footer extends Component { <FontAwesomeIcon icon={faShareAlt} /> </i> <span className={styles.menuButtonText}> - <strong>Invite</strong> Others + <strong>Invite</strong> Friends </span> </button> <button className={styles.menuButton} onClick={this.props.onClickHelp}> @@ -67,7 +68,7 @@ export default class Footer extends Component { <FontAwesomeIcon icon={faQuestion} /> </i> <span className={styles.menuButtonText}> - <strong>Learn</strong> How to Play + <strong>Learn</strong> the Basics </span> </button> <button className={styles.menuButton} onClick={this.props.onClickUpdates}> diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js index dd0195fe11bacbd80920419c1f10a56dd7da67e0..32f971952b473583bd2f32e7a569022e7ed71d3c 100644 --- a/src/react-components/info-dialog.js +++ b/src/react-components/info-dialog.js @@ -103,7 +103,7 @@ class InfoDialog extends Component { dialogBody = "Great! Please check your e-mail to confirm your subscription."; break; case InfoDialog.dialogTypes.invite: - dialogTitle = "Invite Others"; + dialogTitle = "Invite Friends"; dialogBody = ( <div> <div>Just share the link to have others join you.</div> @@ -186,7 +186,7 @@ class InfoDialog extends Component { ); break; case InfoDialog.dialogTypes.help: - dialogTitle = "How to Play"; + dialogTitle = "Getting Started"; dialogBody = ( <div className="info-dialog__help"> When in a room, other avatars can see and hear you.