moved positioning of clipboard buttons

Author: BrianHao

client/components/Clipboard.tsx

@@ -76,7 +76,6 @@ const Clipboard = () => {
           gap: '30px',
           width: .8,
         }}
-        className="code-container"
       >
         <Typography variant="h3" align="center" gutterBottom sx={{ color: '#6E00BB', mb: 0, mt: 5 }}>{projectName}</Typography>
         <TextField
@@ -88,12 +87,14 @@ const Clipboard = () => {
           onChange={updateServer}
         />
         <Box 
+          className="clipboard-code-container"
           sx={{ 
             width: .85,
             height: 500,
             overflow: 'auto',
             backgroundColor: '#282C34',
             borderRadius: 2,
+            position: 'relative'
           }}
         >
           <div id="main-clipboard">
@@ -103,8 +104,9 @@ const Clipboard = () => {
               </code> 
             </pre>
           </div>
+          <ClipboardButton />
         </Box> 
-        <ClipboardButton />
+        
         <Button
           onClick={handleClear}
           sx={{ flexDirection: 'column' }}

client/containers/CodeContainer.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import ButtonContainer from './ButtonContainer';
-
 import CodeText from '../components/CodeText';
 
 // This container wraps the text box containing the code from server
 
 const CodeContainer = () => {
   return (
-    <div className="code-container">
-      <Box className='test-code-box'>
+    <div>
+      <Box className='test-code-box code-container'>
         <CodeText />
+        <ButtonContainer />
       </Box>
-      <ButtonContainer />
     </div>
   );
 };

client/stylesheets/styles.scss

@@ -40,9 +40,11 @@ body {
 }
 
 #main-clipboard {
+  position: relative;
   font-family: 'Inconsolata', monospace;
   font-size: medium;
   border-radius: '2px';
+  z-index: 9;
 }
 
 img[alt~='logo'] {
@@ -80,29 +82,29 @@ img[alt~='logo'] {
 
 .code-container:hover > .button-container {
   transition: all 0.5s ease-in;
-  opacity: 100;
-}
-
-.code-container:hover > .clipboard-button-container {
-  transition: all 0.5s ease-in;
-  opacity: 100;
+  opacity: 1;
 }
 
 .button-container {
   position: absolute;
   display: inline-block;
-  top: 8px;
-  right: 38px;
+  top: 2px;
+  right: 30px;
   opacity: 0;
   overflow: hidden;
   z-index: 10;
 }
 
+.clipboard-code-container:hover > .clipboard-button-container {
+  transition: all 0.5s ease-in;
+  opacity: 1;
+}
+
 .clipboard-button-container {
   position: absolute;
   display: inline-block;
-  top: 86px;
-  right: 32px;
+  top: 18px;
+  right: 18px;
   opacity: 0;
   overflow: hidden;
   z-index: 10;