From 0ad5c977aa2e75a36efe9232206be40c2baf3d24 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 3 Jan 2019 18:50:19 -0500
Subject: [PATCH] show link to view all remixes on project page

---
 src/views/preview/l10n.json        |  1 +
 src/views/preview/presentation.jsx |  5 ++++-
 src/views/preview/preview.scss     | 11 +++++++++++
 src/views/preview/remix-list.jsx   | 12 ++++++++++--
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json
index 5f1e86026..dbe671644 100644
--- a/src/views/preview/l10n.json
+++ b/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",
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index d38d67912..33f652e6c 100644
--- a/src/views/preview/presentation.jsx
+++ b/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>
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 60bb0560c..a18dc415d 100644
--- a/src/views/preview/preview.scss
+++ b/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;
diff --git a/src/views/preview/remix-list.jsx b/src/views/preview/remix-list.jsx
index 9f24c688c..548496b54 100644
--- a/src/views/preview/remix-list.jsx
+++ b/src/views/preview/remix-list.jsx
@@ -10,8 +10,15 @@ const RemixList = props => {
     if (remixes.length === 0) return null;
     return (
         <FlexRow className="remix-list">
-            <div className="list-title">
-                <FormattedMessage id="project.remixes" />
+            <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
@@ -32,6 +39,7 @@ const RemixList = props => {
 };
 
 RemixList.propTypes = {
+    projectId: PropTypes.string,
     remixes: PropTypes.arrayOf(projectShape)
 };