[UEPR-399] Add avatar badges for Scratch Members

packages/scratch-gui/src/components/gui/gui.jsx

@@ -59,6 +59,7 @@ const GUIComponent = props => {
         authorId,
         authorThumbnailUrl,
         authorUsername,
+        authorAvatarBadge,
         basePath,
         backdropLibraryVisible,
         backpackHost,
@@ -257,6 +258,7 @@ const GUIComponent = props => {
                     authorId={authorId}
                     authorThumbnailUrl={authorThumbnailUrl}
                     authorUsername={authorUsername}
+                    authorAvatarBadge={authorAvatarBadge}
                     canChangeLanguage={canChangeLanguage}
                     canChangeTheme={canChangeTheme}
                     canCreateCopy={canCreateCopy}
@@ -435,6 +437,7 @@ GUIComponent.propTypes = {
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
     authorThumbnailUrl: PropTypes.string,
     authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
+    authorAvatarBadge: PropTypes.number,
     backdropLibraryVisible: PropTypes.bool,
     backpackHost: PropTypes.string,
     backpackVisible: PropTypes.bool,

packages/scratch-gui/src/components/menu-bar/account-nav.jsx

@@ -31,7 +31,8 @@ const AccountNavComponent = ({
     myClassesUrl,
     myClassUrl,
     accountSettingsUrl,
-    username
+    username,
+    avatarBadge
 }) => (
     <React.Fragment>
         <div
@@ -45,6 +46,7 @@ const AccountNavComponent = ({
                 <UserAvatar
                     className={styles.avatar}
                     imageUrl={avatarUrl}
+                    showAvatarBadge={!!avatarBadge}
                 />
             ) : null}
             <span className={styles.profileName}>
@@ -143,6 +145,7 @@ AccountNavComponent.propTypes = {
     onLogOut: PropTypes.func,
 
     username: PropTypes.string,
+    avatarBadge: PropTypes.number,
 
     avatarUrl: PropTypes.string,
     myStuffUrl: PropTypes.string,

packages/scratch-gui/src/components/menu-bar/author-info.jsx

@@ -11,8 +11,9 @@
     imageUrl,
     projectTitle,
     // TODO: use userId to link to user's profile
     userId,
-    username
+    username,
+    avatarBadge
 }) => (
     <div
         className={classNames(
@@ -23,6 +24,7 @@
         <UserAvatar
             className={styles.avatar}
             imageUrl={imageUrl}
+            showAvatarBadge={!!avatarBadge}
         />
         <div className={styles.titleAuthor}>
             <span className={styles.projectTitle}>
@@ -54,7 +56,8 @@
     imageUrl: PropTypes.string,
     projectTitle: PropTypes.string,
     userId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+    username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    avatarBadge: PropTypes.number
 };
 
 export default AuthorInfo;

packages/scratch-gui/src/components/menu-bar/menu-bar.jsx

@@ -648,6 +648,7 @@ class MenuBar extends React.Component {
                             projectTitle={this.props.projectTitle}
                             userId={this.props.authorId}
                             username={this.props.authorUsername}
+                            avatarBadge={this.props.authorAvatarBadge}
                         />
                     ) : null)}
                     <div className={classNames(styles.menuBarItem)}>
@@ -782,6 +783,7 @@ class MenuBar extends React.Component {
                                     onLogOut={menuOpts.canLogout ? this.props.onLogOut : null}
 
                                     username={this.props.username}
+                                    avatarBadge={this.props.avatarBadge}
 
                                     avatarUrl={menuOpts.avatarUrl}
                                     myStuffUrl={menuOpts.myStuffUrl}
@@ -899,6 +901,7 @@ MenuBar.propTypes = {
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     authorThumbnailUrl: PropTypes.string,
     authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    authorAvatarBadge: PropTypes.number,
     autoUpdateProject: PropTypes.func,
     canChangeLanguage: PropTypes.bool,
     canChangeTheme: PropTypes.bool,
@@ -975,6 +978,7 @@ MenuBar.propTypes = {
     shouldSaveBeforeTransition: PropTypes.func,
     showComingSoon: PropTypes.bool,
     username: PropTypes.string,
+    avatarBadge: PropTypes.number,
     userOwnsProject: PropTypes.bool,
 
     accountMenuOptions: AccountMenuOptionsPropTypes,
@@ -1008,6 +1012,7 @@ const mapStateToProps = (state, ownProps) => {
         projectTitle: state.scratchGui.projectTitle,
         settingsMenuOpen: settingsMenuOpen(state),
         username: ownProps.username ?? (user ? user.username : null),
+        avatarBadge: ownProps.avatarBadge ?? (user ? user.membership_avatar_badge : null),
         userIsEducator: permissions && permissions.educator,
         vm: state.scratchGui.vm,
         mode220022BC: isTimeTravel220022BC(state),

packages/scratch-gui/src/components/menu-bar/user-avatar.css

@@ -8,3 +8,28 @@
     vertical-align: middle;
     box-shadow: 0 0 0 1px $ui-black-transparent;
 }
+
+.avatar-badge {
+    border: 1px solid $ui-orange;
+    box-sizing: border-box;
+    border-radius: 17%;
+    box-shadow: none;
+}
+
+.avatar-badge-wrapper {
+    display: inline-block;
+    background: url('./cat-ears.svg') no-repeat top ;
+    background-size: contain;
+    align-content: end;
+
+    width: $menu-bar-button-size;
+    height: calc($menu-bar-button-size * 1.28);
+}
+
+[dir="ltr"] .avatar-badge-wrapper {
+    margin-right: calc($space * .8125);
+}
+
+[dir="rtl"] .avatar-badge-wrapper {
+    margin-left: calc($space * .8125);
+}

packages/scratch-gui/src/components/menu-bar/user-avatar.jsx

@@ -6,21 +6,26 @@ import styles from './user-avatar.css';
 
 const UserAvatar = ({
     className,
-    imageUrl
+    imageUrl,
+    showAvatarBadge = false
 }) => (
-    <img
-        className={classNames(
-            className,
-            styles.userThumbnail
-        )}
-        src={imageUrl}
-        referrerPolicy="no-referrer"
-    />
+    <div className={classNames(showAvatarBadge && styles.avatarBadgeWrapper)}>
+        <img
+            className={classNames(
+                className,
+                styles.userThumbnail,
+                showAvatarBadge && styles.avatarBadge
+            )}
+            src={imageUrl}
+            referrerPolicy="no-referrer"
+        />
+    </div>
 );
 
 UserAvatar.propTypes = {
     className: PropTypes.string,
-    imageUrl: PropTypes.string
+    imageUrl: PropTypes.string,
+    showAvatarBadge: PropTypes.bool
 };
 
 export default UserAvatar;

packages/scratch-gui/src/css/colors.css

@@ -15,6 +15,7 @@ $ui-black-transparent-10: hsla(0, 0%, 0%, 0.10); /* 10% transparent version of b
 $ui-green: hsla(163, 85%, 35%, 1); /* #0DA57A */
 $ui-green-2: hsla(163, 85%, 40%, 1); /* #0FBD8C */
 
+$ui-orange: hsla(37, 96%, 55%, 1); /* #FAA51D */
 $text-primary: hsla(225, 15%, 40%, 1); /* #575E75 */
 $text-primary-transparent: hsla(225, 15%, 40%, 0.75);