Requested changes

EthWorks · Dec 18, 2019 · 5d80015 · 5d80015
1 parent 6354846
commit 5d80015
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 37 deletions.
diff --git 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<Props> {
   const mediaAllowed = useContext(MediaContext);
   return (
     <>
-      <Header showSettings headerText={ accounts.length === 0 ? 'Add Account' : 'Accounts'}/>
       {
         (accounts.length === 0)
           ? <AddAccount />
           : (
-            <AccountsArea>
-              <>
-                {
-                  accounts.map((json, index): React.ReactNode => (
-                    <Account
-                      {...json}
-                      key={`${index}:${json.address}`}
-                    />
-                  ))
-                }
-              </>
-            </AccountsArea>
+            <>
+              <Header showSettings text={'Accounts'} />
+              <AccountsArea>
+                <>
+                  {
+                    accounts.map((json, index): React.ReactNode => (
+                      <Account
+                        {...json}
+                        key={`${index}:${json.address}`}
+                      />
+                    ))
+                  }
+                </>
+              </AccountsArea>
+            </>
           )
       }
       <ButtonArea>
@@ -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
@@ -14,7 +14,7 @@ export default function Authorize (): React.ReactElement<{}> {
   return (
     <>
       <Scroll isLastRequest={requests.length === 1}>
-        <Header headerText='Authorize'/>
+        <Header text='Authorize'/>
         {requests.map(({ id, request, url }, index): React.ReactNode => (
           <Request
             authId={id}

diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
@@ -42,7 +42,7 @@ export default function CreateAccount (): React.ReactElement {
 
   return (
     <>
-      <Header headerText={'Create an account '}>
+      <Header text={'Create an account '}>
         <CreationSteps>
           <div>
             <CurrentStep>{step}</CurrentStep>

diff --git 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 (
     <>
-      <Header headerText='Export account' showBackArrow/>
+      <Header text='Export account' showBackArrow/>
       <div>
         <Address address={address}>
           <MovedWarning danger>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</MovedWarning>

diff --git 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 (
     <>
-      <Header headerText='Forget account' showBackArrow/>
+      <Header text='Forget account' showBackArrow/>
       <div>
         <Address address={address}>
           <MovedWarning danger>

diff --git 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<Props> {
 
   return (
     <>
-      <Header headerText='Import account' showBackArrow/>
+      <HeaderWithSmallerMargin text='Import account' showBackArrow />
       <SeedInput
         rowsCount={2}
         isError={!account}
@@ -63,12 +63,15 @@ export default function Import (): React.ReactElement<Props> {
             <Button onClick={_onCreate}>Add the account with the supplied seed</Button>
           </ButtonArea>
         </>
-
       )}
     </>
   );
 }
 
+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
@@ -19,7 +19,7 @@ export default function Signing (): React.ReactElement<{}> {
 
   return requests[requestIndex] ? (
     <>
-      <Header headerText='Transaction'>
+      <Header text='Transaction'>
         {requests.length > 1 && (
           <TransactionIndex
             index={requestIndex}

diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -19,7 +19,7 @@ export default function Welcome (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header headerText='Welcome'/>
+      <Header text='Welcome'/>
       <Note>Before we start, just a couple of notes regarding use:</Note>
       <TextBox>
         <List>

diff --git 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<Props> {
   const onAction = useContext(ActionContext);
 
   return (
-    <div className={className}>
-      <Image>
-        <AddAccountImage onClick={(): void => onAction('/account/create')}/>
-      </Image>
-      <div>
-        <TipText>You currently don&apos;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.</TipText>
+    <>
+      <Header showSettings text={'Add Account'}/>
+      <div className={className}>
+        <Image>
+          <AddAccountImage onClick={(): void => onAction('/account/create')}/>
+        </Image>
+        <div>
+          <TipText>You currently don&apos;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.</TipText>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 

diff --git 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<Chain | null>(null);
   const [formatted, setFormatted] = useState<string | null>(null);
   const [showActionsMenu, setShowActionsMenu] = useState(false);
-  const [isTooltipHidden, setIsTooltipHidden] = useState(false);
+  const [moveMenuUp, setIsMovedMenu] = useState(false);
   const actionsRef = useRef<HTMLDivElement>(null);
   useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));
 
@@ -78,15 +78,15 @@ function Address ({ address, className, children, genesisHash, name, actions }:
 
   useEffect(() => {
     if (!showActionsMenu) {
-      setIsTooltipHidden(false);
+      setIsMovedMenu(false);
       return;
     }
     if (!actionsRef.current) {
       return;
     }
     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 }:
               <Settings onClick={(): void => setShowActionsMenu(!showActionsMenu)}>
                 {showActionsMenu ? <ActiveActionsIcon /> : <ActionsIcon />}
               </Settings>
-              {showActionsMenu && <MovableMenu reference={actionsRef} isMoved={isTooltipHidden}>{actions}</MovableMenu>}
+              {showActionsMenu && <MovableMenu reference={actionsRef} isMoved={moveMenuUp}>{actions}</MovableMenu>}
             </>
           )}
         </AccountInfoRow>

diff --git 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<Props> {
+function Header ({ children, className, showSettings, text, showBackArrow }: Props): React.ReactElement<Props> {
   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
             </BackLink>
           ) : <Logo src={logo}/>
           }
-          <LogoText>{headerText || 'polkadot{.js}'}</LogoText>
+          <LogoText>{text || 'polkadot{.js}'}</LogoText>
         </Branding>
         {showSettings && (
           <SettingsToggle onClick={(): void => setShowActionsMenu(!showActionsMenu)}>

diff --git 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`