Remove opacity from background; add borders

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import { ActionContext, Address, Link } from '../../components';
 import { editAccount } from '../../messaging';
 import { Name } from '../../partials';
+import { AccountInfoRow } from '../../components/Address';
 
 interface Props extends AccountJson {
   address: string;
@@ -63,7 +64,7 @@ function Account ({ address, className, isExternal }: Props): React.ReactElement
 const MenuGroup = styled.div`
   padding-bottom: 16px;
   margin-bottom: 16px;
-  border-bottom: 1px solid #222222;
+  border-bottom: 1px solid ${({ theme }): string => theme.boxBorderColor};
 `;
 
 const MenuItem = styled(Link)`
@@ -78,6 +79,12 @@ const MenuItem = styled(Link)`
 MenuItem.displayName = 'MenuItem';
 
 export default styled(Account)`
+  ${AccountInfoRow} {
+    border: 1px solid ${({ theme }): string => theme.boxBorderColor};
+    box-sizing: border-box;
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
+  }
+
   .edit-name {
     position: absolute;
     left: 73px;

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -27,22 +27,26 @@ export default function Accounts (): React.ReactElement<Props> {
   return (
     <>
       <Header showSettings/>
-      <Title>Accounts</Title>
       {
         (accounts.length === 0)
           ? <AddAccount/>
-          : <AccountsArea>
-            {
-              accounts.map((json, index): React.ReactNode => (
-                <Account
-                  {...json}
-                  key={`${index}:${json.address}`}
-                />))
-            }
-          </AccountsArea>
+          : (
+            <AccountsArea>
+              <>
+                <Title>Accounts</Title>
+                {
+                  accounts.map((json, index): React.ReactNode => (
+                    <Account
+                      {...json}
+                      key={`${index}:${json.address}`}
+                    />))
+                }
+              </>
+            </AccountsArea>
+          )
       }
       <ButtonArea>
-        <ButtonWithSubtitle to='/account/create' title='Create New Accoun' subTitle='With new seed'/>
+        <ButtonWithSubtitle to='/account/create' title='Create New Account' subTitle='With new seed'/>
         <ButtonWithSubtitle to='/account/import-seed' title='Import an Account' subTitle='I have a pre-existing seed'/>
         {mediaAllowed && (
           <QrButton to='/account/import-qr'>

packages/extension-ui/src/components/AddAccount.tsx

@@ -2,20 +2,23 @@
 // 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 React, { useContext } from 'react';
 import styled from 'styled-components';
 import addAccountImage from '../assets/addAccount.png';
+import { ActionContext } from '@polkadot/extension-ui/components/contexts';
 
 interface Props {
   className?: string;
 }
 
 function AddAccount ({ className }: Props): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
+
   return (
     <div className={className}>
-      <Image src={addAccountImage} alt="add account" onClick={(): void => { window.location.hash = '/account/create'; }}/>
+      <Image src={addAccountImage} alt="add account" onClick={(): void => onAction('/account/create')}/>
       <div>
-        <h3>add accounts</h3>
+        <h3>Add Account</h3>
         <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>

packages/extension-ui/src/components/Address.tsx

@@ -99,7 +99,7 @@ function Address ({ address, className, children, genesisHash, name, actions }:
   </div>;
 }
 
-const AccountInfoRow = styled.div`
+export const AccountInfoRow = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -148,7 +148,7 @@ const Settings = styled.div`
     top: 25%;
     bottom: 25%;
     width: 1px;
-    background: ${({ theme }): string => theme.inputBorderColor};
+    background: ${({ theme }): string => theme.boxBorderColor};
   }
 
   &:hover {

packages/extension-ui/src/components/Identicon.tsx

@@ -29,12 +29,5 @@ export default styled(Identicon)`
 
   .container:before {
     box-shadow: none;
-    background: ${({ theme }): string => theme.identiconBackground};
-  }
-
-  svg {
-    circle:first-of-type {
-      display: none;
-    } 
   }
 `;

packages/extension-ui/src/components/Menu.tsx

@@ -23,9 +23,8 @@ export default styled(Menu)`
   padding: 16px 0;
   background: ${({ theme }): string => theme.highlightedAreaBackground};
   border-radius: 4px;
-  border: 1px solid #222222;
+  border: 1px solid ${({ theme }): string => theme.boxBorderColor};
   box-sizing: border-box;
   box-shadow: 0 0 32px rgba(0, 0, 0, 0.86);
-  backdrop-filter: blur(10px);
   z-index: 1;
 `;

packages/extension-ui/src/components/View.tsx

@@ -21,13 +21,14 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
 export default styled(View)`
   display: flex;
   flex-direction: column;
+  height: 100%;
   background: ${({ theme }): string => theme.background};
   color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   line-height: ${({ theme }): string => theme.lineHeight};
-  height: 100%;
-  
+  border: 1px solid ${({ theme }): string => theme.inputBorderColor};
+
   > * {
     padding-left: 24px;
     padding-right: 24px;

packages/extension-ui/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as Address } from './Address';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
 export { default as ButtonArea } from './ButtonArea';
+export { default as ButtonWithSubtitle } from './ButtonWithSubtitle';
 export { default as Checkbox } from './Checkbox';
 export { default as Dropdown } from './Dropdown';
 export { default as Fonts } from './Fonts';
@@ -29,7 +30,6 @@ export { default as Title } from './Title';
 export { default as VerticalSpace } from './VerticalSpace';
 export { default as View } from './View';
 export { default as Warning } from './Warning';
-export { default as ButtonWithSubtitle } from './ButtonWithSubtitle';
 
 export { Input, TextArea } from './TextInputs';
 

packages/extension-ui/src/components/themes.ts

@@ -3,8 +3,8 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 export const defaultTheme = {
-  background: 'rgba(13, 14, 19, 0.9)',
-  highlightedAreaBackground: 'rgba(13, 14, 19, 0.7)',
+  background: '#14151A',
+  highlightedAreaBackground: '#0B0C10',
   buttonBackground: 'linear-gradient(95.52deg, #FF8A00 0.14%, #FF7A00 100.14%)',
   buttonBackgroundDanger: '#D92A2A',
   buttonBackgroundDangerHover: '#D93B3B',
@@ -13,9 +13,10 @@ export const defaultTheme = {
   errorBorderColor: '#7E3530',
   errorColor: '#E42F2F',
   primaryColor: '#FF7D01',
-  inputBackground: 'rgba(13, 14, 19, 0.9)',
+  inputBackground: '#0B0C10',
   inputBorderColor: '#303030',
   readonlyInputBackground: '#000000',
+  boxBorderColor: '#222222',
   iconWarningColor: '#FF7D01',
   iconDangerColor: '#FF5858',
   iconNeutralColor: '#8E8E8E',