Adjust some styling (#12)

* Adjust some tyling

* Add danger button color

* Make a's focussable

* Tiny icon peeking move

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

@@ -55,7 +55,7 @@ export default function Account ({ address, className }: Props) {
             }
           >
             <ActionBar>
-              <a onClick={toggleEdit}>Edit</a>
+              <a href='#' onClick={toggleEdit}>Edit</a>
               <Link to={`/account/forget/${address}`}>Forget</Link>
             </ActionBar>
           </Address>

packages/extension-ui/src/Popup/Forget.tsx

@@ -28,9 +28,10 @@ function Forget (props: Props) {
           <div>
             <Header label='forget account' />
             <Back />
-            <Tip header='danger' type='error'>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.</Tip>
             <Address address={address} />
+            <Tip header='danger' type='error'>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.</Tip>
             <Button
+              isDanger
               label='I want to forget this account'
               onClick={onClick}
             />

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -38,7 +38,7 @@ export default function Request ({ isFirst, request: { address, method, nonce },
               url={url}
             />
             <ActionBar>
-              <a onClick={onCancel}>Cancel</a>
+              <a href='#' onClick={onCancel}>Cancel</a>
             </ActionBar>
             <Unlock
               isVisible={isFirst}

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

@@ -30,19 +30,19 @@ function Address ({ address, children, className, isHidden, name, theme = 'polka
         const account = accounts.find((account) => account.address === address);
 
         return (
-          <Box className={className}>
-            <div>
+          <div className={className}>
+            <Box className='details'>
               <div className='name'>{name || (account && account.meta.name) || '<unknown>'}</div>
               <div className='address'>{address || '<unknown>'}</div>
               <div className='children'>{children}</div>
-              <Identicon
-                className='icon'
-                size={64}
-                theme={theme}
-                value={address}
-              />
-            </div>
-          </Box>
+            </Box>
+            <Identicon
+              className='icon'
+              size={64}
+              theme={theme}
+              value={address}
+            />
+          </div>
         );
       }}
     </AccountContext.Consumer>
@@ -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;
+  }
 `;

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};

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: {