@scratch/scratch-gui-standalone 11.6.0-face-sensing

package/src/components/menu-bar/account-nav.jsx

@@ -0,0 +1,155 @@
+/*
+NOTE: this file only temporarily resides in scratch-gui.
+Nearly identical code appears in scratch-www, and the two should
+eventually be consolidated.
+*/
+
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {MenuSection} from '../menu/menu.jsx';
+import MenuItemContainer from '../../containers/menu-item.jsx';
+import UserAvatar from './user-avatar.jsx';
+import dropdownCaret from './dropdown-caret.svg';
+
+import styles from './account-nav.css';
+
+const AccountNavComponent = ({
+    className,
+    isOpen,
+    isRtl,
+    menuBarMenuClassName,
+    onClick,
+    onClose,
+    onLogOut,
+    profileUrl,
+    myStuffUrl,
+    avatarUrl,
+    myClassesUrl,
+    myClassUrl,
+    accountSettingsUrl,
+    username
+}) => (
+    <React.Fragment>
+        <div
+            className={classNames(
+                styles.userInfo,
+                className
+            )}
+            onMouseUp={onClick}
+        >
+            {avatarUrl ? (
+                <UserAvatar
+                    className={styles.avatar}
+                    imageUrl={avatarUrl}
+                />
+            ) : null}
+            <span className={styles.profileName}>
+                {username}
+            </span>
+            <div className={styles.dropdownCaretPosition}>
+                <img
+                    className={styles.dropdownCaretIcon}
+                    src={dropdownCaret}
+                />
+            </div>
+        </div>
+        <MenuBarMenu
+            className={menuBarMenuClassName}
+            open={isOpen}
+            // note: the Rtl styles are switched here, because this menu is justified
+            // opposite all the others
+            place={isRtl ? 'right' : 'left'}
+            onRequestClose={onClose}
+        >
+            {profileUrl ? (
+                <MenuItemContainer href={profileUrl}>
+                    <FormattedMessage
+                        defaultMessage="Profile"
+                        description="Text to link to my user profile, in the account navigation menu"
+                        id="gui.accountMenu.profile"
+                    />
+                </MenuItemContainer>
+            ) : null}
+
+            {myStuffUrl ? (
+                <MenuItemContainer href={myStuffUrl}>
+                    <FormattedMessage
+                        defaultMessage="My Stuff"
+                        description="Text to link to list of my projects, in the account navigation menu"
+                        id="gui.accountMenu.myStuff"
+                    />
+                </MenuItemContainer>
+            ) : null}
+
+            {myClassesUrl ? (
+                <MenuItemContainer href={myClassesUrl}>
+                    <FormattedMessage
+                        defaultMessage="My Classes"
+                        description="Text to link to my classes (if I am a teacher), in the account navigation menu"
+                        id="gui.accountMenu.myClasses"
+                    />
+                </MenuItemContainer>
+            ) : null}
+
+            {myClassUrl ? (
+                <MenuItemContainer href={myClassUrl}>
+                    <FormattedMessage
+                        defaultMessage="My Class"
+                        description="Text to link to my class (if I am a student), in the account navigation menu"
+                        id="gui.accountMenu.myClass"
+                    />
+                </MenuItemContainer>
+            ) : null}
+
+            {accountSettingsUrl ? (
+                <MenuItemContainer href={accountSettingsUrl}>
+                    <FormattedMessage
+                        defaultMessage="Account settings"
+                        description="Text to link to my account settings, in the account navigation menu"
+                        id="gui.accountMenu.accountSettings"
+                    />
+                </MenuItemContainer>
+            ) : null}
+
+            {onLogOut ? (
+                <MenuSection>
+                    <MenuItemContainer onClick={onLogOut}>
+                        <FormattedMessage
+                            defaultMessage="Sign out"
+                            description="Text to link to sign out, in the account navigation menu"
+                            id="gui.accountMenu.signOut"
+                        />
+                    </MenuItemContainer>
+                </MenuSection>
+            ) : null}
+        </MenuBarMenu>
+    </React.Fragment>
+);
+
+AccountNavComponent.propTypes = {
+    className: PropTypes.string,
+
+    isOpen: PropTypes.bool,
+    isRtl: PropTypes.bool,
+
+    menuBarMenuClassName: PropTypes.string,
+
+    onClick: PropTypes.func,
+    onClose: PropTypes.func,
+    onLogOut: PropTypes.func,
+
+    username: PropTypes.string,
+
+    avatarUrl: PropTypes.string,
+    myStuffUrl: PropTypes.string,
+    profileUrl: PropTypes.string,
+    myClassesUrl: PropTypes.string,
+    myClassUrl: PropTypes.string,
+    accountSettingsUrl: PropTypes.string
+};
+
+export default AccountNavComponent;

package/src/components/menu-bar/author-info.css

