refined colors

src/components/modal/social/modal.scss

@@ -14,9 +14,8 @@
 }
 
 .social-modal-content {
-    margin: 0 auto;
     box-shadow: none;
-    width: 91%;
+    width: 92%;
     height: calc(100% - 0rem);
     margin: 1rem auto 1.625rem;
     font-size: .9375rem;
@@ -62,8 +61,12 @@
     transition: opacity 100ms linear;
 }
 
-.embed-section, .link-section {
-    margin-top: 2rem;
+.link-section {
+    margin-top: .5rem;
+}
+
+.embed-section {
+    margin-top: 1rem;
 }
 
 .social-social-icon {
@@ -126,25 +129,19 @@
 
 // NOTE: copied from inplace-input.scss. We should refactor to put this style in
 // only one place.
-.social-embed-textarea, .social-link-textarea {
+.social-form {
     transition: all .2s ease;
-    border: 2px dashed $ui-blue-25percent;
+    border: 2px solid $box-shadow-light-gray;
     border-radius: 8px;
-    background-color: $ui-light-gray;
+    background-color: $ui-blue-10percent;
+    color: $type-gray;
     padding: .75rem .875rem;
     line-height: 1.25rem;
-    color: $type-gray;
-    font-size: .8125rem;
+    font-size: .875rem;
     box-sizing: border-box;
     resize: none;
     overflow: hidden;
-
     width: 100%;
-    height: 6rem;
-
-    textarea {
-        min-height: 4rem;
-    }
 
     &:focus {
         transition: all .2s ease;
@@ -152,6 +149,18 @@
         border: 2px solid $ui-blue;
         box-shadow: 0 0 0 4px $ui-blue-25percent;
     }
+
+    &.social-textarea {
+        height: 6rem;
+    }
+
+    .social-input {
+        height: 2.75rem;
+    }
+
+    textarea {
+        min-height: 4rem;
+    }
 }
 
 // NOTE: should probably be put in a shared css location

src/components/modal/social/presentation.jsx

@@ -5,7 +5,6 @@ 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');
 const FlexRow = require('../../flex-row/flex-row.jsx');
 
@@ -17,7 +16,6 @@ const SocialModalPresentation = ({
     intl,
     isOpen,
     linkUrl,
-    onClickEmbedText,
     onCopyEmbed,
     onCopyProjectLink,
     onRequestClose,
@@ -69,13 +67,12 @@ const SocialModalPresentation = ({
                                 </div>
                             </FlexRow>
                         </FlexRow>
-                        <textarea
+                        <input
                             readOnly
-                            className="social-link-textarea"
+                            className="social-form social-input"
                             name="link"
                             ref={textarea => setLinkTextarea(textarea)}
                             value={linkUrl}
-                            onClick={onClickProjectLinkText}
                         />
                     </FlexRow>
                 </div>
@@ -85,7 +82,7 @@ const SocialModalPresentation = ({
                     <FlexRow className="social-row social-spaced-row">
                         <FlexRow className="social-label-row">
                             <div className="social-label-title">
-                                {intl.formatMessage({id: 'social.embedHtmlLabel'})}
+                                {intl.formatMessage({id: 'social.title'})}
                             </div>
                             <FlexRow className="social-spaced-row social-row-right">
                                 <div
@@ -108,11 +105,10 @@ const SocialModalPresentation = ({
                         </FlexRow>
                         <textarea
                             readOnly
-                            className="social-embed-textarea"
+                            className="social-form social-textarea"
                             name="embed"
                             ref={textarea => setEmbedTextarea(textarea)}
                             value={embedHtml}
-                            onClick={onClickEmbedText}
                         />
                     </FlexRow>
                 </div>
@@ -127,7 +123,6 @@ SocialModalPresentation.propTypes = {
     intl: intlShape,
     isOpen: PropTypes.bool,
     linkUrl: PropTypes.string,
-    onClickEmbedText: PropTypes.func,
     onCopyEmbed: PropTypes.func,
     onCopyProjectLink: PropTypes.func,
     onRequestClose: PropTypes.func,

src/l10n.json

@@ -259,7 +259,6 @@
     "comments.status.reported": "Reported",
 
     "social.title": "Embed",
-    "social.embedHtmlLabel": "Embed",
     "social.copyEmbedLinkText": "Copy embed",
     "social.linkLabel": "Link",
     "social.socialMediaLabel": "Share",

src/views/preview/subactions.jsx

@@ -95,7 +95,6 @@ Subactions.propTypes = {
     isAdmin: PropTypes.bool,
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
-    onCopyProjectLink: PropTypes.func,
     onReportClicked: PropTypes.func.isRequired,
     onReportClose: PropTypes.func.isRequired,
     onReportSubmit: PropTypes.func.isRequired,