show link to view all remixes on project page

src/views/preview/l10n.json

@@ -22,6 +22,7 @@
     "project.remixButton.altText": "Save a copy of this project and add your own ideas.",
     "project.remixButton.remixing": "Remixing...",
     "project.remixes": "Remixes",
+    "project.viewAllRemixes": "View all",
     "project.inviteToRemix": "Invite user to remix",
     "project.instructionsLabel": "Instructions",
     "project.notesAndCreditsLabel": "Notes and Credits",

src/views/preview/presentation.jsx

@@ -573,7 +573,10 @@ const PreviewPresentation = ({
                                     </FlexRow>
                                 </div>
                                 <FlexRow className="column">
-                                    <RemixList remixes={remixes} />
+                                    <RemixList
+                                        projectId={projectId}
+                                        remixes={remixes}
+                                    />
                                     <StudioList studios={projectStudios} />
                                 </FlexRow>
                             </FlexRow>

src/views/preview/preview.scss

@@ -555,6 +555,12 @@ $stage-width: 480px;
     .studio-list {
         flex-direction: column;
 
+        .list-header {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+        }
+
         .list-title {
             margin-left: 1rem;
             font-size: 1.2rem;
@@ -562,6 +568,11 @@ $stage-width: 480px;
             align-self: flex-start;
         }
 
+        .list-header-link {
+            margin-right: 1rem;
+            align-self: center;
+        }
+
         .creator-image img {
             max-width: 2rem;
             max-height: 2rem;

src/views/preview/remix-list.jsx

@@ -10,9 +10,16 @@ const RemixList = props => {
     if (remixes.length === 0) return null;
     return (
         <FlexRow className="remix-list">
+            <div className="list-header">
                 <div className="list-title">
                     <FormattedMessage id="project.remixes" />
                 </div>
+                <div className="list-header-link">
+                    <a href={`/projects/${props.projectId}/remixes`}>
+                        <FormattedMessage id="project.viewAllRemixes" />
+                    </a>
+                </div>
+            </div>
             {remixes.length === 0 ? (
                 // TODO: style remix invitation
                 <FormattedMessage id="project.inviteToRemix" />
@@ -32,6 +39,7 @@ const RemixList = props => {
 };
 
 RemixList.propTypes = {
+    projectId: PropTypes.string,
     remixes: PropTypes.arrayOf(projectShape)
 };