diff --git a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx index 2b6a2975..54bfb78b 100644 --- a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx +++ b/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; } -`; +`); diff --git a/packages/extension-ui/src/Popup/Metadata/Request.tsx b/packages/extension-ui/src/Popup/Metadata/Request.tsx index 6f2a7aa2..ed478b77 100644 --- a/packages/extension-ui/src/Popup/Metadata/Request.tsx +++ b/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 { const chain = useMetadata(request.genesisHash); const onAction = useContext(ActionContext); - const _onApprove = (): Promise => - approveMetaRequest(metaId) - .then((): void => onAction()) - .catch((error: Error) => console.error(error)); - const _onReject = (): Promise => - 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 (
@@ -59,49 +69,40 @@ function Request ({ className, metaId, request, url }: Props): React.ReactElemen {chain ? chain.specVersion : 'unknown'} -> {request.specVersion} - - This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata. - Yes, do this metadata update - +
+ This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata. + + Reject - - + +
); } -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; } -`; +`); diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx index b84cc3e6..efef59a1 100644 --- a/packages/extension-ui/src/Popup/Signing/Qr.tsx +++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx @@ -31,7 +31,7 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl return (
- +
{isScanning ? : ( @@ -43,27 +43,32 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl /> ) } - +
{!isScanning && ( - Scan signature via camera + )}
); } -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; + } `; diff --git a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx index 423befcc..f70896a3 100644 --- a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx +++ b/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 { +function TransactionIndex ({ className, index, onNextClick, onPreviousClick, totalItems }: Props): React.ReactElement { const previousClickActive = index !== 0; const nextClickActive = index < totalItems - 1; return ( - +
- {index + 1} - /{totalItems} + {index + 1} + /{totalItems}
nextClickActive && onNextClick()} />
- +
); } -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 }))` 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; + } +`);