Rework curl clipboard to be similar to swagger-api#5278 📋

Author: AdrieanKhisbe

src/core/components/curl.jsx

@@ -1,27 +1,26 @@
 import React from "react"
 import PropTypes from "prop-types"
 import curlify from "core/curlify"
-import {copyToClipboard} from "core/copy-to-clipboard"
+import { CopyToClipboard } from "react-copy-to-clipboard"
 import {SyntaxHighlighter, styles} from "core/syntax-highlighting"
 
 export default class Curl extends React.Component {
   static propTypes = {
     request: PropTypes.object.isRequired
   }
 
-  copy(curlCommand) {
-    return () => copyToClipboard(curlCommand)
-  }
-
   render() {
     let { request } = this.props
     let curl = curlify(request)
 
     return (
-      <div>
-        <h4>Curl <i onClick={this.copy(curl)}>(copyCommand)</i></h4>
+      <div className="curl-command">
+        <h4>Curl</h4>
+        <div className="copy-to-clipboard">
+            <CopyToClipboard text={curl}><button/></CopyToClipboard>
+        </div>
         <div>
-          <SyntaxHighlighter language="bash" className="curl" style={styles.agate}>{curl}</SyntaxHighlighter>
+          <SyntaxHighlighter language="bash" className="curl microlight" style={styles.agate}>{curl}</SyntaxHighlighter>
         </div>
       </div>
     )

src/core/copy-to-clipboard.js

@@ -174,3 +174,17 @@ button
     background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' aria-hidden='true'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></svg>") center center no-repeat;
   }
 }
+
+// overrides for smaller copy button for curl command
+.curl-command .copy-to-clipboard
+{
+  bottom: 5px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  button
+  {
+    padding-left: 18px;
+    height: 18px
+  }
+}

src/style/_buttons.scss

@@ -664,6 +664,9 @@
     min-height: 6em;
   }
 }
+.curl-command {
+  position: relative;
+}
 
 .download-contents {
   position: absolute;