CopyableCommand and TagDropdown improvements

mraron · Sep 27, 2023 · e774689 · e774689
1 parent 779362a
commit e774689
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/frontend/src/components/input/TagDropdown.js b/frontend/src/components/input/TagDropdown.js
@@ -18,11 +18,11 @@ function Tag({ title, onClick }) {
             }`}>
             {title}
             <span
-                className={`relative ml-3 rounded-full w-[1.1rem] h-[1.1rem] hover:bg-red-700 dark:hover:bg-red-800`}
+                className={`flex ml-3 rounded-full p-1 hover:bg-red-700 dark:hover:bg-red-800`}
                 onMouseOver={() => setHovered(true)}
                 onMouseLeave={() => setHovered(false)}
                 onClick={handleClick}>
-                <FontAwesomeIcon icon="fa-close" className="h-3 w-3 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
+                <FontAwesomeIcon icon="fa-close" className="h-3 w-3" />
             </span>
         </span>
     );

diff --git a/frontend/src/components/util/copy/CopyableCommand.js b/frontend/src/components/util/copy/CopyableCommand.js
@@ -1,18 +1,20 @@
 import CopyButton from "./CopyButton";
+import RoundedFrame from "../../container/RoundedFrame";
 
-function CopyableCommand({ text }) {
+function CopyableCommand({ text, cls }) {
     return (
-        <div className="flex items-start">
-            <div className="mr-2">
-                <CopyButton text={text} />
-            </div>
+        <RoundedFrame
+            cls={`${cls} overflow-auto`}>
             <div
-                className={`w-full bg-codebgcol border border-bordercol rounded-md flex items-center`}>
-                <div className="w-full px-3 py-2 font-code whitespace-nowrap text-sm">
+                className="relative bg-codebgcol flex">
+                <div className="flex items-center w-full px-4 py-3 overflow-x-auto whitespace-nowrap font-code">
                     {text}
                 </div>
+                <div className="absolute right-1 top-1/2 transform -translate-y-1/2 opacity-75 hover:opacity-100 transition duration-200">
+                    <CopyButton text={text} />
+                </div>
             </div>
-        </div>
+        </RoundedFrame>
     );
 }
 

diff --git a/frontend/src/pages/Info.js b/frontend/src/pages/Info.js
@@ -9,8 +9,8 @@ function CompilerOption({ lang, command }) {
     return (
         <tr className={`divide-x divide-dividecol`}>
             <td className="padding-td-default whitespace-nowrap">{lang}</td>
-            <td className="padding-td-default">
-                <CopyableCommand text={command} />
+            <td>
+                <CopyableCommand text={command} cls="border-0 rounded-none" />
             </td>
         </tr>
     );