From 5d8001584457e952b1b8cbf5f54fedd8c9d2c3d5 Mon Sep 17 00:00:00 2001 From: Kamil Date: Wed, 18 Dec 2019 11:40:16 +0100 Subject: [PATCH] Requested changes --- .../extension-ui/src/Popup/Accounts/index.tsx | 35 +++++++++++-------- .../src/Popup/Authorize/index.tsx | 2 +- .../src/Popup/CreateAccount/index.tsx | 2 +- packages/extension-ui/src/Popup/Export.tsx | 2 +- packages/extension-ui/src/Popup/Forget.tsx | 2 +- .../extension-ui/src/Popup/ImportSeed.tsx | 7 ++-- .../extension-ui/src/Popup/Signing/index.tsx | 2 +- packages/extension-ui/src/Popup/Welcome.tsx | 2 +- .../src/components/AddAccount.tsx | 20 ++++++----- .../extension-ui/src/components/Address.tsx | 8 ++--- .../extension-ui/src/components/Header.tsx | 6 ++-- packages/extension-ui/src/components/View.tsx | 8 +++++ 12 files changed, 59 insertions(+), 37 deletions(-) diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx index ff21967b72..e7a24735d8 100644 --- a/packages/extension-ui/src/Popup/Accounts/index.tsx +++ b/packages/extension-ui/src/Popup/Accounts/index.tsx @@ -25,23 +25,25 @@ export default function Accounts (): React.ReactElement { const mediaAllowed = useContext(MediaContext); return ( <> -
{ (accounts.length === 0) ? : ( - - <> - { - accounts.map((json, index): React.ReactNode => ( - - )) - } - - + <> +
+ + <> + { + accounts.map((json, index): React.ReactNode => ( + + )) + } + + + ) } @@ -77,5 +79,10 @@ const QrButton = styled(Button)` const AccountsArea = styled.div` height: 100%; - overflow: scroll; + overflow-y: scroll; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } `; diff --git a/packages/extension-ui/src/Popup/Authorize/index.tsx b/packages/extension-ui/src/Popup/Authorize/index.tsx index bad5cd78d7..55f1071261 100644 --- a/packages/extension-ui/src/Popup/Authorize/index.tsx +++ b/packages/extension-ui/src/Popup/Authorize/index.tsx @@ -14,7 +14,7 @@ export default function Authorize (): React.ReactElement<{}> { return ( <> -
+
{requests.map(({ id, request, url }, index): React.ReactNode => ( -
+
{step} diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx index b1b2664e3f..7b51c1e3fd 100644 --- a/packages/extension-ui/src/Popup/Export.tsx +++ b/packages/extension-ui/src/Popup/Export.tsx @@ -45,7 +45,7 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement< return ( <> -
+
You are exporting your account. Keep it safe and don't share it with anyone. diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx index 2ca5196e57..b27c3d7edb 100644 --- a/packages/extension-ui/src/Popup/Forget.tsx +++ b/packages/extension-ui/src/Popup/Forget.tsx @@ -21,7 +21,7 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement< return ( <> -
+
diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx index b0dc6c77b1..d9626a676a 100644 --- a/packages/extension-ui/src/Popup/ImportSeed.tsx +++ b/packages/extension-ui/src/Popup/ImportSeed.tsx @@ -42,7 +42,7 @@ export default function Import (): React.ReactElement { return ( <> -
+ { - )} ); } +const HeaderWithSmallerMargin = styled(Header)` + margin-bottom: 15px; +`; + const SeedInput = styled(TextAreaWithLabel)` margin-bottom: 16px; diff --git a/packages/extension-ui/src/Popup/Signing/index.tsx b/packages/extension-ui/src/Popup/Signing/index.tsx index e38a3cf3d6..2bc21dd9c4 100644 --- a/packages/extension-ui/src/Popup/Signing/index.tsx +++ b/packages/extension-ui/src/Popup/Signing/index.tsx @@ -19,7 +19,7 @@ export default function Signing (): React.ReactElement<{}> { return requests[requestIndex] ? ( <> -
+
{requests.length > 1 && ( { return ( <> -
+
Before we start, just a couple of notes regarding use: diff --git a/packages/extension-ui/src/components/AddAccount.tsx b/packages/extension-ui/src/components/AddAccount.tsx index 0c1cb1150d..1c16b6c780 100644 --- a/packages/extension-ui/src/components/AddAccount.tsx +++ b/packages/extension-ui/src/components/AddAccount.tsx @@ -6,6 +6,7 @@ import React, { useContext } from 'react'; import styled from 'styled-components'; import { ActionContext } from './contexts'; import AddAccountImage from './AddAccountImage'; +import Header from './Header'; interface Props { className?: string; @@ -15,15 +16,18 @@ function AddAccount ({ className }: Props): React.ReactElement { const onAction = useContext(ActionContext); return ( -
- - onAction('/account/create')}/> - -
- You currently don't have any accounts. Either create a new account or if you have an existing - account you wish to use, import it with the seed phrase. + <> +
+
+ + onAction('/account/create')}/> + +
+ You currently don't have any accounts. Either create a new account or if you have an existing + account you wish to use, import it with the seed phrase. +
-
+ ); } diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index bcc6a7e50c..24582f1694 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -61,7 +61,7 @@ function Address ({ address, className, children, genesisHash, name, actions }: const [chain, setChain] = useState(null); const [formatted, setFormatted] = useState(null); const [showActionsMenu, setShowActionsMenu] = useState(false); - const [isTooltipHidden, setIsTooltipHidden] = useState(false); + const [moveMenuUp, setIsMovedMenu] = useState(false); const actionsRef = useRef(null); useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu))); @@ -78,7 +78,7 @@ function Address ({ address, className, children, genesisHash, name, actions }: useEffect(() => { if (!showActionsMenu) { - setIsTooltipHidden(false); + setIsMovedMenu(false); return; } if (!actionsRef.current) { @@ -86,7 +86,7 @@ function Address ({ address, className, children, genesisHash, name, actions }: } const { bottom } = actionsRef.current.getBoundingClientRect(); if (bottom > ACCOUNTS_SCREEN_HEIGHT) { - setIsTooltipHidden(true); + setIsMovedMenu(true); } }, [showActionsMenu]); @@ -110,7 +110,7 @@ function Address ({ address, className, children, genesisHash, name, actions }: setShowActionsMenu(!showActionsMenu)}> {showActionsMenu ? : } - {showActionsMenu && {actions}} + {showActionsMenu && {actions}} )} diff --git a/packages/extension-ui/src/components/Header.tsx b/packages/extension-ui/src/components/Header.tsx index 915328c1bc..2984161f53 100644 --- a/packages/extension-ui/src/components/Header.tsx +++ b/packages/extension-ui/src/components/Header.tsx @@ -17,11 +17,11 @@ interface Props { children?: React.ReactNode; className?: string; showSettings?: boolean; - headerText?: string; + text?: string; showBackArrow?: boolean; } -function Header ({ children, className, showSettings, headerText, showBackArrow }: Props): React.ReactElement { +function Header ({ children, className, showSettings, text, showBackArrow }: Props): React.ReactElement { const [showActionsMenu, setShowActionsMenu] = useState(false); const actionsRef = useRef(null); useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu))); @@ -36,7 +36,7 @@ function Header ({ children, className, showSettings, headerText, showBackArrow ) : } - {headerText || 'polkadot{.js}'} + {text || 'polkadot{.js}'} {showSettings && ( setShowActionsMenu(!showActionsMenu)}> diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx index 28f6b3c320..20e1289c39 100644 --- a/packages/extension-ui/src/components/View.tsx +++ b/packages/extension-ui/src/components/View.tsx @@ -35,6 +35,14 @@ const BodyTheme = createGlobalStyle<{ theme: Theme }>` body { background-color: ${({ theme }): string => theme.bodyColor}; } + + html { + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } `; const Main = styled.main`