fixes

Author: timsuchanek

packages/graphql-playground-electron/src/ElectronApp.tsx

@@ -327,7 +327,7 @@ export default class ElectronApp extends React.Component<{}, State> {
     })
       .then(res => res.json())
       .then(res => {
-        const shareUrl = `https://graphql-bin.com/${res.data.addSession.id}`
+        const shareUrl = `https://graphqlbin.com/${res.data.addSession.id}`
         // const shareUrl = `${location.origin}/${res.data.addSession.id}`
         this.setState({ shareUrl })
       })

packages/graphql-playground/src/components/Copy.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import { $v } from 'graphcool-styles'
+import * as CopyToClipboard from 'react-copy-to-clipboard'
+
+interface Props {
+  text: string
+  color?: string
+}
+
+interface State {
+  copied: boolean
+}
+
+export default class Copy extends React.Component<Props, State> {
+  private copyTimer: any
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      copied: false,
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.copyTimer)
+  }
+
+  render() {
+    const { text } = this.props
+    let { color } = this.props
+
+    color = color || $v.blue
+
+    return (
+      <CopyToClipboard text={text} onCopy={this.onCopy}>
+        <div className="copy">
+          <style jsx={true}>{`
+            .copy {
+              @p: .relative;
+            }
+            @keyframes copying {
+              0% {
+                opacity: 0;
+                transform: translate(-50%, 0);
+              }
+
+              50% {
+                opacity: 1;
+              }
+
+              100% {
+                opacity: 0;
+                transform: translate(-50%, -50px);
+              }
+            }
+            .indicator {
+              @p: .absolute;
+              top: -20px;
+              left: 50%;
+              transform: translate(-50%, 0);
+              animation: copying 700ms linear;
+            }
+          `}</style>
+          {this.state.copied &&
+            <div className="indicator" style={{ color }}>
+              Copied
+            </div>}
+          {this.props.children}
+        </div>
+      </CopyToClipboard>
+    )
+  }
+
+  private onCopy = () => {
+    this.setState({ copied: true } as State)
+    this.copyTimer = window.setTimeout(
+      () => this.setState({ copied: false } as State),
+      500,
+    )
+  }
+}

packages/graphql-playground/src/components/Playground/DocExplorer/TypeLink.tsx

@@ -143,7 +143,7 @@ class TypeLink extends React.PureComponent<
             transition: $duration background-color;
           }
           .doc-category-item.clickable:hover {
-            @p: .pointer, .white;
+            @p: .pointer, .white, .bgBlue;
           }
           .doc-category-item.clickable:hover :global(.brace) {
             @p: .white;

packages/graphql-playground/src/components/Share.tsx

@@ -6,7 +6,7 @@ import Tooltip from './Tooltip'
 import { Theme } from './Playground'
 import * as cn from 'classnames'
 import { Button } from './Button'
-import * as Copy from 'react-copy-to-clipboard'
+import Copy from './Copy'
 
 interface Props {
   theme: Theme
@@ -173,7 +173,7 @@ export default class Share extends React.Component<Props, State> {
                 <div className="row">
                   <div />
                   <Button hideArrow={true} onClick={onShare}>
-                    {reshare || shareUrl ? 'Reshare' : 'Share'}
+                    {reshare && shareUrl ? 'Reshare' : 'Share'}
                   </Button>
                 </div>
               </div>