added social icons and links

src/components/modal/externalshare/container.jsx

@@ -42,10 +42,11 @@ class ExternalShareModal extends React.Component {
             <ExternalShareModalPresentation
                 embedHtml={externalShare.embedHtml(projectId)}
                 fbUrl={externalShare.facebookIntentLink(projectId)}
-                googUrl={externalShare.googleClassroomIntentLink(projectId)}
+                googleClassroomUrl={externalShare.googleClassroomIntentLink(projectId)}
                 isOpen={this.props.isOpen}
                 setEmbedTextarea={this.setEmbedTextarea}
                 twitterUrl={externalShare.twitterIntentLink(projectId)}
+                weChatUrl={externalShare.weChatIntentLink(projectId)}
                 onCopyEmbed={this.handleCopyEmbed}
                 onCopyProjectLink={this.props.onCopyProjectLink}
                 onRequestClose={this.props.onRequestClose}

src/components/modal/externalshare/modal.scss

@@ -42,6 +42,9 @@
     align-items: start;
 }
 
+.externalShare-link-section {
+}
+
 .externalShare-embed-textarea {
     width: calc(100% - 3rem);
     height: 4rem;
@@ -58,11 +61,62 @@
     height: 2rem;
     padding-left: .5rem;
     padding-right: .5rem;
-    // &:before {
-        background-image: url("/svgs/forms/temp-copy.svg");
+    background-image: url("/svgs/forms/temp-copy.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    content: "";
+}
+
+.externalShare-social-icon {
+    width: 3rem;
+    height: 3rem;
+    margin-right: .75rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border-radius: .5rem;
+}
+
+.externalShare-twitter-icon {
+    background-image: url("/svgs/social/twitter.svg");
+}
+
+.externalShare-facebook-icon {
+    background-image: url("/svgs/social/facebook.svg");
+}
+
+.externalShare-google-classroom-icon {
+    background-image: url("/svgs/social/google-classroom.svg");
+}
+
+.externalShare-wechat-icon {
+    background-image: url("/svgs/social/wechat.svg");
+}
+
+// NOTE: copied from subactions.scss. We should refactor to put this style in
+// only one place.
+.externalShare-copy-link-button {
+    margin: 0 0 0 .5rem;
+    border-radius: 19px;
+    background-color: $ui-blue;
+    padding: 0 .75rem;
+    height: 2rem;
+    text-decoration: none;
+    line-height: .875rem;
+    font-size: .75rem;
+    font-weight: bold;
+
+    &:before {
+        display: inline-block;
+        margin-right: .25rem;
         background-repeat: no-repeat;
+        background-position: center center;
         background-size: contain;
-    // }
+        width: .875rem;
+        height: .875rem;
+        vertical-align: bottom;
+        content: "";
+        background-image: url("/svgs/project/copy-link-white.svg");
+    }
 }
 
 // .external-target-outer-scrollbox {

src/components/modal/externalshare/presentation.jsx

@@ -4,6 +4,7 @@ const React = require('react');
 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
+const classNames = require('classnames');
 
 const Button = require('../../forms/button.jsx');
 const Modal = require('../base/modal.jsx');
@@ -19,14 +20,15 @@ require('./modal.scss');
 const ExternalShareModalPresentation = ({
     embedHtml,
     fbUrl,
-    googUrl,
+    googleClassroomUrl,
     intl,
     isOpen,
     onCopyEmbed,
     onCopyProjectLink,
     onRequestClose,
     setEmbedTextarea,
-    twitterUrl
+    twitterUrl,
+    weChatUrl
 }) => {
     const title = intl.formatMessage({id: 'externalshare.title'});
 
@@ -66,37 +68,67 @@ const ExternalShareModalPresentation = ({
                 <FlexRow className="externalShare-embed-row">
                     <div>
                         <div className="externalShare-label">
-                            {intl.formatMessage({id: 'externalShare.embedHtmlLabel'})}
+                            {intl.formatMessage({id: 'externalShare.socialMediaLabel'})}
                         </div>
                         <FlexRow className="externalShare-embed-row">
                             <a
-                                href={twitterUrl}
+                                alt="Google Classroom"
+                                href={googleClassroomUrl}
                                 target="_blank"
                             >
-                                Tweet
+                                <div
+                                    className={classNames(
+                                        'externalShare-social-icon',
+                                        'externalShare-google-classroom-icon'
+                                    )}
+                                />
                             </a>
                             <a
+                                alt="WeChat"
+                                href={weChatUrl}
+                                target="_blank"
+                            >
+                                <div
+                                    className={classNames(
+                                        'externalShare-social-icon',
+                                        'externalShare-wechat-icon'
+                                    )}
+                                />
+                            </a>
+                            <a
+                                alt="Facebook"
                                 href={fbUrl}
                                 target="_blank"
                             >
-                                FB Post
+                                <div
+                                    className={classNames(
+                                        'externalShare-social-icon',
+                                        'externalShare-facebook-icon'
+                                    )}
+                                />
                             </a>
                             <a
-                                href={googUrl}
+                                alt="Twitter"
+                                href={twitterUrl}
                                 target="_blank"
                             >
-                                G classroom
+                                <div
+                                    className={classNames(
+                                        'externalShare-social-icon',
+                                        'externalShare-twitter-icon'
+                                    )}
+                                />
                             </a>
                         </FlexRow>
                     </div>
 
-                    <div>
+                    <div className="externalShare-link-section">
                         <div className="externalShare-label">
                             {intl.formatMessage({id: 'externalShare.linkLabel'})}
                         </div>
                         <FlexRow className="externalShare-embed-row">
                             <Button
-                                className="action-button copy-link-button"
+                                className="externalShare-copy-link-button"
                                 onClick={onCopyProjectLink}
                             >
                                 <FormattedMessage id="general.copyLink" />
@@ -108,19 +140,20 @@ const ExternalShareModalPresentation = ({
             </div>
         </Modal>
     );
-}
+};
 
 ExternalShareModalPresentation.propTypes = {
     embedHtml: PropTypes.string,
     fbUrl: PropTypes.string,
-    googUrl: PropTypes.string,
+    googleClassroomUrl: PropTypes.string,
     intl: intlShape,
     isOpen: PropTypes.bool,
     onCopyEmbed: PropTypes.func,
     onCopyProjectLink: PropTypes.func,
     onRequestClose: PropTypes.func,
     setEmbedTextarea: PropTypes.func,
-    twitterUrl: PropTypes.string
+    twitterUrl: PropTypes.string,
+    weChatUrl: PropTypes.string
 };
 
 module.exports = injectIntl(ExternalShareModalPresentation);

src/lib/external-share.js

@@ -23,6 +23,12 @@ module.exports.googleClassroomIntentLink = projectId => {
     return (`${baseUrl}url=${escapedScratchUrl}`);
 };
 
+module.exports.weChatIntentLink = projectId => {
+    const baseUrl = 'https://wechat.com/?';
+    const escapedScratchUrl = `https%3A%2F%2Fscratch.mit.edu%2Fprojects%2F${projectId}`;
+    return (`${baseUrl}url=${escapedScratchUrl}`);
+};
+
 module.exports.facebookIntentLink = projectId => {
     const baseUrl = 'https://www.facebook.com/sharer.php?';
     const escapedScratchUrl = `https%3A%2F%2Fscratch.mit.edu%2Fprojects%2F${projectId}`;

static/svgs/social/facebook.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M68 0H4a4 4 0 0 0-4 4v64a4 4 0 0 0 4 4h34.46V44.16h-9.35v-10.9h9.35v-8c0-9.3 5.68-14.37 14-14.37a77.46 77.46 0 0 1 8.38.43V21H55.1c-4.51 0-5.39 2.15-5.39 5.3v6.94H60.5l-1.4 10.9h-9.39V72H68a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4z" fill="#4267b2"/><path d="M49.71 72V44.16h9.39l1.4-10.9H49.71v-6.94c0-3.15.88-5.3 5.39-5.3h5.72V11.3a77.46 77.46 0 0 0-8.38-.43c-8.3 0-14 5.07-14 14.37v8h-9.33v10.9h9.35V72z" fill="#fff"/></svg>

static/svgs/social/google-classroom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.13 45.13"><defs><style>.cls-3{fill:#fff}.cls-4{fill:#a5d6a7}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path fill="#ffc107" d="M0 0h45.13v45.13H0z"/><g id="surface1"><path d="M6.58 8.2h32v29h-32z" fill="#388e3c"/><path class="cls-3" d="M26.32 35.13h7.52v2.07h-7.52zM25.38 18.56a3 3 0 0 1-2.82 3.1 3 3 0 0 1-2.82-3.1 3 3 0 0 1 2.82-3.11 3 3 0 0 1 2.82 3.11z"/><path class="cls-4" d="M16.92 21.66A2 2 0 0 1 15 23.73a2.08 2.08 0 0 1 0-4.14 2 2 0 0 1 1.92 2.07z"/><path d="M6.58 8.2h32v2.07h-32z" fill="#2e7d32"/><path class="cls-4" d="M32 21.66a1.89 1.89 0 1 1-1.88-2.07A2 2 0 0 1 32 21.66zM34.78 27.55a2 2 0 0 0-.44-1.24 5.51 5.51 0 0 0-4.26-1.54 5.51 5.51 0 0 0-4.26 1.54 1.9 1.9 0 0 0-.44 1.24v1.36h9.4zM19.74 27.55a2 2 0 0 0-.44-1.24 5.51 5.51 0 0 0-4.3-1.54 5.51 5.51 0 0 0-4.26 1.54 1.9 1.9 0 0 0-.44 1.24v1.36h9.4z"/><path class="cls-3" d="M28.2 26.57a2.29 2.29 0 0 0-.53-1.48 6.66 6.66 0 0 0-10.22 0 2.24 2.24 0 0 0-.53 1.48v2.34H28.2z"/></g></g></g></svg>

static/svgs/social/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M350 400H50c-27.6 0-50-22.4-50-50V50C0 22.4 22.4 0 50 0h300c27.6 0 50 22.4 50 50v300c0 27.6-22.4 50-50 50z" fill="#1da1f2"/><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9" fill="#fff"/></svg>

static/svgs/social/wechat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:#2dc100;}.cls-2{fill:#fff;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M400,340a60,60,0,0,1-60,60H60A60,60,0,0,1,0,340V60A60,60,0,0,1,60,0H340a60,60,0,0,1,60,60Z"/><path class="cls-2" d="M196.68,121.14c-8,.15-14.7,6.93-14.56,14.67A14.54,14.54,0,0,0,197.06,150a14.44,14.44,0,1,0-.38-28.88M119.15,136c.3-7.71-6.38-14.66-14.32-14.89a14.46,14.46,0,0,0-15,14A14.29,14.29,0,0,0,103.94,150,14.69,14.69,0,0,0,119.15,136m148.59,13.13c-32.29,1.69-60.36,11.48-83.15,33.59-23,22.34-33.54,49.71-30.67,83.64-12.62-1.56-24.11-3.28-35.67-4.25-4-.34-8.73.14-12.11,2.05-11.22,6.33-22,13.48-34.74,21.45,2.34-10.58,3.86-19.85,6.54-28.77,2-6.55,1.06-10.19-5-14.46C34.21,215.06,17.87,174.11,30.1,132,41.41,93,69.18,69.3,106.92,57c51.52-16.82,109.41.34,140.73,41.24a96.37,96.37,0,0,1,20.09,51"/><path class="cls-2" d="M298.92,213.74A12,12,0,0,0,287,225.25a11.87,11.87,0,1,0,23.71,1,12,12,0,0,0-11.77-12.54m-75,24a12,12,0,1,0,.09-24.05,12.25,12.25,0,0,0-12.17,12.46,12.12,12.12,0,0,0,12.08,11.59M340.27,350.44c-10.23-4.55-19.6-11.38-29.59-12.42s-20.4,4.69-30.8,5.76c-31.7,3.24-60.09-5.59-83.5-27.24-44.53-41.19-38.17-104.34,13.35-138.1,45.79-30,112.94-20,145.22,21.63,28.17,36.32,24.86,84.53-9.53,115.05-9.95,8.83-13.54,16.09-7.15,27.73,1.18,2.15,1.31,4.87,2,7.59"/></g></g></svg>