From f8ff305cf4fa781a53f0c6a88ddae6db45d8628d Mon Sep 17 00:00:00 2001
From: Sebastien Dionne <survivant00@gmail.com>
Date: Tue, 12 Dec 2023 19:54:27 -0500
Subject: [PATCH] And adding style to GenCode

---
 .../CodeView/StyledWrapper.js                 | 20 +++++++++++++++
 .../GenerateCodeItem/CodeView/index.js        | 25 +++++++++++--------
 2 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
new file mode 100644
index 00000000..bb7c96d8
--- /dev/null
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: relative;
+
+  .copy-to-clipboard {
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+    z-index: 10;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
index a7d509a0..5d81ae09 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
@@ -2,6 +2,7 @@ import CodeEditor from 'components/CodeEditor/index';
 import get from 'lodash/get';
 import { HTTPSnippet } from 'httpsnippet';
 import { useTheme } from 'providers/Theme/index';
+import StyledWrapper from './StyledWrapper';
 import { buildHarRequest } from 'utils/codegenerator/har';
 import { useSelector } from 'react-redux';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -24,18 +25,22 @@ const CodeView = ({ language, item }) => {
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <CopyToClipboard text={snippet} onCopy={() => toast.success('Copied to clipboard!')}>
+      <StyledWrapper>
+        <CopyToClipboard
+          className="copy-to-clipboard"
+          text={snippet}
+          onCopy={() => toast.success('Copied to clipboard!')}
+        >
           <IconCopy size={25} strokeWidth={1.5} />
         </CopyToClipboard>
-      </div>
-      <CodeEditor
-        readOnly
-        value={snippet}
-        font={get(preferences, 'font.codeFont', 'default')}
-        theme={storedTheme}
-        mode={lang}
-      />
+        <CodeEditor
+          readOnly
+          value={snippet}
+          font={get(preferences, 'font.codeFont', 'default')}
+          theme={storedTheme}
+          mode={lang}
+        />
+      </StyledWrapper>
     </>
   );
 };