show clickable 'About' button if handler is present

Author: Christopher Willis-Ford

.gitattributes

@@ -12,6 +12,7 @@
 *.svg binary
 
 # Prefer LF for most file types
+*.css text eol=lf
 *.frag text eol=lf
 *.htm text eol=lf
 *.html text eol=lf

src/components/gui/gui.jsx

@@ -89,6 +89,7 @@ const GUIComponent = props => {
         loading,
         logo,
         renderLogin,
+        onClickAbout,
         onClickAccountNav,
         onCloseAccountNav,
         onLogOut,
@@ -219,6 +220,7 @@ const GUIComponent = props => {
                     logo={logo}
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
+                    onClickAbout={onClickAbout}
                     onClickAccountNav={onClickAccountNav}
                     onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
@@ -390,6 +392,7 @@ GUIComponent.propTypes = {
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
+    onClickAbout: PropTypes.func,
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,

src/components/menu-bar/menu-bar.css

@@ -218,3 +218,9 @@
 .mystuff > a {
   background-image: url("/images/mystuff.png");
 }
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}

src/components/menu-bar/menu-bar.jsx

@@ -68,6 +68,7 @@ import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
+import aboutIcon from './icon--about.svg';
 
 import scratchLogo from './scratch-logo.svg';
 
@@ -310,6 +311,17 @@ class MenuBar extends React.Component {
                 {remixMessage}
             </Button>
         );
+        const handleClickAbout = this.props.onClickAbout;
+        // Show the About button only if we have a handler for it (like in the desktop app)
+        const aboutButton = handleClickAbout ? (
+            <div className={classNames(styles.menuBarItem, styles.hoverable)}>
+                <img
+                    className={styles.aboutIcon}
+                    onClick={handleClickAbout}
+                    src={aboutIcon}
+                />
+            </div>
+        ) : null;
         return (
             <Box
                 className={classNames(
@@ -677,6 +689,8 @@ class MenuBar extends React.Component {
                         </React.Fragment>
                     )}
                 </div>
+
+                {aboutButton}
             </Box>
         );
     }
@@ -710,6 +724,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    onClickAbout: PropTypes.func,
     onClickAccount: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,