Asjust spinner buttons (#427)

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -131,6 +131,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
     : (
       <Button
         isBusy={isBusy}
+        isDisabled={isLocked === null}
         onClick={_onSignQuick}
       >
         Sign the transaction
@@ -165,7 +166,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
           )
         }
         <SignArea>
-          {(isLocked !== null) && isFirst && !isExternal && signButton}
+          {isFirst && !isExternal && signButton}
           <CancelButton>
             <Link
               isDanger

packages/extension-ui/src/components/Button.tsx

@@ -38,7 +38,7 @@ function Button ({ children, className = '', isBusy, isDisabled, onClick, to }:
       disabled={isDisabled || isBusy}
       onClick={_onClick}
     >
-      {children}
+      <div className='children'>{children}</div>
       <div className='disabledOverlay' />
       <Spinner className='busyOverlay' />
     </button>
@@ -85,8 +85,16 @@ export default styled(Button)(({ isDanger, theme }: Props) => `
     top: 0;
   }
 
-  &.isBusy .busyOverlay {
-    visibility: visible;
+  &.isBusy {
+    background: rgba(96,96,96,0.15);
+
+    .children {
+      opacity: 0.25;
+    }
+
+    .busyOverlay {
+      visibility: visible;
+    }
   }
 
   &.isDisabled .disabledOverlay {

packages/extension-ui/src/components/Spinner.tsx

@@ -26,6 +26,8 @@ function Spinner ({ className = '', size = 'normal' }: Props): React.ReactElemen
 export default React.memo(styled(Spinner)`
   bottom: 0rem;
   height: 3rem;
+  left: 50%;
+  margin-left: -1.5rem;
   position: absolute;
   right: 0.75rem;
   width: 3rem;