clean up styles more

gnosisguild · Nov 13, 2024 · 5f42de4 · 5f42de4
1 parent 09b91fc
commit 5f42de4
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 26 deletions.
diff --git a/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx b/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx
@@ -1,7 +1,6 @@
 import { Box } from '@/components'
 import { FunctionFragment, Result } from 'ethers'
 import { BaseTransaction } from './BaseTransaction'
-import classes from './style.module.css'
 
 interface Props {
   functionFragment: FunctionFragment
@@ -18,7 +17,7 @@ export const DecodedTransaction = ({ functionFragment, data }: Props) => {
         <fieldset className="flex flex-col gap-2">
           {functionFragment.inputs.map((input, i) => (
             <BaseTransaction value={data[i].toString()}>
-              {input.name} <i className={classes.inputType}>{input.type}</i>
+              {input.name} <i className="pl-1 opacity-70">{input.type}</i>
             </BaseTransaction>
           ))}
         </fieldset>

diff --git a/extension/src/panel/app-routes/transactions/Remove.tsx b/extension/src/panel/app-routes/transactions/Remove.tsx
@@ -3,8 +3,6 @@ import { ForkProvider, useProvider } from '@/providers'
 import { TransactionState, useDispatch, useTransactions } from '@/state'
 import { RiDeleteBinLine } from 'react-icons/ri'
 
-import classes from './style.module.css'
-
 type Props = {
   transactionState: TransactionState
   index: number
@@ -48,11 +46,7 @@ export const Remove = ({ transactionState, index }: Props) => {
   }
 
   return (
-    <IconButton
-      onClick={handleRemove}
-      className={classes.removeTransaction}
-      title="Remove transaction"
-    >
+    <IconButton onClick={handleRemove} title="Remove transaction">
       <RiDeleteBinLine />
     </IconButton>
   )

diff --git a/extension/src/panel/app-routes/transactions/RolePermissionCheck.tsx b/extension/src/panel/app-routes/transactions/RolePermissionCheck.tsx
@@ -128,7 +128,7 @@ export const RolePermissionCheck = ({
   return (
     <div className="flex items-center justify-between gap-2">
       <div className="flex items-center gap-2 py-1">
-        <div className="w-24">Role permissions</div>
+        <div className="w-32">Role permissions</div>
 
         {error === false ? (
           <Tag head={<RiGroupLine />} color="success">

diff --git a/extension/src/panel/app-routes/transactions/SimulationStatus.tsx b/extension/src/panel/app-routes/transactions/SimulationStatus.tsx
@@ -33,7 +33,7 @@ export const SimulationStatus = ({ transactionState, mini = false }: Props) => {
   return (
     <div className="flex items-center justify-between gap-1">
       <div className="flex items-center gap-2 py-1">
-        <div className="w-24">Simulation</div>
+        <div className="w-32">Simulation</div>
 
         {transactionState.status === ExecutionStatus.PENDING && (
           <Tag head={<Spinner />} color="info">

diff --git a/extension/src/panel/app-routes/transactions/Transaction.tsx b/extension/src/panel/app-routes/transactions/Transaction.tsx
@@ -94,7 +94,7 @@ export const Transaction = ({
     <Box
       ref={elementRef}
       p={2}
-      className="border border-zodiac-light-mustard border-opacity-80"
+      className="flex flex-col gap-2 border border-zodiac-light-mustard border-opacity-80"
     >
       <TransactionHeader
         index={index}
@@ -105,9 +105,9 @@ export const Transaction = ({
         showRoles={showRoles}
       />
       {expanded && (
-        <div className="flex flex-col gap-3">
-          <Box bg p={2} className="mt-2">
-            <div className="flex flex-1 items-center justify-between gap-2 text-xs">
+        <div className="flex flex-col gap-3 text-sm">
+          <Box bg p={2}>
+            <div className="flex flex-1 items-center justify-between gap-2">
               <ContractAddress
                 chainId={chainId}
                 address={transactionState.transaction.to}
@@ -147,7 +147,7 @@ const TransactionStatus = ({
   index,
   showRoles = false,
 }: StatusProps) => (
-  <div className="mt-3 flex flex-col justify-between gap-1 text-xs">
+  <>
     <Box bg p={2} className="flex-grow">
       <SimulationStatus transactionState={transactionState} />
     </Box>
@@ -160,7 +160,7 @@ const TransactionStatus = ({
         />
       </Box>
     )}
-  </div>
+  </>
 )
 
 type EtherValueProps = { value: string }

diff --git a/extension/src/panel/app-routes/transactions/style.module.css b/extension/src/panel/app-routes/transactions/style.module.css
@@ -16,15 +16,6 @@
   width: 494px;
 }
 
-.inputType {
-  padding-left: var(--spacing-1);
-  opacity: 0.7;
-}
-
-.removeTransaction {
-  margin-right: calc(var(--spacing-2) * -1);
-}
-
 .link {
   display: inline-flex;
   align-items: center;