added author username to moderation info area

src/views/preview/mod-info.jsx

@@ -14,6 +14,14 @@ const ModInfo = props => (
             <FormattedMessage id="project.moderationInfoLabel" />
         </div>
         <FlexRow className="mod-info">
+            {props.authorUsername &&
+                <div className="mod-username">
+                    {/* @todo: these profile links should be made into a shared library function */}
+                    <a href={`/users/${props.authorUsername}/`}>
+                        {props.authorUsername}
+                    </a>
+                </div>
+            }
             {/*  eslint-disable react/jsx-sort-props */}
             {props.revisedDate &&
                 <div className="mod-date">
@@ -54,6 +62,7 @@ const ModInfo = props => (
 );
 
 ModInfo.propTypes = {
+    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     revisedDate: PropTypes.string,
     scripts: PropTypes.number,
     sprites: PropTypes.number

src/views/preview/mod-info.scss

@@ -24,6 +24,27 @@
     }
 }
 
+.mod-username {
+
+    display: inline;
+    padding-right: 2rem;
+    font-size: .875rem;
+
+    &:before {
+        display: inline-block;
+        margin-right: .5rem;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+        width: 1.5rem;
+        height: 1.5rem;
+        vertical-align: -.35rem;
+        content: "";
+        opacity: .5;
+        background-image: url("/svgs/project/username.svg");
+    }
+}
+
 .mod-date,
 .mod-sprites,
 .mod-scripts {

src/views/preview/presentation.jsx

@@ -49,6 +49,7 @@ const PreviewPresentation = ({
     adminModalOpen,
     adminPanelOpen,
     assetHost,
+    authorUsername,
     backpackHost,
     canAddToStudio,
     canDeleteComments,
@@ -477,6 +478,7 @@ const PreviewPresentation = ({
                         {showModInfo &&
                             <FlexRow className="preview-row">
                                 <ModInfo
+                                    authorUsername={authorUsername}
                                     revisedDate={revisedDate}
                                     scripts={modInfo.scriptCount}
                                     sprites={modInfo.spriteCount}
@@ -586,6 +588,7 @@ PreviewPresentation.propTypes = {
     adminModalOpen: PropTypes.bool,
     adminPanelOpen: PropTypes.bool,
     assetHost: PropTypes.string,
+    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     backpackHost: PropTypes.string,
     canAddToStudio: PropTypes.bool,
     canDeleteComments: PropTypes.bool,

src/views/preview/project-view.jsx

@@ -572,6 +572,7 @@ class Preview extends React.Component {
                             adminModalOpen={this.state.adminModalOpen}
                             adminPanelOpen={this.state.adminPanelOpen}
                             assetHost={this.props.assetHost}
+                            authorUsername={this.props.authorUsername}
                             backpackHost={this.props.backpackHost}
                             canAddToStudio={this.props.canAddToStudio}
                             canDeleteComments={this.props.isAdmin || this.props.userOwnsProject}

static/svgs/project/username.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)" fill="#575E75" fill-rule="evenodd"><path d="M3.37 9h7.088a3.105 3.105 0 0 1 3.046 2.5l.259 1.305A1 1 0 0 1 12.782 14H1.18a1 1 0 0 1-.986-1.165L.418 11.5A2.993 2.993 0 0 1 3.37 9z"/><circle cx="7" cy="4" r="4"/></g></svg>