diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index cff64446..48cc8c91 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -55,7 +55,7 @@ export default function Account ({ address, className }: Props) {
}
>
- Edit
+ Edit
Forget
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 0469f0ea..108c6a3d 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -28,9 +28,10 @@ function Forget (props: Props) {
-
You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.
+
You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.
diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx
index 6d6503c8..73687a50 100644
--- a/packages/extension-ui/src/Popup/Signing/Request.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Request.tsx
@@ -38,7 +38,7 @@ export default function Request ({ isFirst, request: { address, method, nonce },
url={url}
/>
- Cancel
+ Cancel
{name || (account && account.meta.name) || ''}
{address || ''}
{children}
-
-
-
+
+
+
);
}}
@@ -50,35 +50,36 @@ function Address ({ address, children, className, isHidden, name, theme = 'polka
}
export default styled(Address)`
- background: transparent;
- padding: 1rem;
+ position: relative;
+ box-sizing: border-box;
+ margin: ${defaults.boxMargin};
+ padding: ${defaults.boxPadding};
+ padding-left: 1.25rem;
+ padding-top: 0.5rem;
- > div {
- box-sizing: border-box;
- padding: ${defaults.boxPadding};
- position: relative;
+ .details {
+ margin: 0;
+ padding-left: 4rem;
.address {
opacity: 0.5;
overflow: hidden;
- padding-left: 4.75rem;
text-overflow: ellipsis;
}
- .icon {
- left: 0;
- position: absolute;
- top: 0;
- z-index: 1;
- }
-
.name {
- padding: 0.5rem 0 0.5rem 4.75rem;
- margin-top: -0.75rem;
+ padding: 0 0 0.5rem 0;
input {
margin: -0.5rem 0;
}
}
}
+
+ .icon {
+ left: 0.25rem;
+ position: absolute;
+ top: 0;
+ z-index: 1;
+ }
`;
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index 494b5fd1..455fa24a 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -10,6 +10,7 @@ import defaults from './defaults';
type Props = {
className?: string;
children?: React.ReactNode,
+ isDanger?: boolean,
isDisabled?: boolean,
isSmall?: boolean,
label?: string,
@@ -58,9 +59,17 @@ export default styled(Button)`
button {
background: ${defaults.btnBg};
- border: ${defaults.btnBorder};
+ border: ${defaults.btnBorder}${({ isDanger }) =>
+ isDanger
+ ? defaults.btnColorDanger
+ : defaults.btnColor
+ };
border-radius: ${defaults.borderRadius};
- color: ${defaults.btnColor};
+ color: ${({ isDanger }) =>
+ isDanger
+ ? defaults.btnColorDanger
+ : defaults.btnColor
+ };
cursor: pointer;
display: block;
font-size: ${defaults.fontSize};
diff --git a/packages/extension-ui/src/components/defaults.ts b/packages/extension-ui/src/components/defaults.ts
index 936717f5..7e370ccf 100644
--- a/packages/extension-ui/src/components/defaults.ts
+++ b/packages/extension-ui/src/components/defaults.ts
@@ -2,15 +2,17 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-const TEXT_COLOR = '#4e4e4e';
+const DANGER_COLOR = '#c00';
const LABEL_COLOR = 'rgba(78, 78, 78, 0.75)';
const LINK_COLOR = '#3367d6';
+const TEXT_COLOR = '#4e4e4e';
const defaults: { [index: string]: any } = {
borderRadius: '0.25rem',
btnBg: '#fff',
- btnBorder: `2px solid ${LINK_COLOR}`,
- btnColor: LINK_COLOR, // '#fefefe',
+ btnBorder: `2px solid `,
+ btnColor: LINK_COLOR,
+ btnColorDanger: DANGER_COLOR,
btnPadding: '0.75rem 1rem',
boxMargin: '0.75rem 0',
boxPadding: '0 0.25rem',
@@ -27,7 +29,7 @@ const defaults: { [index: string]: any } = {
box: {
error: {
background: '#ffe6e6',
- border: '#c00',
+ border: DANGER_COLOR,
color: '#4d0000'
},
info: {