More small css adjustments (#353)

packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx

@@ -70,7 +70,7 @@ const HiddenOptions = styled.div<{ visible: boolean }>`
   }
 `;
 
-export default styled(AddressDropdown)`
+export default styled(AddressDropdown)(({ theme }: ThemeProps) => `
   margin-bottom: 16px;
   cursor: pointer;
 
@@ -83,13 +83,13 @@ export default styled(AddressDropdown)`
     width: 30px;
     height: 30px;
     background: url(${arrow}) center no-repeat;
-    background-color: ${({ theme }: ThemeProps): string => theme.inputBackground};
+    background-color: ${theme.inputBackground};
     pointer-events: none;
     border-radius: 4px;
-    border: 1px solid ${({ theme }: ThemeProps): string => theme.boxBorderColor};
+    border: 1px solid ${theme.boxBorderColor};
   }
 
   ${Address} ${Svg} {
     visibility: hidden;
   }
-`;
+`);

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

@@ -5,7 +5,7 @@
 import { MetadataDef } from '@polkadot/extension-inject/types';
 import { ThemeProps } from '../../types';
 
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import styled from 'styled-components';
 
 import { ActionBar, ActionContext, Button, Link, Table, Warning } from '../../components';
@@ -22,14 +22,24 @@ interface Props {
 function Request ({ className, metaId, request, url }: Props): React.ReactElement<Props> {
   const chain = useMetadata(request.genesisHash);
   const onAction = useContext(ActionContext);
-  const _onApprove = (): Promise<void> =>
-    approveMetaRequest(metaId)
-      .then((): void => onAction())
-      .catch((error: Error) => console.error(error));
-  const _onReject = (): Promise<void> =>
-    rejectMetaRequest(metaId)
-      .then((): void => onAction())
-      .catch((error: Error) => console.error(error));
+
+  const _onApprove = useCallback(
+    (): void => {
+      approveMetaRequest(metaId)
+        .then(() => onAction())
+        .catch(console.error);
+    },
+    [metaId, onAction]
+  );
+
+  const _onReject = useCallback(
+    (): void => {
+      rejectMetaRequest(metaId)
+        .then(() => onAction())
+        .catch(console.error);
+    },
+    [metaId, onAction]
+  );
 
   return (
     <div className={className}>
@@ -59,49 +69,40 @@ function Request ({ className, metaId, request, url }: Props): React.ReactElemen
           <td className='data'>{chain ? chain.specVersion : 'unknown'} -&gt; {request.specVersion}</td>
         </tr>
       </Table>
-      <RequestInfo>
-        <RequestWarning>This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata.</RequestWarning>
-        <AcceptButton onClick={_onApprove}>Yes, do this metadata update</AcceptButton>
-        <RejectButton>
+      <div className='requestInfo'>
+        <Warning className='requestWarning'>This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata.</Warning>
+        <Button
+          className='btnAccept'
+          onClick={_onApprove}
+        >
+            Yes, do this metadata update
+        </Button>
+        <ActionBar className='btnReject'>
           <Link
             isDanger
             onClick={_onReject}
           >
             Reject
           </Link>
-        </RejectButton>
-      </RequestInfo>
+        </ActionBar>
+      </div>
     </div>
   );
 }
 
-const RequestInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 8px;
-  background: ${({ theme }: ThemeProps): string => theme.highlightedAreaBackground};
-`;
+export default styled(Request)(({ theme }: ThemeProps) => `
+  .btnAccept {
+    margin: 25px auto 0;
+    width: 90%;
+  }
 
-const AcceptButton = styled(Button)`
-  width: 90%;
-  margin: 25px auto 0;
-`;
+  .btnReject {
+    margin: 8px 0 15px 0;
+    text-decoration: underline;
+  }
 
-const RequestWarning = styled(Warning)`
-  margin: 24px 24px 0 1.45rem;
-`;
-
-AcceptButton.displayName = 'AcceptButton';
-
-const RejectButton = styled(ActionBar)`
-  margin: 8px 0 15px 0;
-  text-decoration: underline;
-`;
-
-export default styled(Request)`
   .icon {
-    background: ${({ theme }: ThemeProps): string => theme.buttonBackgroundDanger};
+    background: ${theme.buttonBackgroundDanger};
     color: white;
     min-width: 18px;
     width: 14px;
@@ -113,20 +114,15 @@ export default styled(Request)`
     padding-left: 0.5px;
   }
 
-  .tab-info {
-    overflow: hidden;
-    margin: 0.75rem 20px 0 0;
+  .requestInfo {
+    align-items: center;
+    background: ${theme.highlightedAreaBackground};
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 8px;
   }
 
-  .tab-name,
-  .tab-url {
-    color: ${({ theme }: ThemeProps): string => theme.textColor};
-    display: inline-block;
-    max-width: 20rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
-    cursor: pointer;
-    text-decoration: underline;
+  .requestWarning {
+    margin: 24px 24px 0 1.45rem;
   }
-`;
+`);

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

@@ -31,7 +31,7 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
 
   return (
     <div className={className}>
-      <QrArea>
+      <div className='qrContainer'>
         {isScanning
           ? <QrScanSignature onScan={onSignature} />
           : (
@@ -43,27 +43,32 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
             />
           )
         }
-      </QrArea>
+      </div>
       {!isScanning && (
-        <ScanButton onClick={_onShowQr}>Scan signature via camera</ScanButton>
+        <Button
+          className='scanButton'
+          onClick={_onShowQr}
+        >
+          Scan signature via camera
+        </Button>
       )}
     </div>
   );
 }
 
-const ScanButton = styled(Button)`
-  margin-bottom: 8px;
-`;
-
-const QrArea = styled.div`
-  width: 65%;
-  margin: 5px auto 10px auto;
-
-  img {
-    border: white solid 1px;
-  }
-`;
-
 export default styled(Qr)`
   height: 100%;
+
+  .qrContainer {
+    margin: 5px auto 10px auto;
+    width: 65%;
+
+    img {
+      border: white solid 1px;
+    }
+  }
+
+  .scanButton {
+    margin-bottom: 8px;
+  }
 `;

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

@@ -11,26 +11,26 @@ import { Svg } from '../../components';
 import ArrowLeftImage from '../../assets/arrowLeft.svg';
 
 interface Props {
+  className?: string;
   index: number;
   totalItems: number;
   onNextClick: () => void;
   onPreviousClick: () => void;
-  className?: string;
 }
 
 interface ArrowProps extends ThemeProps {
   isActive: boolean;
 }
 
-function TransactionIndex ({ index, onNextClick, onPreviousClick, totalItems }: Props): React.ReactElement<Props> {
+function TransactionIndex ({ className, index, onNextClick, onPreviousClick, totalItems }: Props): React.ReactElement<Props> {
   const previousClickActive = index !== 0;
   const nextClickActive = index < totalItems - 1;
 
   return (
-    <CreationSteps>
+    <div className={className}>
       <div>
-        <CurrentStep>{index + 1}</CurrentStep>
-        <TotalSteps>/{totalItems}</TotalSteps>
+        <span className='currentStep'>{index + 1}</span>
+        <span className='totalSteps'>/{totalItems}</span>
       </div>
       <div>
         <ArrowLeft
@@ -42,33 +42,10 @@ function TransactionIndex ({ index, onNextClick, onPreviousClick, totalItems }:
           onClick={(): unknown => nextClickActive && onNextClick()}
         />
       </div>
-    </CreationSteps>
+    </div>
   );
 }
 
-const CreationSteps = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  flex-grow: 1;
-  padding-right: 24px;
-`;
-
-const CurrentStep = styled.span`
-  font-size: ${({ theme }: ThemeProps): string => theme.labelFontSize};
-  line-height: ${({ theme }: ThemeProps): string => theme.labelLineHeight};
-  color: ${({ theme }: ThemeProps): string => theme.primaryColor};
-  font-weight: 600;
-  margin-left: 10px;
-`;
-
-const TotalSteps = styled.span`
-  font-size: ${({ theme }: ThemeProps): string => theme.labelFontSize};
-  line-height: ${({ theme }: ThemeProps): string => theme.labelLineHeight};
-  color: ${({ theme }: ThemeProps): string => theme.textColor};
-  font-weight: 600;
-`;
-
 const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))<ArrowProps>`
   display: inline-block;
   background: ${({ isActive, theme }: ArrowProps): string => isActive ? theme.primaryColor : theme.iconNeutralColor};
@@ -86,4 +63,25 @@ const ArrowRight = styled(ArrowLeft)`
 
 ArrowRight.displayName = 'ArrowRight';
 
-export default TransactionIndex;
+export default styled(TransactionIndex)(({ theme }: ThemeProps) => `
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
+  padding-right: 24px;
+
+  .currentStep {
+    color: ${theme.primaryColor};
+    font-size: ${theme.labelFontSize};
+    line-height: ${theme.labelLineHeight};
+    font-weight: 600;
+    margin-left: 10px;
+  }
+
+  .totalSteps {
+    font-size: ${theme.labelFontSize};
+    line-height: ${theme.labelLineHeight};
+    color: ${theme.textColor};
+    font-weight: 600;
+  }
+`);