1 files changed, 45 insertions, 18 deletions

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index eedae3fb..c4524a51 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -1,44 +1,62 @@
 import hljs from "highlight.js";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
-import { defaultBorderRadius, vscBackground } from ".";
+import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
 
-import { Clipboard } from "@styled-icons/heroicons-outline";
+import { Clipboard, CheckCircle } from "@styled-icons/heroicons-outline";
 
 const StyledPre = styled.pre`
   overflow-y: scroll;
   word-wrap: normal;
-  border: 1px solid gray;
+  border: 0.5px solid gray;
   border-radius: ${defaultBorderRadius};
-  background-color: ${vscBackground};
+  background-color: ${secondaryDark};
   padding: 8px;
+  padding-top: 14px;
+  padding-bottom: 16px;
 `;
 
-const StyledCode = styled.code`
-  background-color: ${vscBackground};
-`;
+const StyledCode = styled.code``;
 
-const StyledCopyButton = styled.button`
+const StyledCopyButton = styled.button<{ visible: boolean }>`
+  /* position: relative; */
   float: right;
   border: none;
-  background-color: ${vscBackground};
+  background-color: transparent;
   cursor: pointer;
   padding: 0;
-  margin: 4px;
-  &:hover {
-    color: #fff;
-  }
+  /* margin: 4px; */
+  margin-top: -6px;
+
+  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
 `;
 
-function CopyButton(props: { textToCopy: string }) {
+function CopyButton(props: { textToCopy: string; visible: boolean }) {
+  const [hovered, setHovered] = useState<boolean>(false);
+  const [clicked, setClicked] = useState<boolean>(false);
   return (
     <>
       <StyledCopyButton
+        onMouseEnter={() => {
+          setHovered(true);
+        }}
+        onMouseLeave={() => {
+          setHovered(false);
+        }}
+        visible={clicked || props.visible}
         onClick={() => {
           navigator.clipboard.writeText(props.textToCopy);
+          setClicked(true);
+          setTimeout(() => {
+            setClicked(false);
+          }, 2000);
         }}
       >
-        <Clipboard color="white" size="1.4em" />
+        {clicked ? (
+          <CheckCircle color="#00ff00" size="1.4em" />
+        ) : (
+          <Clipboard color={hovered ? "#00ff00" : "white"} size="1.4em" />
+        )}
       </StyledCopyButton>
     </>
   );
@@ -48,9 +66,18 @@ function CodeBlock(props: { language?: string; children: string }) {
   useEffect(() => {
     hljs.highlightAll();
   }, [props.children]);
+  const [hovered, setHovered] = useState<boolean>(false);
+
   return (
-    <StyledPre>
-      <CopyButton textToCopy={props.children} />
+    <StyledPre
+      onMouseEnter={() => {
+        setHovered(true);
+      }}
+      onMouseLeave={() => {
+        setHovered(false);
+      }}
+    >
+      <CopyButton visible={hovered} textToCopy={props.children} />
       <StyledCode>{props.children}</StyledCode>
     </StyledPre>
   );