use small buttons for transaction controls

gnosisguild · Dec 4, 2024 · d1a7381 · d1a7381
1 parent b3dcfc0
commit d1a7381
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 16 deletions.
diff --git a/extension/src/components/buttons/ToggleButton.tsx b/extension/src/components/buttons/ToggleButton.tsx
@@ -1,21 +1,23 @@
 import { ChevronDown, ChevronRight } from 'lucide-react'
+import { GhostButton } from './GhostButton'
 
 interface Props {
   expanded: boolean
   onToggle(): void
 }
 
 export const ToggleButton = ({ expanded, onToggle }: Props) => (
-  <button
-    className="rounded p-1 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+  <GhostButton
+    iconOnly
+    icon={expanded ? ChevronDown : ChevronRight}
+    size="small"
     onClick={(event) => {
       event.stopPropagation()
       event.preventDefault()
 
       onToggle()
     }}
-    title={expanded ? 'collapse' : 'expand'}
   >
-    {expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-  </button>
+    {expanded ? 'collapse' : 'expand'}
+  </GhostButton>
 )
diff --git a/extension/src/panel/pages/transactions/CopyToClipboard.tsx b/extension/src/panel/pages/transactions/CopyToClipboard.tsx
@@ -29,7 +29,7 @@ export const CopyToClipboard = ({ transaction, labeled }: Props) => {
   }
 
   return (
-    <GhostButton iconOnly icon={Copy} onClick={copyToClipboard}>
+    <GhostButton iconOnly size="small" icon={Copy} onClick={copyToClipboard}>
       Copy transaction data to clipboard
     </GhostButton>
   )

diff --git a/extension/src/panel/pages/transactions/RecordingIcon.tsx b/extension/src/panel/pages/transactions/RecordingIcon.tsx
@@ -1,8 +1,6 @@
 export const RecordingIcon = () => (
-  <div className="flex size-9 items-center justify-center">
-    <div className="relative flex size-4 items-center justify-center">
-      <div className="absolute size-4 animate-ping rounded-full bg-red-400 bg-opacity-50 motion-reduce:hidden" />
-      <div className="size-3 rounded-full bg-red-500" />
-    </div>
+  <div className="relative flex size-4 items-center justify-center">
+    <div className="absolute size-4 animate-ping rounded-full bg-red-400 bg-opacity-50 motion-reduce:hidden" />
+    <div className="size-3 rounded-full bg-red-500" />
   </div>
 )
diff --git a/extension/src/panel/pages/transactions/Remove.tsx b/extension/src/panel/pages/transactions/Remove.tsx
@@ -47,7 +47,7 @@ export const Remove = ({ transactionState, index }: Props) => {
   }
 
   return (
-    <GhostButton iconOnly icon={Trash2} onClick={handleRemove}>
+    <GhostButton iconOnly size="small" icon={Trash2} onClick={handleRemove}>
       Remove transaction
     </GhostButton>
   )

diff --git a/extension/src/panel/pages/transactions/Transactions.tsx b/extension/src/panel/pages/transactions/Transactions.tsx
@@ -80,11 +80,16 @@ export const Transactions = () => {
         <RouteBubble />
 
         <div className="mt-4 flex items-center justify-between gap-2">
-          <h4>Recording Transactions</h4>
+          <div className="flex items-center gap-2">
+            <RecordingIcon />
+
+            <h4>Recording Transactions</h4>
+          </div>
 
           <div className="flex gap-1">
             <GhostButton
               iconOnly
+              size="small"
               icon={Copy}
               disabled={transactions.length === 0}
               onClick={copyTransactionData}
@@ -94,14 +99,13 @@ export const Transactions = () => {
 
             <GhostButton
               iconOnly
+              size="small"
               icon={RefreshCcw}
               disabled={transactions.length === 0}
               onClick={reforkAndRerun}
             >
               Re-simulate on current blockchain head
             </GhostButton>
-
-            <RecordingIcon />
           </div>
         </div>
       </Page.Header>

diff --git a/extension/src/panel/pages/transactions/Translate.tsx b/extension/src/panel/pages/transactions/Translate.tsx
@@ -23,7 +23,12 @@ export const Translate = ({ index, labeled }: Props) => {
   }
 
   return (
-    <GhostButton iconOnly={!labeled} icon={Wrench} onClick={translation.apply}>
+    <GhostButton
+      iconOnly={!labeled}
+      size="small"
+      icon={Wrench}
+      onClick={translation.apply}
+    >
       {translation.title}
     </GhostButton>
   )