From 4566d2cc4ea6c2ac64320ef8c72fa9fd4be427eb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 23 May 2019 16:51:56 +0200
Subject: [PATCH] Small styling updates (#22)

---
 .../src/Popup/Authorize/Request.tsx            |  5 +++--
 packages/extension-ui/src/Popup/Create.tsx     | 11 +++++------
 packages/extension-ui/src/Popup/Forget.tsx     | 15 ++++++++-------
 packages/extension-ui/src/Popup/Import.tsx     | 11 +++++------
 .../extension-ui/src/Popup/Signing/Unlock.tsx  |  8 +-------
 .../extension-ui/src/components/Address.tsx    | 18 +++++++++++++-----
 .../extension-ui/src/components/Button.tsx     |  6 +++++-
 packages/extension-ui/src/components/Label.tsx |  2 +-
 packages/extension-ui/src/components/Tip.tsx   |  2 +-
 .../extension-ui/src/components/defaults.ts    | 16 ++++++++--------
 packages/extension/public/popup.html           |  2 +-
 11 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 17e25067..a0645e5a 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -8,7 +8,7 @@ import { OnActionFromCtx } from '../../components/types';
 import React from 'react';
 import styled from 'styled-components';
 
-import { ActionBar, Box, Button, Link, defaults, withOnAction } from '../../components';
+import { ActionBar, Box, Button, Link, Tip, defaults, withOnAction } from '../../components';
 import { approveAuthRequest, rejectAuthRequest } from '../../messaging';
 
 type Props = {
@@ -33,10 +33,11 @@ function Request ({ authId, className, isFirst, onAction, request: { origin }, u
 
   return (
     <Box className={className}>
-      <div>The application, identified as <div className='tab-name'>{origin}</div> is requesting access from <div className='tab-url'>{url}</div> to the accounts and signing capabilities of this extension. Only approve the request if you trust the application.</div>
+      <div>An application, identified as <div className='tab-name'>{origin}</div> is requesting access from <div className='tab-url'>{url}</div>.</div>
       <ActionBar>
         <Link isDanger onClick={onReject}>Reject</Link>
       </ActionBar>
+      <Tip header='access' type='warn'>Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.</Tip>
       {isFirst && (
         <Button
           label='Yes, allow this application access'
diff --git a/packages/extension-ui/src/Popup/Create.tsx b/packages/extension-ui/src/Popup/Create.tsx
index d7588585..29ae8c6d 100644
--- a/packages/extension-ui/src/Popup/Create.tsx
+++ b/packages/extension-ui/src/Popup/Create.tsx
@@ -52,16 +52,15 @@ function Create ({ onAction }: Props) {
           />
           {name && <Password onChange={setPassword} />}
           {name && password && (
-            <>
-              <Address
-                address={account.address}
-                name={name}
-              />
+            <Address
+              address={account.address}
+              name={name}
+            >
               <Button
                 label='Add the account with the generated seed'
                 onClick={onCreate}
               />
-            </>
+            </Address>
           )}
         </>
       )}</Loading>
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 08a59232..ad605bd1 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -26,13 +26,14 @@ function Forget ({ match: { params: { address } }, onAction }: Props) {
     <div>
       <Header label='forget account' />
       <Back />
-      <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}
-      />
+      <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}
+        />
+      </Address>
     </div>
   );
 }
diff --git a/packages/extension-ui/src/Popup/Import.tsx b/packages/extension-ui/src/Popup/Import.tsx
index 25b019d2..61682429 100644
--- a/packages/extension-ui/src/Popup/Import.tsx
+++ b/packages/extension-ui/src/Popup/Import.tsx
@@ -52,16 +52,15 @@ function Import ({ onAction }: Props) {
       {account && <Name onChange={setName} />}
       {account && name && <Password onChange={setPassword} />}
       {account && name && password && (
-        <>
-          <Address
-            address={account.address}
-            name={name}
-          />
+        <Address
+          address={account.address}
+          name={name}
+        >
           <Button
             label='Add the account with the supplied seed'
             onClick={onCreate}
           />
-        </>
+        </Address>
       )}
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/Signing/Unlock.tsx b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
index bc3e7adb..ef74de5d 100644
--- a/packages/extension-ui/src/Popup/Signing/Unlock.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
 
 import { Button, Input } from '../../components';
 
@@ -12,7 +11,7 @@ type Props = {
   onSign: (password: string) => Promise<void>
 };
 
-function Unlock ({ className, onSign }: Props) {
+export default function Unlock ({ className, onSign }: Props) {
   const [error, setError] = useState('');
   const [password, setPassword] = useState('');
 
@@ -45,8 +44,3 @@ function Unlock ({ className, onSign }: Props) {
     </div>
   );
 }
-
-export default styled(Unlock)`
-  margin-bottom: -0.75rem;
-  margin-left: -3rem;
-`;
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 820a0f10..88754c2b 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -32,7 +32,9 @@ function Address ({ accounts, address, children, className, isHidden, name, them
   return (
     <div className={className}>
       <Box className='details'>
-        <div className='name'>{name || (account && account.meta.name) || '<unknown>'}</div>
+        <div className='name'>
+          <div className='content'>{name || (account && account.meta.name) || '<unknown>'}</div>
+        </div>
         <div className='address'>{address || '<unknown>'}</div>
         <div className='children'>{children}</div>
       </Box>
@@ -56,7 +58,11 @@ export default withAccounts(styled(Address)`
 
   .details {
     margin: 0;
-    padding-left: 4rem;
+
+    .address,
+    .name {
+      padding-left: 3rem;
+    }
 
     .address {
       opacity: 0.5;
@@ -65,10 +71,12 @@ export default withAccounts(styled(Address)`
     }
 
     .name {
-      padding: 0 0 0.5rem 0;
+      .content {
+        padding: 0 0 0.5rem 0;
 
-      input {
-        margin: -0.5rem 0;
+        input {
+          margin: -0.5rem 0;
+        }
       }
     }
   }
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index ff3c701d..979d2f48 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -58,7 +58,11 @@ export default styled(Button)`
   };
 
   button {
-    background: ${defaults.btnBg};
+    background: ${({ isDanger }) =>
+      isDanger
+        ? defaults.btnBgDanger
+        : defaults.btnBg
+    };
     border: ${defaults.btnBorder}${({ isDanger }) =>
       isDanger
         ? defaults.btnColorDanger
diff --git a/packages/extension-ui/src/components/Label.tsx b/packages/extension-ui/src/components/Label.tsx
index a6fa5ec1..bad1e5ee 100644
--- a/packages/extension-ui/src/components/Label.tsx
+++ b/packages/extension-ui/src/components/Label.tsx
@@ -24,7 +24,7 @@ function Label ({ children, className, label }: Props) {
 
 export default styled(Label)`
   box-sizing: border-box;
-  color: ${defaults.colorLabel};
+  color: ${defaults.labelColor};
   display: block;
   font-family: ${defaults.fontFamily};
   font-size: ${defaults.fontSize};
diff --git a/packages/extension-ui/src/components/Tip.tsx b/packages/extension-ui/src/components/Tip.tsx
index 8e0f9144..72db6472 100644
--- a/packages/extension-ui/src/components/Tip.tsx
+++ b/packages/extension-ui/src/components/Tip.tsx
@@ -35,6 +35,7 @@ function Tip ({ children, className, header }: Props) {
   );
 }
 
+// box-shadow: ${defaults.boxShadow};
 export default styled(Tip)`
   background: ${(props) =>
     getColor(props).background
@@ -42,7 +43,6 @@ export default styled(Tip)`
   border-left: 0.25rem solid ${(props) =>
     getColor(props).border
   };
-  box-shadow: ${defaults.boxShadow};
   color: ${(props) =>
     getColor(props).color
   };
diff --git a/packages/extension-ui/src/components/defaults.ts b/packages/extension-ui/src/components/defaults.ts
index 2e7e9cf2..ba3d7a53 100644
--- a/packages/extension-ui/src/components/defaults.ts
+++ b/packages/extension-ui/src/components/defaults.ts
@@ -3,29 +3,29 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 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 `,
-  btnColor: LINK_COLOR,
-  btnColorDanger: DANGER_COLOR,
+  btnBg: LINK_COLOR,
+  btnBgDanger: DANGER_COLOR,
+  btnBorder: `0px solid `,
+  btnColor: '#fff',
+  btnColorDanger: '#fff',
   btnPadding: '0.75rem 1rem',
-  boxBorder: '0.25rem solid #e2e1e0',
+  boxBorder: 'none', // '0.25rem solid #e2e1e0',
   boxMargin: '0.75rem 0',
   boxPadding: '0 0.25rem',
-  boxShadow: 'none', // '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   color: TEXT_COLOR,
-  colorLabel: LABEL_COLOR,
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   fontSize: '1rem',
   hdrBg: '#e2e1e0',
   hdrColor: '#878786',
   inputBorder: '#ccc',
   inputPadding: '0.5rem 0.75rem',
+  labelColor: '878786',
   lineHeight: '1.25',
   linkColor: LINK_COLOR,
   linkColorDanger: DANGER_COLOR,
diff --git a/packages/extension/public/popup.html b/packages/extension/public/popup.html
index 11ba9400..43c78b03 100644
--- a/packages/extension/public/popup.html
+++ b/packages/extension/public/popup.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>polkadot{.js}</title>
   </head>
-  <body style="background:white; box-sizing:border-box; height:580px; margin:0; padding:0 0.75rem; width:480px;">
+  <body style="background:#e2e1e0; box-sizing:border-box; height:580px; margin:0; padding:0 0.75rem; width:480px;">
     <div id="root"></div>
     <script src='./popup.js'></script>
   </body>