(null);
+ const [showActionsMenu, setShowActionsMenu] = useState(false);
+ const actionsRef = useRef(null);
+ useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));
useEffect((): void => {
if (!address) {
return;
}
-
const [formatted, account, chain] = recodeAddress(address, accounts, genesisHash);
setFormatted(formatted);
@@ -69,36 +75,111 @@ function Address ({ address, children, className, genesisHash, name }: Props): R
const theme = ((chain && chain.icon) || 'polkadot') as 'polkadot';
- return (
-
- }
- intro={
- <>
- {name || (account && account.name) || ''}
- {formatted || ''}
-
- }
- >
- {children}
-
- );
+ return
+
+
+
+ {name || (account && account.name) || ''}
+ {formatted || ''}
+
+ {actions &&
+ <>
+ setShowActionsMenu(!showActionsMenu)} ref={actionsRef}>
+ {showActionsMenu ? : }
+
+ {showActionsMenu && }
+ }
+
+ {children}
+
{children}
- {icon}
);
}
@@ -36,26 +36,17 @@ export default styled(IconBox)`
box-sizing: border-box;
margin: ${({ theme }): string => theme.boxMargin};
padding: ${({ theme }): string => theme.boxPadding};
- padding-left: 1rem;
- position: relative;
.details {
margin: 0;
-
- .intro {
- padding-left: 3rem;
- }
}
.outer-icon {
height: 64px;
+ width: 64px;
font-size: 36px;
- left: 0.25rem;
line-height: 64px;
- position: absolute;
- top: -0.5rem;
vertical-align: middle;
- width: 64px;
z-index: 1;
}
`;
diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx
index bbcef13cc3f..6a3f414af04 100644
--- a/packages/extension-ui/src/components/Identicon.tsx
+++ b/packages/extension-ui/src/components/Identicon.tsx
@@ -24,6 +24,9 @@ function Identicon ({ iconTheme, className, value }: Props): React.ReactElement<
}
export default styled(Identicon)`
+ display: flex;
+ justify-content: center;
+
.container:before {
box-shadow: none;
background: ${({ theme }): string => theme.identiconBackground};
diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx
new file mode 100644
index 00000000000..9ac0a86f701
--- /dev/null
+++ b/packages/extension-ui/src/components/Menu.tsx
@@ -0,0 +1,31 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+ children: React.ReactNode;
+ className?: string;
+}
+
+function Menu ({ children, className }: Props): React.ReactElement {
+ return
+ {children}
+
;
+}
+
+export default styled(Menu)`
+ position: absolute;
+ right: 0;
+ margin-top: 90px;
+ padding: 16px 0;
+ background: ${({ theme }): string => theme.btnAreaBackground};
+ border-radius: 4px;
+ border: 1px solid #222222;
+ box-sizing: border-box;
+ box-shadow: 0 0 32px rgba(0, 0, 0, 0.86);
+ backdrop-filter: blur(10px);
+ z-index: 1;
+`;
diff --git a/packages/extension-ui/src/components/Svg.tsx b/packages/extension-ui/src/components/Svg.tsx
new file mode 100644
index 00000000000..e84c50f3bcb
--- /dev/null
+++ b/packages/extension-ui/src/components/Svg.tsx
@@ -0,0 +1,16 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import styled from 'styled-components';
+
+interface Props {
+ src: string;
+}
+
+export default styled.span`
+ display: block;
+ mask: ${({ src }): string => `url(${src})`};
+ mask-size: cover;
+ background: ${({ theme }): string => theme.color};
+`;
diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx
index 42819f337a5..70b4628b39b 100644
--- a/packages/extension-ui/src/components/Warning.tsx
+++ b/packages/extension-ui/src/components/Warning.tsx
@@ -5,6 +5,7 @@
import React from 'react';
import styled from 'styled-components';
import WarningImageSrc from '../assets/warning.svg';
+import Svg from '@polkadot/extension-ui/components/Svg';
interface Props {
children: React.ReactNode;
@@ -12,25 +13,22 @@ interface Props {
className?: string;
}
-const WarningImage = styled.span>`
- display: inline-block;
- width: 25px;
- height: 14px;
- margin: 5px 16px 5px 0;
- mask: url(${WarningImageSrc});
- mask-size: cover;
- background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};
-`;
-
function Warning ({ children, className, danger }: Props): React.ReactElement {
return ;
}
+const WarningImage = styled(Svg)>`
+ width: 25px;
+ height: 14px;
+ margin: 5px 16px 5px 0;
+ background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};
+`;
+
export default styled(Warning)`
display: flex;
flex-direction: row;
diff --git a/packages/extension-ui/src/components/index.ts b/packages/extension-ui/src/components/index.ts
index 796407c489d..f2fd8a155ef 100644
--- a/packages/extension-ui/src/components/index.ts
+++ b/packages/extension-ui/src/components/index.ts
@@ -20,7 +20,9 @@ export { default as InputWithLabel } from './InputWithLabel';
export { default as Link } from './Link';
export { default as List } from './List';
export { default as Loading } from './Loading';
+export { default as Menu } from './Menu';
export { default as MnemonicSeed } from './MnemonicSeed';
+export { default as Svg } from './Svg';
export { default as TextAreaWithLabel } from './TextAreaWithLabel';
export { default as Tip } from './Tip';
export { default as VerticalSpace } from './VerticalSpace';
diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts
index 451f8c04ae8..4b734186dc0 100644
--- a/packages/extension-ui/src/components/themes.ts
+++ b/packages/extension-ui/src/components/themes.ts
@@ -2,9 +2,9 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-const DANGER_COLOR = '#D92A2A';
+const BUTTON_DANGER_COLOR = '#D92A2A';
+const TEXT_DANGER_COLOR = '#FF5858';
const LABEL_COLOR = '#9F9E99';
-const LINK_COLOR = '#9F9E99';
const TEXT_COLOR = '#FFFFFF';
const BG_COLOR = 'rgba(13, 14, 19, 0.9)';
@@ -13,7 +13,7 @@ export const defaultTheme = {
borderRadius: '4px',
btnAreaBackground: 'rgba(13, 14, 19, 0.7)',
btnBg: 'linear-gradient(95.52deg, #FF8A00 0.14%, #FF7A00 100.14%)',
- btnBgDanger: DANGER_COLOR,
+ btnBgDanger: BUTTON_DANGER_COLOR,
btnBorder: '0 solid ',
btnColor: TEXT_COLOR,
btnColorDanger: TEXT_COLOR,
@@ -30,7 +30,8 @@ export const defaultTheme = {
inputBackground: 'rgba(13, 14, 19, 0.9)',
readonlyInputBackground: '#000000',
iconWarningColor: '#FF7D01',
- iconDangerColor: '#FF5858',
+ iconDangerColor: TEXT_DANGER_COLOR,
+ iconLabelColor: '#8E8E8E',
identiconBackground: '#373737',
inputBorder: '#303030',
inputHeight: '40px',
@@ -39,13 +40,13 @@ export const defaultTheme = {
labelFontSize: '13px',
labelLineHeight: '18px',
lineHeight: '26px',
- linkColor: LINK_COLOR,
- linkColorDanger: DANGER_COLOR,
+ linkColor: TEXT_COLOR,
+ linkColorDanger: TEXT_DANGER_COLOR,
primaryColor: '#FF7D01',
box: {
error: {
background: '#ffe6e6',
- border: DANGER_COLOR,
+ border: BUTTON_DANGER_COLOR,
color: '#4d0000'
},
info: {
diff --git a/packages/extension-ui/src/hooks.ts b/packages/extension-ui/src/hooks.ts
new file mode 100644
index 00000000000..c2f766577ec
--- /dev/null
+++ b/packages/extension-ui/src/hooks.ts
@@ -0,0 +1,19 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { useEffect, RefObject } from 'react';
+
+export const useOutsideClick = (ref: RefObject, callback: () => void): void => {
+ const handleClick = (e: MouseEvent): void => {
+ if (ref.current && !ref.current.contains(e.target as HTMLInputElement)) {
+ callback();
+ }
+ };
+ useEffect(() => {
+ document.addEventListener('click', handleClick);
+ return (): void => {
+ document.removeEventListener('click', handleClick);
+ };
+ });
+};