@@ -0,0 +1,39 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.author-info {
+    color: $ui-white;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: default;
+}
+
+.avatar {
+    margin-right: .5625rem;
+}
+
+.project-title {
+    max-width: $menu-bar-item-max-width;
+    display: block;
+    overflow: hidden;
+    font-size: $menu-bar-large-font-size;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.username-line {
+    max-width: $menu-bar-item-max-width;
+    font-size: $menu-bar-standard-font-size;
+    display: block;
+    overflow: hidden;
+    font-weight: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.username {
+    font-weight: bold;
+}

package/src/components/menu-bar/author-info.jsx

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import {FormattedMessage, injectIntl} from 'react-intl';
+import UserAvatar from './user-avatar.jsx';
+
+import styles from './author-info.css';
+
+const AuthorInfo = ({
+    className,
+    imageUrl,
+    projectTitle,
+    // TODO: use userId to link to user's profile
+    userId, // eslint-disable-line no-unused-vars
+    username
+}) => (
+    <div
+        className={classNames(
+            className,
+            styles.authorInfo
+        )}
+    >
+        <UserAvatar
+            className={styles.avatar}
+            imageUrl={imageUrl}
+        />
+        <div className={styles.titleAuthor}>
+            <span className={styles.projectTitle}>
+                {projectTitle}
+            </span>
+            <div>
+                <span className={styles.usernameLine}>
+                    <FormattedMessage
+                        defaultMessage="by {username}"
+                        description="Shows that a project was created by this user"
+                        id="gui.authorInfo.byUser"
+                        values={{
+                            username: <span className={styles.username}>{username}</span>
+                        }}
+                    />
+                </span>
+            </div>
+        </div>
+    </div>
+);
+
+AuthorInfo.propTypes = {
+    className: PropTypes.string,
+    imageUrl: PropTypes.string,
+    projectTitle: PropTypes.string,
+    userId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
+
+export default injectIntl(AuthorInfo);

package/src/components/menu-bar/cat_logo.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="238.5" height="108.5" viewBox="0,0,238.5,108.5"><g transform="translate(-120.75,-125.75)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><image x="241.5" y="251.5" transform="scale(0.5,0.5)" width="477" height="217" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd0AAADZCAYAAABl2+rMAAAAAXNSR0IArs4c6QAAHZJJREFUeF7t3Xl8VOW9x/GE7IkJJIFAIEAIFBe0qLhc0LrvivdqARUXXEq1bm2v2+vVl1ev3upttS5tX9XWXXFBautLEdypO64IKioYEUkkLIEsZA8h99Xf7xx7M2Qyz8w8M3POzOf88zPwzHPOeT8nfH3mbOnT797Rm+bD5fbxp8lWb/v2GanDiwf12YuGtgz5OT1nlNSiSm1/8bIbfLi3bLJtgUdOel263PL576U21yyWOmKIHkfuL0VHT7r83JFWIXXUwQ9JPfvZqbY3if4QQCAFBNL9Frq3jDxMhqWr/l2p40ZouBbm6z+Ogcumxh3yR/VthVKzh/5I6sgD9R/b05/QUGZJDYG/TNVx3/DBNVLLhuZJLS/qkjpoUP/HUc2mHj2OWtRp9CGPST3/lVNTA469RAABKwKELqFr5UDySyeErl9Giu1EIDkFfBO69x76oIzApvcvljphhH4NmJfT/8wkcLi6t+sXhjUNBVLbe0ukjpx6l9Q5i45IzhFO8b2aP3u9CGz44Eqpbeufkzq2VGeuwb4hCca2vlH/prFnotSq4/8hddYjg1Ncmt1HAAETAUKX0DU5TnzbhtD17dCx4QgkpYDnQ3fef3wg8NXP6rnYcc4Mt6So74VT4Y5OXYOe692wVevIf/uj1Llvzg23K9p7UODhE3UGuv6dn0rN2rFRqjvDzck2+4YkcNfcyw5X1eXIXxWM0+Pl0hW/8aACm4QAAl4TIHQJXa8dk1a2h9C1wkgnCCBgWcCzobvgnCbZ1bUvHik1f/vnUscMi26GG+jX0KIz3TXrtZZN1nN/l3z8a8vUdBcPgfsOf1RW893bOgMt0VP4aWPK9LhJT49shhu47Y3OcfO1c9yMO3ahNDn3+aPjsZusAwEEfCpA6BK6Pj10+99sQjephpOdQSDpBDwbun/a51rB3lZ9t9SJIzqkZmbYmakEjmRLu17dvKpGr2odMn6m1F9+NS/pBj0Zd+ieg/4ku/Xd0iukjizVmW25U2O1z2s36TckXXlTpF753ZuxWhX9IoBAEggQus4gErr+PpoJXX+PH1uPQKoIeC50H5+5SuyrF+4ntaJYZ55DB9s9lxtsgDu6dMa7cq1zH2eF3r975Tp9TCCLtwTu3v9m2aANH90otdK5ur00yqvbTfeyrUOPly/W6fEy5jB9TOQFS0437YJ2CCCQQgKEbsBgE7r+OvoJXX+NF1uLQKoLeC50/7jXf8qYtK29X+ruo3QGEe+lx7khc3m1M+MddbhswpU1z8d7U1hfPwJ/PuAW+dO6D6+TOmGUfhMyuCA+34gEbtK3G/U46ciaIPWqTZ8ybggggMBOAoRukIOC0PX2bwuh6+3xYesQQKB/Ac+E7qOnfCxbWL1QX5nm3o8b8lxu/pm6Zz01WjvfsDrWvb16zm7ZVzqTKZ6grwj8xeqHra6HzswE7jtUz5nWvHmR1JjNcMM8rgLP7VYcrM/0nvvG+WY7RisEEEgJAUI3xDATut76PSB0vTUebA0CCIQn4JnQ/f3uF8qWd9TOlxryXG6RXrWaljur7x43/1J/7tAnBNlaupy3FH26Rme8w/a6XOqlK/TcIktsBR46Ts+lf/PSKVJjdpXyYL3fNy3n2L471OTMWEN8k+Ke221LHy2fv2br6tjC0DsCCPhKgNA1HC5C1xAqRs0I3RjB0i0CCMRVIOGhu2BOs+zwqgVjpZYP7pRaNiTIVag5hyjQ4AcGhmqcoX/ftdwqaKtzX+aXzn2Z5fvfJP1f9J4+CYnFrsC8k5dKh9XP6dXjo4bqcTGixPJVygU/0w0vCDKOvXqcptXr/eNpvfokqsAl8PioPGqBNDnvpZPtwtAbAgj4UoDQDXPYCN0wwaJsTuhGCcjHEUDAUwIJD90HjnpKQL5dcpbUvcZlSM3OCnjGcrozsyl5VQEz9JxZ0MW9mnmrvqUo2Mwk0tFocl6UUO28ZabiR/qM6Lmvnxdpl3zu/wk8NkPfKrX67/tKLSvW8R9t+S1TaZnjdK0lL5v5d+jMNa35VwO2X12r5/6zKvTJVD//8kGz/mmFAAJJLUDoRji8hG6EcIYfI3QNoWiGAAK+Ekh46P5h958I2I4Nj0utGh7kXF2oc27B2Ftv079p1Zmo7aW+Sc/tfbtR65jDdEZzwZIzbK8qJfqbf0at7OcXT+qTnYoL9RuPqnL9BsT6UvKsdpm5R3hdbzlQ2/ds6fdzGxv0eNjYki/12tb68PqnNQIIJKUAoRvlsBK6UQIGfJzQtetJbwgg4C2BhIfuzYXlIjKysElqSbC3w5S+pnIZFeEJuledbj16wJlJeJ3u3Lpui85s1jt17JFPyM/nv6z3lbIMLLBgzjZp8MUTZVILsrT9xNExmuHmTtcVFN0R2dCEOLfb2a1PMvvsGz23W3m0Xrtw3osnRbY+PoUAAkkhQOhaGkZCNzpIQjc6Pz6NAAL+EEhY6LrPWv7qGX3W8t4TdEaTMSjgquVoZyTuOBhedRrtsK3bpDObzY060xl3zNNSz33h+Gi7TurP31So32AM6tZzn5MqM2O7v5F+c+JuleF9u6u/c65iHqlPTvv5Kp7ZHduBpXcEvC1A6FoeH0I3MlBCNzI3PoUAAv4SSFjo3r3//4pU51c3Sq0aEeTcXbBn4UbqHOKq00i7DfzcmvU6w2lo0Rlv1fH67OA5i/TJSiwq8NuyvfU42Pql1L0nxHiGa+ubE3cAQzzre3Ojc66/KVs+8V/tjQw9AgiksAChG6PBJ3TNYAldMydaIYBAcggkLHRvGb6/CA7PXCm1uDDg/lz3CVTDLL+lpe0+HbmW38RlBFfV6Iy3vVtXV3mcPlHrnGenxWX9Xl3J7yr0SWHb1r8tdcrEGM9wXYhoz+UGgna+qH/SdEm/1Nt79JuOFV/rcVB13CKpcxY7T0rz6gCxXQggEBMBQjcmrP/qlNDtH5jQJXRj/KtH9wh4UiBhoXtjjj6pZ/cKvVo5J/BZy7bPvbn8hled2h6tz77ZLl32ZpdKHXuUvu/3rKf12cLuMn/2evnPrm1rtDZ/7VQ959nVpN8MdLes05/b6pyq9znbXjJz8qTL7AK9nzo7f4TWol2lZg3+of5cqM8w/r7uUik/z3gwp88m3VE1U35uXKv7P3m8nsvPzAi4at32jpi+nSrS9W6eqJ8M8vahT9bqud2y/W6X+tO3Lop0TXwOAQR8LEDoBvlH0vaYEroqSugSurZ/t+gPAT8JxD10n5ilM7cv/zZJ6pQfBDmXV3SzOubq/Y3Wl5brtcu2x6x3PVCHH1frjDe7QGeMO3rapHa16ftaM50Zf5bDkuWc6s5yLu7OytQZoftzptsuRjPFnh16TrJbNzutW09NpnVvD/hz5/Wy7t9vd57IlJmtj5bKytf7cNsavpG6R6XuUF52jGe47mAUz9P/ytL7wq0vTedrl51v9Nv1audtVDmV+t7eyz5xnglufUPoEAEEvCxA6BK6Ax6fhK7hry+hawhFMwRSWyDuofvA0fqEpo1vz5Y6aUyQ+3NtX2UaOM7dS/VPGs5OyBHQ0q4zxe9ntA7DoMAnciVk66JfaW9v/zNk92rewQVB3iYV/ar79hCrq+ADtzPEVfHrNupXBJ1FR0i94lu9ipkFAQRSS4DQJXRjcsQTun1ZCd2YHGZ0ioDvBOIeundNuUH/j79a75MdH/ie1HjNTNyh2qTvbWVJUoFsfeJV2hB9y0/MlhDfnLjv193cqefyf9WoV6ezIIBAagkQuoRuch/xhG5yjy97h4DPBOIeurdX6ntMc7e9IrViWMA53Xj9I+ner7u5732yPhs/NjeUQKbeP5xW8nKoltH9fYjjqalVL++udq5ivqGnI7r18WkEEPClAKFL6PrywDXeaELXmIqGCCAQe4G4h+5NRWNkr8oL9L2pQwcHXMUaqydRBVom6D7d2A8pa+hXwPbbqoIxBzld0dGlV3OvXKtXMe/64+VSZ/91NwYMAQRSSIDQjfN9uil0bHlrVwldb40HW4NAigrEPXSvH5Qr1BMr9FxuYX7AE4kK9Ik9aQVX2BkS91xb5wvaX8cCrV0602BJMQH3m5Q850lntp9Q1ThjwOPro9X6aC/eNpRixx27i4AjQOhyKKSWAKGbWuPN3iLgMYHkC133fsl2Z0bb6Tz5J04vNvDY+LI5oQQy9K1P3z/jO/c0/TlDnxUd9sJMN2wyPoBAKgkQuqk02uzrzgKELkcFAgjEUcC/oeueq3VntO33KlvPljjysaqkFXDvF8+bq7uYc6zZrjLTNXOiFQIpKkDopujAs9shBAhdDhEEEIiBgH9Ct6dWd7/VeQ8p52pjcDjQZVAB92tod+brXv2cXtT3I8x0OYgQQGAAAUKXwwMBEwFC10SJNgggEELAe6Gbc4hucr5zLs09Z9uxkMFEwDsC7tuw8i/UbcqeprX5F1qDXFvAfbreGUK2BIFECBC6iVBnnf4XIHT9P4bsAQIJEPBe6CYAgVUiEC8BZrrxkmY9CHhTgND15riwVUkqQOgm6cCyWwgYChC6hlDb2vQtMTWb9C0xGxv055xsfXb0bmP0bUklhQFvTTLsP1ma1Tfpe2NX1Wjt6lan8lJ1GV2mtSA34JnbyQIQYj8I3RQZaHYTgSAChK7hoUHomkERugM7EbpmxxGtEEhWgZiH7vzT14ld3QdXSt1Wo1chjx+hM56d3jLkMenVtTqzfW25vh3mo1U6gwtcyop15nbEPvr2pMP3yfLYnsR2c17+sFtWsORj9drarDPcwOWA3XXcD98nU2pVuXqlyvJ5jfqk51ZKLZ92v9RzFjpXP6cKBPuJQIoKELohBp7QNfvNIHTNnAhdMydaIZCsAjEL3XsOvkfM6t67XGpRgc5wRjozwrwcb5/Ta3bO4d63qEu2e9W6/me4gQdGvrNfc6frTG6PsVqTdVlerd8A3Puc1u09/c9wA/d/ryo9Hi44IVuq148HW+PXs0N91m/RuqlBj6vhk/X90WV7Xyd1xoM5tlZJPwgg4CEBQjfIYBC6ZkcpoWvm5LYidMPzojUCySZgLXTnnbxU/8/942ultm9+R2r5EJ3RDhvir6t63/9CZ273L9ZzleEuB+2l5yrPOUZncqbLOyt1vUtX6rm/WYfpTHl0Wd9zn22dOlP69bxOqfnOxOjas3P7XdVDL2i71bX6uStm6XaVFkU3Lvcu0n4//NLsm4DAjbvoZD33vc8PkvsbgWDj39iibuudq+HTc8fKz2VTbpV63kvTTQ8d2iGAgA8ECN0gg0Tomh29hK6ZE6EbnROfRiBZBKIO3bv2vV4sNq74rdQSZ+ZU7py7zXXuY/UbmHth0FOv68wz3GVEqc7wbzi3/5lnsP5uW+DMSJ37XE+aqjPc6dP6zphXO1fB3rZAzzm7izuDnTi678z4wtva+7Sbc5zOMKdNim6GedWfO6Sf5lazc7mB+33mUbr+Qyan1tXegQ7BvnYeNukiaXrpp3eGewjSHgEEPChA6AYZFELX7GgldM2cQrUidEMJ8fcIJIdAxKF7e9VMEWipfU7q6KE6s4v2HKFXWN/6VM/lznspspnu+Ao9V3r1aeFdhXrXMzrTXVGt5/pKB6vrzT/pO2Ne+I7OcJ9bqud+3SVwBhvujDhc//9+SGe6dc7VuOF+/oITdYZ7wG7RzbjDXa/X27vnemsd15zS/WWTy6c9IHX2ggle3wW2DwEE+hEgdIMcFoSu2e8LoWvmFG4rQjdcMdoj4A8B49B98qx62aM1iw+Wmt5VI3XsUN3RZHuW7lfOk6geeF5nvMGesBRsmGc6Vx0fNSW8c5XBZqajy9xvErQud2bCwdY/cbTOtGs36blW92rnPOeZx3deEt655mDrWfye+jzzVnjfCLjnvM9zzi1XjkitJ1OZ/vPQ6Ty7urZev/no6C2W6j7J6twXjjftinYIIOABAUI3yCAQumZHJ6Fr5hRpK0I3Ujk+h4A3BUKG7qOnfCxbXr1wqtTBBTrTGuPcN5qV5BOU15brTO5vb+i5U/etOcGGc+oknWHOPkqvNs7OjOzJW4HndoOtz525un/f3jHwVcSzDtdzp0fuG94MPNj6W531Pf6KnmP+MMizqd3PFzhP7Pqx803AQXtyLjecfxrWb9EZb91WrSP3/x+pF757VTjd0BYBBBIkQOiGgCd0BwYidOP7m0voxtebtSFgWyBo6D58wquyrjUvnCi1rNh5H+qw6J5gZHsH4tWf+7CMlWt1xlvfrGsuzNM6fqS67DlOp/7u+2Oj3b5Xl+lMO/AcbmmR9jzrcJ1RtztPqFr4jrbf4myfu/6pk3S7or0vN9j+1G5Wl8++0RnYmjqtbXpxc9ow58lkkyrVab9dmeFGc2wEXmjV6Yx/NH3yWQQQMBPILx4nDfPLj5RaPHGu1LP+PjlkB4RuSCJtQOgODEXoGh5IlpoRupYg6QaBCATiErpTJjIziWBs+AgCMRVo79Jz+NvDu3g8pttE5wgku4B7gWNrt16z09Cs3+wN3fNqqRcvuyEogfFMl9BN9sOI/fOjAKHrx1Fjm/0uQOj6fQTZfgQQQAAB3wq4r4J1bzUdd8zTsi/93UfPTNe3w8yGI4AAAgh4QYDQ9cIosA0IIIAAAikl4N7S19SrVzdfU79yp/1npptShwQ7iwACCCAQKwFCN1ay9IsAAggggECAQIdzN4H7PIdJZ9ZJi1nz9Jnp/1yY6XLYIIAAAgggYEGA0LWASBcIIIAAAgiEI/DRar1xvuq4RVLnLNYnVzHTDUeRtggggAACCBgIELoGSDRBAAEEEEDAhgCha0ORPhBAAAEEEDAQIHQNkGiCAAIIIICADQFC14YifSCAAAIIIGAgQOgaINEEAQQQQAABGwKErg1F+kAAAQQQQMBAgNA1QKIJAggggAACNgQIXRuK9IEAAggggICBAKFrgEQTBBBAAAEEbAgQujYU6QMBBBBAAAEDAULXAIkmCCCAAAII2BAgdG0o0gcCCCCAAAIGAoSuARJNEEAAAQQQsCFA6NpQpA8EEEAAAQQMBAhdAySaIIAAAgggYEOA0LWhSB8IIIAAAggYCBC6Bkg0QQABBBBAwIYAoWtDkT4QQAABBBAwECB0DZBoggACCCCAgA0BQteGIn0ggAACCCBgIEDoGiDRBAEEEEAAARsChK4NRfpAAAEEEEDAQIDQNUCiCQIIIIAAAjYECF0bivSBAAIIIICAgQCha4BEEwQQQAABBGwIELo2FOkDAQQQQAABAwFC1wCJJggggAACCNgQIHRtKNIHAggggAACBgKErgESTRBAAAEEELAhQOjaUKQPBBBAAAEEDAQIXQMkmiCAAAIIIGBDgNC1oUgfCCCAAAIIGAgQugZINEEAAQQQQMCGAKFrQ5E+EEAAAQQQMBAgdA2QaIIAAggggIANAULXhiJ9IIAAAgggYCBA6Bog0QQBBBBAAAEbAoSuDUX6QAABBBBAwECA0DVAogkCCCCAAAI2BAhdG4r0gQACCCCAgIEAoWuARBMEEEAAAQRsCBC6NhTpAwEEEEAAAQMBQtcAiSYIIIAAAgjYECB0bSjSBwIIIIAAAgYChK4BEk0QQAABBBCwIUDo2lCkDwQQQAABBAwECF0DJJoggAACCCBgQ4DQtaFIHwgggAACCBgIELoGSDRBAAEEEEDAhgCha0ORPhBAAAEEEDAQIHQNkGiCAAIIIICADQFC14YifSCAAAIIIGAgQOgaINEEAQQQQAABGwKErg1F+kAAAQQQQMBAgNA1QKIJAggggAACNgQIXRuK9IEAAggggICBAKFrgEQTBBBAAAEEbAgQujYU6QMBBBBAAAEDAULXAIkmCCCAAAII2BAgdG0o0gcCCCCAAAIGAoSuARJNEEAAAQQQsCFA6NpQpA8EEEAAAQQMBAhdAySaIIAAAgggYEOA0LWhSB8IIIAAAggYCBC6Bkg0QQABBBBAwIYAoWtDkT4QQAABBBAwECB0DZBoggACCCCAgA0BQteGIn0ggAACCCBgIEDoGiDRBAEEEEAAARsChK4NRfpAAAEEEEDAQIDQNUCiCQIIIIAAAjYECF0bivSBAAIIIICAgQCha4BEEwQQQAABBGwIELo2FOkDAQQQQAABAwFC1wCJJggggAACCNgQIHRtKNIHAggggAACBgKErgESTRBAAAEEELAhQOjaUKQPBBBAAAEEDAQIXQMkmiCAAAIIIGBDgNC1oUgfCCCAAAIIGAgQugZINEEAAQQQQMCGAKFrQ5E+EEAAAQQQMBAgdA2QaIIAAggggIANAULXhiJ9IIAAAgggYCBA6Bog0QQBBBBAAAEbAoSuDUX6QAABBBBAwECA0DVAogkCCCCAAAI2BAhdG4r0gQACCCCAgIEAoWuARBMEEEAAAQRsCBC6NhTpAwEEEEAAAQMBQtcAiSYIIIAAAgjYECB0bSjSBwIIIIAAAgYChK4BEk0QQAABBBCwIUDo2lCkDwQQQAABBAwECF0DJJoggAACCCBgQ4DQtaFIHwgggAACCBgIRBS68/79Pem6euGhUiePz5CamZFusEqaIIAAAgggkFoC23t6ZYdXfN0jdeKpy6Se+dQe30OkT797h7YKWAjd1DpY2FsEEEAAgegEogrd+aevk7V/sWCi1F1H60x3lzxmutENC59GAAEEEEhGgZZ2ncOuqc+Tem1r/U67GXSmS+gm4yHBPiGAAAIIxEogqtB1N+rWUUfKf27f+o7USWN1xsuCAAIIIIAAAv8SWFmjM91dquZKvezTO81nuoQuhxICCCCAAALmAlZC99FT9Oqrr56ZJrXQOadbWT5Ifs7O5Byv+ZDQEgEEEEAgWQTaOnRmu3az1vT83aRes1lzs78l6DldtzGhmyyHB/uBAAIIIGBTICah627gI9Pfkv+s/+x3UptrXpCanaUz3Wyd+FpbcnO0q8EF2r971XTGIGbW4SC3d+n/gbU6V9U1t+rP2/U2MhYEEEAAgTAFunboBzo79d/ToZN+pnWPy6We8eS4oD2GnOm6nyR0wxwVjzQndD0yEGwGAggkjUBcQjdQ6/GZq+SPOrZ+qrVBq62ls7laumrf/K7U3u7NUiuKt0stLrQ8tba14Qnup8d5IkptU75sydaGbVJzS6dIzR+6n9SM7CEJ3lJWjwACCPhTIK90H9nwvNJ9pZ4+f4zxjhjPdAN7JHSNjePakNCNKzcrQwCBFBRISOjG2/kv0/4gq6x7/2qpZSV6v3BFCed4/+nQ3KbnFr5r3EVq5hD9P7DyA++QOvuvelUdCwIIIIBA4gQinunGe5MJ3YHFCd14H5GsDwEEEAhfwDeh6+7aQ8e/JP9Zt1SvFssbtEFqVVlqzngbtulldGvqtA7b8zKpl35ya/hHA59AAAEEEIipAKEbU97Yd07oxt6YNSCAAAK2BHwXuu6OP3rqCvnPmiWn6ow3vU5nvMNT46rmwLAdvvc1sv8XL7vB1rFBPwgggAAClgUIXcug8eqO0I2XNOtBAAEE7An4NnR3mvH+Y4bOeHtrdcY7IjnfhkTY2jv46QkBBBCItwChG2/xKNdH6EYJyMcRQACBBAr4PnR3nvHOcma865JqxkvYJvC3hFUjgAAClgQIXUuQse6G0I21MP0jgAACsRdImtDdacb72uk64+1ZK7XSuap5kM/eUkTYxv6XgDUggAAC8RIgdOMlHeF6CN0I4fgYAggg4EGBpAvdnWa8b8yRP8rsWi11tPOs5vxcbz/BasNWfcLUd/VauQ/Xg789bBICCCAQpgChGyZYvJoTuvGSZj0IIIBA/ASSNnRdwifP3Cj/uWHZdVKb1zwidcQQnenm52gtzE/MzLerW98OtK1da3O7bnlrt74taPgB+nalC5boOWoWBBBAAAH/ChC6hK5/j162HAEEEPCZQNKHbuB43HvIg/JHLWvu15nlxg+l7uhJ7MjlFxbLBuSPPFbq0B9eL/WMJ8cldsNYOwIIIICANQFCl9C1djDREQIIIIDAwAIpF7rBOB4+4dWEHCvZhVXMaBMiz0oRQACB+AsQuo45oRv/g481IoAAAqkmQOim2oizvwgggAACCRMgdBNGz4oRQAABBFJNgNBNtRFnfxFAAAEEEiZA6CaMnhUjgAACCKSawP8BDpKJg3FY6C0AAAAASUVORK5CYII=" fill="none" stroke-width="0.5"/><text transform="translate(139.37582,206.2183) scale(1.36559,0.96661)" font-size="40" xml:space="preserve" fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="Curly" font-weight="normal" text-anchor="start" style="mix-blend-mode: normal"><tspan x="0" dy="0">Scratch</tspan></text></g></g></svg>

package/src/components/menu-bar/check.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.1715 11.403C4.74533 11.403 4.31916 11.2398 3.99453 10.9152L0.798242 7.71892C0.147331 7.06801 0.147331 6.01589 0.798242 5.36498C1.44915 4.71407 2.50127 4.71407 3.15218 5.36498L5.1715 7.38431L11.4692 1.08828C12.1184 0.43737 13.1722 0.43737 13.8231 1.08828C14.4724 1.73753 14.4724 2.7913 13.8231 3.44222L6.34847 10.9152C6.02384 11.2398 5.59767 11.403 5.1715 11.403Z" fill="white"/>
+</svg>

package/src/components/menu-bar/community-button.css

@@ -0,0 +1,9 @@
+@import "../../css/colors.css";
+
+.community-button {
+    box-shadow: 0 0 0 1px $ui-black-transparent;
+}
+
+.community-button-icon {
+    height: 1.25rem;
+}

package/src/components/menu-bar/community-button.jsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from '../button/button.jsx';
+
+import communityIcon from './icon--see-community.svg';
+import styles from './community-button.css';
+
+const CommunityButton = ({
+    className,
+    onClick
+}) => (
+    <Button
+        className={classNames(
+            className,
+            styles.communityButton
+        )}
+        iconClassName={styles.communityButtonIcon}
+        iconSrc={communityIcon}
+        onClick={onClick}
+    >
+        <FormattedMessage
+            defaultMessage="See Project Page"
+            description="Label for see project page button"
+            id="gui.menuBar.seeProjectPage"
+        />
+    </Button>
+);
+
+CommunityButton.propTypes = {
+    className: PropTypes.string,
+    onClick: PropTypes.func
+};
+
+CommunityButton.defaultProps = {
+    onClick: () => {}
+};
+
+export default CommunityButton;

package/src/components/menu-bar/dropdown-caret.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="5px" viewBox="0 0 8 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>dropdown-caret</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dropdown-caret" fill="#FFFFFF">
+            <path d="M4,5 C3.72520708,5 3.45163006,4.89695045 3.24127973,4.68965311 L0.314613572,1.80666227 C-0.104871191,1.39326583 -0.104871191,0.724642023 0.314613572,0.310047331 C0.732882438,-0.10334911 7.26711756,-0.10334911 7.68538643,0.310047331 C8.10487119,0.723443772 8.10487119,1.39326583 7.68538643,1.80666227 L4.75993617,4.68965311 C4.54958583,4.89695045 4.27600882,5 4,5"></path>
+        </g>
+    </g>
+</svg>

package/src/components/menu-bar/icon--about.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm-.072 10.42c-.256 0-.472.076-.648.227-.176.151-.264.338-.264.56 0 .25.091.445.273.584.182.139.395.209.639.209.236 0 .444-.07.624-.211s.27-.335.27-.581c0-.222-.086-.409-.258-.56-.172-.151-.384-.227-.636-.227zm.144-6.42c-.624 0-1.17.113-1.638.338-.468.225-.824.51-1.068.853-.244.343-.366.683-.366 1.017 0 .162.077.313.231.452.154.139.343.209.567.209.38 0 .638-.199.774-.597.144-.38.32-.668.528-.864.208-.196.532-.293.972-.293.376 0 .683.097.921.291.238.194.357.432.357.713 0 .144-.039.278-.117.402-.078.123-.174.235-.288.336-.114.1-.299.249-.555.446-.292.225-.524.42-.696.584-.172.164-.31.354-.414.571-.104.217-.156.473-.156.769 0 .236.071.414.213.534.142.12.317.18.525.18.4 0 .638-.183.714-.55l.099-.362.093-.206.183-.227.327-.288c.492-.387.833-.663 1.023-.827.19-.164.354-.358.492-.584.138-.225.207-.488.207-.787 0-.38-.121-.733-.363-1.057-.242-.324-.585-.58-1.029-.769-.444-.188-.956-.283-1.536-.283z" id="a"/></defs><g transform="translate(-2 -2)" fill="none"><mask><use xlink:href="#a"/></mask><use fill="#fff" xlink:href="#a"/></g></svg>

package/src/components/menu-bar/icon--edit.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.64469 14.507C9.55861 14.5931 9.46145 14.6484 9.34525 14.7008L7.37873 15.5266C7.30728 15.283 7.13034 14.9734 6.80329 14.6463C6.48721 14.3302 6.18853 14.1643 5.95378 14.0819L6.76975 12.1253C6.81217 11.9991 6.88828 11.9031 6.97347 11.8179C6.9933 11.818 7.01213 11.7992 7.022 11.7893L7.04979 11.7615C7.18251 11.6288 7.36896 11.548 7.58743 11.519C8.14278 11.4502 8.78656 11.7138 9.27215 12.1994C9.75773 12.685 10.0213 13.3288 9.94158 13.8731C9.90955 14.0527 9.85041 14.2375 9.75757 14.3742C9.72988 14.4219 9.69222 14.4595 9.65366 14.4981L9.64469 14.507ZM12.8686 5.94274C13.1752 5.63606 13.6458 5.57036 14.1274 5.71486C14.4066 5.79859 14.5232 6.1447 14.3322 6.3357L9.75179 10.9161C9.64239 11.0255 9.46488 11.0435 9.32122 10.9518C9.17277 10.859 9.01934 10.7791 8.86473 10.7123C8.61252 10.6036 8.52489 10.2864 8.70154 10.1098L12.8686 5.94274ZM15.5288 8.60299L11.3627 12.7691C11.1896 12.9422 10.8712 12.8677 10.7657 12.6223C10.6976 12.4591 10.6127 12.3007 10.5148 12.1472C10.4181 11.9967 10.4422 11.8091 10.556 11.6952L15.1257 7.1256C15.3149 6.93639 15.6609 7.05104 15.7465 7.33036C15.896 7.81701 15.8373 8.29452 15.5288 8.60299ZM17.3497 4.12182C16.1781 2.95023 14.4881 2.73979 13.5762 3.65174L6.22044 11.0075C6.0402 11.1877 5.8809 11.3889 5.78441 11.6349L4.23312 15.3599C4.03804 15.8302 4.18906 16.417 4.6218 16.8497C5.05454 17.2825 5.64137 17.4335 6.11165 17.2384L9.83661 15.6871C10.0817 15.5896 10.2828 15.4303 10.4631 15.2501L17.8188 7.89438C18.7308 6.98243 18.5213 5.29341 17.3497 4.12182Z" fill="white"/>
+</svg>

package/src/components/menu-bar/icon--file.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.98116 1H15.0196C16.4042 1 17.6158 2.21154 17.6158 3.59615V10.8654H13.635C11.385 10.8654 9.65424 12.7692 9.65424 14.8462V18.8269H4.98116C3.59655 18.8269 2.38501 17.6154 2.38501 16.2308V3.59615C2.38501 2.21154 3.59655 1 4.98116 1ZM6.01963 9.82692H8.78886C9.48116 9.82692 10.0004 9.48077 10.0004 8.78846C10.0004 8.09615 9.48116 7.75 8.96193 7.75H6.01963C5.50039 7.75 4.98116 8.26923 4.98116 8.78846C4.98116 9.30769 5.50039 9.82692 6.01963 9.82692ZM14.1542 5.84615H6.01963C5.32732 5.84615 4.98116 5.32692 4.98116 4.80769C4.98116 4.28846 5.50039 3.76923 6.01963 3.76923H14.1542C14.6735 3.76923 15.1927 4.28846 15.1927 4.80769C15.0196 5.32692 14.6735 5.84615 14.1542 5.84615ZM17.4427 12.25H13.4619C12.0773 12.25 10.8658 13.4615 10.8658 15.0192V19L17.4427 12.25Z" fill="white"/>
+</svg>

package/src/components/menu-bar/icon--remix.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>remix-white</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="remix-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M3.79735343,14.2387738 C2.44202813,12.0161502 2.33133423,9.04998717 3.52556841,6.69855452 C4.76300021,4.1712308 6.84548544,3.05103565 7.68243931,2.68681676 C8.18551159,2.45318367 8.71558237,2.27107423 9.28615093,2.13693508 L9.84592008,2.01612101 C10.2571974,1.93172883 10.6666748,2.18668205 10.7557699,2.59354119 C10.845765,3.00128868 10.5838794,3.40281779 10.1708022,3.49165166 L9.62633218,3.60891238 C9.17365713,3.71551303 8.73988103,3.86475393 8.31690435,4.06196513 C7.76703465,4.30003992 5.94823489,5.22124719 4.89889272,7.36569692 C4.10243662,8.93183812 3.86484971,11.4218516 5.11848062,13.4765791 C6.25421803,15.4557978 8.57968986,16.6692686 10.7854683,16.4649507 C12.8715533,16.3148214 14.7857478,14.926348 15.4571108,13.0874868 C16.1383733,11.3578912 15.6856982,9.5847671 14.9378394,8.58627435 C14.0369891,7.35592519 12.9156509,6.97749289 12.4755751,6.87178058 C12.4098788,6.85223712 10.8691637,6.38941264 9.50843868,7.07076845 C8.92257097,7.3514835 8.16481273,7.98309234 7.7589351,8.93183812 C7.32065925,9.91167575 7.434053,11.1713401 8.02802027,12.0081552 C8.62558733,12.9053773 9.75232523,13.4135071 10.7215718,13.2411694 C11.6863186,13.0892634 12.3387827,12.3714857 12.4935742,11.7407652 C12.6753641,11.0629628 12.3963795,10.4899843 12.1785915,10.2838897 C11.8087119,9.91878246 11.4892295,9.91256409 11.4757303,9.91167575 C11.3245386,9.90723406 11.2498427,9.91878246 11.2048452,9.92588917 C11.0320547,9.98896122 10.7872682,10.1275421 10.7152722,10.2732296 C10.7026729,10.2972148 10.6702746,10.3629518 10.7323712,10.5272945 C10.880863,10.9172752 10.6801741,11.3534495 10.2850959,11.5000254 C9.89181755,11.6474897 9.44904195,11.4493901 9.29965018,11.0585211 C9.05396372,10.4118105 9.18985623,9.90545738 9.34734755,9.59453882 C9.75862489,8.78526223 10.7134723,8.49211044 10.8214663,8.46101859 C10.8709636,8.44591683 10.9231607,8.43703344 10.9744579,8.43259175 C11.0797521,8.41660165 11.2651419,8.39172816 11.516228,8.40149989 C12.0912963,8.4086066 12.7464602,8.7088651 13.2486325,9.20544645 C13.8416999,9.76509986 14.3060743,10.8897367 13.9766924,12.1120908 C13.6554101,13.4206138 12.4206782,14.5026104 10.9798576,14.7291368 C9.43014299,15.0054101 7.68513916,14.2414388 6.76358995,12.8565187 C5.87533891,11.6084027 5.70524828,9.7819783 6.35501247,8.33309781 C7.06777319,6.66479765 8.42939815,5.90970972 8.82897612,5.71782855 C10.7503702,4.75842271 12.804057,5.39180823 12.8904523,5.41845839 C13.4430218,5.54904419 14.9792372,6.06339232 16.1734713,7.69527059 C17.0914208,8.92295473 17.8356797,11.215757 16.8898319,13.6160483 C16.0258795,15.9816944 13.566315,17.7788037 10.9141612,17.9697965 C10.7062727,17.9893399 10.4956843,18 10.2859958,18 C7.71213768,18 5.10498136,16.5164743 3.79735343,14.2387738 Z" id="Fill-1" fill="#FFFFFF"></path>
+    </g>
+</svg>

package/src/components/menu-bar/icon--see-community.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>See Community</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="See-Community" fill="#FFFFFF">
+            <path d="M11.1795886,5.69863689 C10.0344146,5.50396503 8.8909358,5.87638076 8.11109855,6.59582023 L9.1028481,7.58526111 C9.48429024,7.97460483 9.2130425,8.63564275 8.66207052,8.63564275 L4.61878391,8.63564275 C4.27972423,8.63564275 4,8.35633095 4,8.0169248 L4,3.98044614 C4,3.42944014 4.66116637,3.15943873 5.05108499,3.53947206 L5.89873418,4.38587144 C6.67009494,3.78492788 7.56860307,3.35326419 8.50949367,3.15012834 C9.60296112,2.91398291 10.7379634,2.95630288 11.7814195,3.27793465 C13.8835895,3.91273418 15.5110759,5.6732449 15.977283,7.68767544 C16.0874774,8.17012309 15.7823237,8.66103473 15.2991637,8.77106665 C14.8499096,8.88109857 14.409132,8.62717876 14.2480787,8.21244306 L14.2480787,8.20397906 C13.7310127,6.85735764 12.4849684,5.89246235 11.1795886,5.69863689 Z M8.82041139,14.3015249 C9.96473779,14.4953503 11.1090642,14.123781 11.8889014,13.4043415 L10.8971519,12.4140542 C10.5157098,12.0247105 10.7861099,11.364519 11.3379295,11.364519 L15.3803684,11.364519 C15.7202758,11.364519 16,11.6438308 16,11.9823906 L16,16.0197156 C16,16.5698752 15.337986,16.840723 14.9480674,16.4598433 L14.1004182,15.6134439 C13.3290574,16.2143875 12.4313969,16.6460512 11.4896587,16.849187 C10.3961912,17.0861788 9.26118897,17.0438589 8.21858047,16.7222271 C6.11641049,16.0874276 4.48892405,14.3269169 4.022717,12.3124863 C3.9125226,11.8300387 4.21682866,11.339127 4.70083635,11.2290951 C5.15009042,11.1190632 5.59002034,11.372983 5.75192134,11.7877187 L5.75192134,11.7961827 C6.26813969,13.1419577 7.51503165,14.106853 8.82041139,14.3015249 Z" id="see-community" transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) "></path>
+        </g>
+    </g>
+</svg>

package/src/components/menu-bar/icon--settings.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.27206 2.68377C8.40818 2.27543 8.79032 2 9.22075 2H10.7792C11.2097 2 11.5918 2.27543 11.7279 2.68377L12.3219 4.4658C12.7914 4.663 13.2304 4.91818 13.6302 5.22238L15.4721 4.84547C15.8938 4.75917 16.3234 4.9524 16.5386 5.32516L17.3178 6.67485C17.533 7.04761 17.4856 7.51627 17.2 7.83832L15.9529 9.24468C15.984 9.49208 16 9.74417 16 10C16 10.2558 15.984 10.5079 15.9529 10.7553L17.2 12.1617C17.4856 12.4837 17.533 12.9524 17.3178 13.3252L16.5386 14.6748C16.3234 15.0476 15.8938 15.2408 15.4721 15.1545L13.6302 14.7776C13.2304 15.0818 12.7914 15.337 12.3219 15.5342L11.7279 17.3162C11.5918 17.7246 11.2097 18 10.7792 18H9.22075C8.79032 18 8.40818 17.7246 8.27206 17.3162L7.67805 15.5342C7.20862 15.337 6.76955 15.0818 6.36982 14.7776L4.52792 15.1545C4.10623 15.2408 3.67663 15.0476 3.46141 14.6748L2.68217 13.3252C2.46696 12.9524 2.51442 12.4837 2.8 12.1617L4.04708 10.7553C4.016 10.5079 3.99999 10.2558 3.99999 10C3.99999 9.74416 4.016 9.49207 4.04707 9.24466L2.8 7.83832C2.51442 7.51627 2.46696 7.04761 2.68217 6.67485L3.46141 5.32516C3.67663 4.9524 4.10623 4.75917 4.52792 4.84547L6.3698 5.22238C6.76954 4.91818 7.20861 4.663 7.67805 4.4658L8.27206 2.68377ZM9.99999 8C8.89542 8 7.99999 8.89543 7.99999 10C7.99999 11.1046 8.89542 12 9.99999 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 9.99999 8Z" fill="white"/>
+</svg>

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

@@ -0,0 +1,130 @@
+import classNames from 'classnames';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {connect} from 'react-redux';
+import locales from 'scratch-l10n';
+
+import check from './check.svg';
+import {MenuItem, Submenu} from '../menu/menu.jsx';
+import languageIcon from '../language-selector/language-icon.svg';
+import {languageMenuOpen, openLanguageMenu} from '../../reducers/menus.js';
+import {selectLocale} from '../../reducers/locales.js';
+
+import styles from './settings-menu.css';
+
+import dropdownCaret from './dropdown-caret.svg';
+
+class LanguageMenu extends React.PureComponent {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'setRef',
+            'handleMouseOver'
+        ]);
+    }
+
+    componentDidUpdate (prevProps) {
+        // If the submenu has been toggled open, try scrolling the selected option into view.
+        if (!prevProps.menuOpen && this.props.menuOpen && this.selectedRef) {
+            this.selectedRef.scrollIntoView({block: 'center'});
+        }
+    }
+
+    setRef (component) {
+        this.selectedRef = component;
+    }
+
+    handleMouseOver () {
+        // If we are using hover rather than clicks for submenus, scroll the selected option into view
+        if (!this.props.menuOpen && this.selectedRef) {
+            this.selectedRef.scrollIntoView({block: 'center'});
+        }
+    }
+
+    render () {
+        return (
+            <MenuItem
+                expanded={this.props.menuOpen}
+            >
+                <div
+                    className={styles.option}
+                    onClick={this.props.onRequestOpen}
+                    onMouseOver={this.handleMouseOver}
+                >
+                    <img
+                        className={styles.icon}
+                        src={languageIcon}
+                    />
+                    <span className={styles.submenuLabel}>
+                        <FormattedMessage
+                            defaultMessage="Language"
+                            description="Language sub-menu"
+                            id="gui.menuBar.language"
+                        />
+                    </span>
+                    <img
+                        className={styles.expandCaret}
+                        src={dropdownCaret}
+                    />
+                </div>
+                <Submenu
+                    className={styles.languageSubmenu}
+                    place={this.props.isRtl ? 'left' : 'right'}
+                >
+                    {
+                        Object.keys(locales)
+                            .map(locale => (
+                                <MenuItem
+                                    key={locale}
+                                    className={styles.languageMenuItem}
+                                    // eslint-disable-next-line react/jsx-no-bind
+                                    onClick={() => this.props.onChangeLanguage(locale)}
+                                >
+                                    <img
+                                        className={classNames(styles.check, {
+                                            [styles.selected]: this.props.currentLocale === locale
+                                        })}
+                                        src={check}
+                                        {...(this.props.currentLocale === locale && {ref: this.setRef})}
+                                    />
+                                    {locales[locale].name}
+                                </MenuItem>
+                            ))
+                    }
+                </Submenu>
+            </MenuItem>
+        );
+    }
+}
+
+LanguageMenu.propTypes = {
+    currentLocale: PropTypes.string,
+    isRtl: PropTypes.bool,
+    label: PropTypes.string,
+    menuOpen: PropTypes.bool,
+    onChangeLanguage: PropTypes.func,
+    onRequestCloseSettings: PropTypes.func,
+    onRequestOpen: PropTypes.func
+};
+
+const mapStateToProps = state => ({
+    currentLocale: state.locales.locale,
+    isRtl: state.locales.isRtl,
+    menuOpen: languageMenuOpen(state),
+    messagesByLocale: state.locales.messagesByLocale
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChangeLanguage: locale => {
+        dispatch(selectLocale(locale));
+        ownProps.onRequestCloseSettings();
+    },
+    onRequestOpen: () => dispatch(openLanguageMenu())
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(LanguageMenu);

package/src/components/menu-bar/login-dropdown.css

@@ -0,0 +1,4 @@
+
+.login {
+    padding: .625rem;
+}

package/src/components/menu-bar/login-dropdown.jsx

@@ -0,0 +1,82 @@
+/*
+NOTE: this file only temporarily resides in scratch-gui.
+Nearly identical code appears in scratch-www, and the two should
+eventually be consolidated.
+*/
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {defineMessages} from 'react-intl';
+
+import MenuBarMenu from './menu-bar-menu.jsx';
+
+import styles from './login-dropdown.css';
+
+// these are here as a hack to get them translated, so that equivalent messages will be translated
+// when passed in from www via gui's renderLogin() function
+const LoginDropdownMessages = defineMessages({ // eslint-disable-line no-unused-vars
+    username: {
+        defaultMessage: 'Username',
+        description: 'Label for login username input',
+        id: 'general.username'
+    },
+    password: {
+        defaultMessage: 'Password',
+        description: 'Label for login password input',
+        id: 'general.password'
+    },
+    signin: {
+        defaultMessage: 'Sign in',
+        description: 'Button text for user to sign in',
+        id: 'general.signIn'
+    },
+    needhelp: {
+        defaultMessage: 'Need Help?',
+        description: 'Button text for user to indicate that they need help',
+        id: 'login.needHelp'
+    },
+    validationRequired: {
+        defaultMessage: 'This field is required',
+        description: 'Message to tell user they must enter text in a form field',
+        id: 'form.validationRequired'
+    }
+});
+
+
+const LoginDropdown = ({
+    className,
+    isOpen,
+    isRtl,
+    onClose,
+    renderLogin
+}) => (
+    <MenuBarMenu
+        className={className}
+        open={isOpen}
+        // note: the Rtl styles are switched here, because this menu is justified
+        // opposite all the others
+        place={isRtl ? 'right' : 'left'}
+        onRequestClose={onClose}
+    >
+        <div
+            className={classNames(
+                styles.login
+            )}
+        >
+            {renderLogin({
+                onClose: onClose
+            })}
+        </div>
+    </MenuBarMenu>
+);
+
+LoginDropdown.propTypes = {
+    className: PropTypes.string,
+    isOpen: PropTypes.bool,
+    isRtl: PropTypes.bool,
+    onClose: PropTypes.func,
+    renderLogin: PropTypes.func
+};
+
+export default LoginDropdown;

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

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Menu from '../../containers/menu.jsx';
+
+const MenuBarMenu = ({
+    children,
+    className,
+    onRequestClose,
+    open,
+    place = 'right'
+}) => (
+    <div className={className}>
+        <Menu
+            open={open}
+            place={place}
+            onRequestClose={onRequestClose}
+        >
+            {children}
+        </Menu>
+    </div>
+);
+
+MenuBarMenu.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onRequestClose: PropTypes.func,
+    open: PropTypes.bool,
+    place: PropTypes.oneOf(['left', 'right'])
+};
+
+export default MenuBarMenu;