From aaf2adbaa8f45e40742a700915055acffba9ecc9 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 21 May 2019 13:47:43 +0200
Subject: [PATCH] Adjust some styling (#12)

* Adjust some tyling

* Add danger button color

* Make a's focussable

* Tiny icon peeking move
---
 .../src/Popup/Accounts/Account.tsx            |  2 +-
 packages/extension-ui/src/Popup/Forget.tsx    |  3 +-
 .../src/Popup/Signing/Request.tsx             |  2 +-
 .../extension-ui/src/components/Address.tsx   | 53 ++++++++++---------
 .../extension-ui/src/components/Button.tsx    | 13 ++++-
 .../extension-ui/src/components/defaults.ts   | 10 ++--
 6 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index cff64446..48cc8c91 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/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>
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 0469f0ea..108c6a3d 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/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}
             />
diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx
index 6d6503c8..73687a50 100644
--- a/packages/extension-ui/src/Popup/Signing/Request.tsx
+++ b/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}
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index b1eb02d3..26c1b35f 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/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;
+  }
 `;
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index 494b5fd1..455fa24a 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/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};
diff --git a/packages/extension-ui/src/components/defaults.ts b/packages/extension-ui/src/components/defaults.ts
index 936717f5..7e370ccf 100644
--- a/packages/extension-ui/src/components/defaults.ts
+++ b/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: {