diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
index bcce2739..f63da930 100644
--- a/client/modules/IDE/components/CopyableInput.jsx
+++ b/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 (
-
);
diff --git a/client/styles/components/_copyable-input.scss b/client/styles/components/_copyable-input.scss
index 572c3d36..f19bfe61 100644
--- a/client/styles/components/_copyable-input.scss
+++ b/client/styles/components/_copyable-input.scss
@@ -8,4 +8,46 @@
left: 0;
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');
+ }
}
\ No newline at end of file
diff --git a/client/styles/components/_share.scss b/client/styles/components/_share.scss
index 2ad7b5f1..aab01002 100644
--- a/client/styles/components/_share.scss
+++ b/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;
}
@@ -19,18 +19,4 @@
display: flex;
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;
}
\ No newline at end of file