fix and finish #391

client/modules/IDE/components/CopyableInput.jsx

@@ -2,16 +2,31 @@ import React, { PropTypes } from 'react';
 import Clipboard from 'clipboard';
 
 class CopyableInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
+  }
+
   componentDidMount() {
     this.clipboard = new Clipboard(this.input, {
       target: () => this.input
     });
+
+    this.clipboard.on('success', (e) => {
+      this.tooltip.classList.add('tooltipped');
+      this.tooltip.classList.add('tooltipped-n');
+    });
   }
 
   componentWillUnmount() {
     this.clipboard.destroy();
   }
 
+  onMouseLeaveHandler() {
+    this.tooltip.classList.remove('tooltipped');
+    this.tooltip.classList.remove('tooltipped-n');
+  }
+
   render() {
     const {
       label,
@@ -20,19 +35,20 @@ class CopyableInput extends React.Component {
     return (
       <div className="copyable-input">
         <label className="copyable-input__label" htmlFor="copyable-input__value">{label}</label>
-        <div className="copyable-input__value-container">
+        <div
+          className="copyable-input__value-container"
+          aria-label="Copied to Clipboard!"
+          ref={(element) => { this.tooltip = element; }}
+          onMouseLeave={this.onMouseLeaveHandler}
+        >
           <input
             type="text"
             className="copyable-input__value"
             id="copyable-input__value"
             value={value}
             ref={(element) => { this.input = element; }}
+            readOnly
           />
-          <span
-            className="copyable-input__tooltip tooltipped tooltipped-n"
-            aria-label="Copyied to Clipboard!"
-          >
-          </span>
         </div>
       </div>
     );

client/styles/components/_copyable-input.scss

@@ -9,3 +9,45 @@
   bottom: 0;
   right: 0;
 }
+
+.copyable-input__value {
+  width: 100%;
+  font-size: #{16 / $base-font-size}rem;
+}
+
+.copyable-input__label {
+  width: 100%;
+  font-size: #{12 / $base-font-size}rem;
+  padding-bottom: #{5 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+  }
+}
+
+.copyable-input {
+  padding-bottom: #{30 / $base-font-size}rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.copyable-input__value-container {
+  width: 100%;
+}
+
+.tooltipped::after {
+  @include themify() {
+    background-color: getThemifyVariable('button-background-hover-color');
+    color: getThemifyVariable('button-hover-color');
+  }
+  font-family: Montserrat, sans-serif;
+  font-size: #{14 / $base-font-size}rem;
+}
+
+.tooltipped-n::before,
+.tooltipped::before,
+ {
+  @include themify() {
+    color: getThemifyVariable('button-background-hover-color');
+    border-top-color: getThemifyVariable('button-background-hover-color');
+  }
+}

client/styles/components/_share.scss

@@ -5,7 +5,7 @@
 }
 
 .share-modal__project-name {
-  padding-bottom: #{20 / $base-font-size}rem;
+  padding-bottom: #{30 / $base-font-size}rem;
   font-size: #{16 / $base-font-size}rem;
 }
 
@@ -20,17 +20,3 @@
   flex-wrap: wrap;
   padding: #{10 / $base-font-size}rem 0;
 }
-
-.share-modal__label {
-  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 {
-  width: 100%;
-  font-size: #{16 / $base-font-size}rem;
-}