start to restyle share modal

client/modules/IDE/components/CopyableInput.jsx

@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react';
+import Clipboard from 'clipboard';
+
+class CopyableInput extends React.Component {
+  componentDidMount() {
+    this.clipboard = new Clipboard(this.input, {
+      target: () => this.input
+    });
+  }
+
+  componentWillUnmount() {
+    this.clipboard.destroy();
+  }
+
+  render() {
+    const {
+      label,
+      value
+    } = this.props;
+    return (
+      <div className="copyable-input">
+        <label className="copyable-input__label" htmlFor="copyable-input__value">{label}</label>
+        <div className="copyable-input__value-container">
+          <input
+            type="text"
+            className="copyable-input__value"
+            id="copyable-input__value"
+            value={value}
+            ref={(element) => { this.input = element; }}
+          />
+          <span
+            className="copyable-input__tooltip tooltipped tooltipped-n"
+            aria-label="Copyied to Clipboard!"
+          >
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+CopyableInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired
+};
+
+export default CopyableInput;

client/modules/IDE/components/ShareModal.jsx

@@ -1,47 +1,40 @@
 import React, { PropTypes } from 'react';
+import CopyableInput from './CopyableInput';
 
-function ShareModal(props) {
+class ShareModal extends React.PureComponent {
+  render() {
     const {
       projectId,
-    ownerUsername
-  } = props;
+      ownerUsername,
+      projectName
+    } = this.props;
     const hostname = window.location.origin;
     return (
       <div className="share-modal">
-      <div className="share-modal__section">
-        <label className="share-modal__label" htmlFor="share-modal__embed">Embed</label>
-        <input
-          type="text"
-          className="share-modal__input"
-          id="share-modal__embed"
+        <h3 className="share-modal__project-name">
+          {projectName}
+        </h3>
+        <CopyableInput
+          label="Embed"
           value={`<iframe src="${hostname}/embed/${projectId}"></iframe>`}
         />
-      </div>
-      <div className="share-modal__section">
-        <label className="share-modal__label" htmlFor="share-modal__fullscreen">Fullscreen</label>
-        <input
-          type="text"
-          className="share-modal__input"
-          id="share-modal__fullscreen"
+        <CopyableInput
+          label="Fullscreen"
           value={`${hostname}/full/${projectId}`}
         />
-      </div>
-      <div className="share-modal__section">
-        <label className="share-modal__label" htmlFor="share-modal__edit">Edit</label>
-        <input
-          type="text"
-          className="share-modal__input"
-          id="share-modal__edit"
+        <CopyableInput
+          label="Edit"
           value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
         />
       </div>
-    </div>
     );
+  }
 }
 
 ShareModal.propTypes = {
   projectId: PropTypes.string.isRequired,
-  ownerUsername: PropTypes.string.isRequired
+  ownerUsername: PropTypes.string.isRequired,
+  projectName: PropTypes.string.isRequired
 };
 
 export default ShareModal;

client/modules/IDE/pages/IDEView.jsx

@@ -477,12 +477,13 @@ class IDEView extends React.Component {
           if (this.props.ide.shareModalVisible) {
             return (
               <Overlay
-                title="Share Sketch"
+                title="Share This Sketch"
                 ariaLabel="share"
                 closeOverlay={this.props.closeShareModal}
               >
                 <ShareModal
                   projectId={this.props.project.id}
+                  projectName={this.props.project.name}
                   ownerUsername={this.props.project.owner.username}
                 />
               </Overlay>

client/styles/components/_copyable-input.scss

@@ -0,0 +1,11 @@
+.copyable-input__value-container {
+  position: relative;
+}
+
+.copyable-input__tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}

client/styles/components/_overlay.scss

@@ -29,11 +29,15 @@
 .overlay__header {
   display: flex;
   justify-content: space-between;
-  padding: #{40 / $base-font-size}rem #{20 / $base-font-size}rem #{30 / $base-font-size}rem #{20 / $base-font-size}rem;
+  padding: #{30 / $base-font-size}rem #{20 / $base-font-size}rem #{30 / $base-font-size}rem #{20 / $base-font-size}rem;
   flex: 1 0 auto;
 }
 
+.overlay__title {
+  font-size: #{21 / $base-font-size}rem;
+}
+
 .overlay__close-button {
   @include icon();
-  padding: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
+  padding: #{3 / $base-font-size}rem 0;
 }

client/styles/components/_share.scss

@@ -1,8 +1,14 @@
 .share-modal {
   padding: #{20 / $base-font-size}rem;
+  padding-top: 0;
   width: #{500 / $base-font-size}rem;
 }
 
+.share-modal__project-name {
+  padding-bottom: #{20 / $base-font-size}rem;
+  font-size: #{16 / $base-font-size}rem;
+}
+
 .share-modal__header {
   display: flex;
   justify-content: space-between;
@@ -11,14 +17,20 @@
 .share-modal__section {
   width: 100%;
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   padding: #{10 / $base-font-size}rem 0;
 }
 
 .share-modal__label {
-  width: #{86 / $base-font-size}rem;
+  width: 100%;
+  font-size: #{12 / $base-font-size}rem;
+  padding-bottom: #{3 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+  }
 }
 
 .share-modal__input {
-  flex: 1;
+  width: 100%;
+  font-size: #{16 / $base-font-size}rem;
 }

client/styles/main.scss

@@ -9,6 +9,7 @@
 @import 'vendors/codemirror';
 @import 'vendors/lint';
 @import 'vendors/dropzone';
+@import 'node_modules/primer-tooltips/build/build';
 
 @import 'components/p5-light-codemirror-theme';
 @import 'components/p5-dark-codemirror-theme';
@@ -37,6 +38,7 @@
 @import 'components/share';
 @import 'components/asset-list';
 @import 'components/keyboard-shortcuts';
+@import 'components/copyable-input';
 
 @import 'layout/ide';
 @import 'layout/fullscreen';

package.json

@@ -66,6 +66,7 @@
     "body-parser": "^1.15.1",
     "bson-objectid": "^1.1.4",
     "classnames": "^2.2.5",
+    "clipboard": "^1.7.1",
     "codemirror": "^5.21.0",
     "connect-mongo": "^1.2.0",
     "cookie-parser": "^1.4.1",
@@ -82,8 +83,8 @@
     "file-type": "^3.8.0",
     "fs-promise": "^1.0.0",
     "htmlhint": "^0.9.13",
-    "is_js": "^0.9.0",
     "is-url": "^1.2.2",
+    "is_js": "^0.9.0",
     "js-beautify": "^1.6.4",
     "jsdom": "^9.8.3",
     "jshint": "^2.9.4",
@@ -99,6 +100,7 @@
     "passport-github": "^1.1.0",
     "passport-local": "^1.0.0",
     "pretty-bytes": "^3.0.1",
+    "primer-tooltips": "^1.4.1",
     "project-name-generator": "^2.1.3",
     "pug": "^2.0.0-beta6",
     "q": "^1.4.1",