neptune/ghost-keychain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Small styling updates (#22)

Browse Source
This commit is contained in:
Jaco Greeff 2019-05-23 16:51:56 +02:00 committed by GitHub
parent ebe20c3e23
commit 4566d2cc4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/extension-ui/src/Popup/Authorize/Request.tsx
View File

@ -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'

11
packages/extension-ui/src/Popup/Create.tsx
View File

@ -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>

15
packages/extension-ui/src/Popup/Forget.tsx
View File

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

11
packages/extension-ui/src/Popup/Import.tsx
View File

@ -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>
);

8
packages/extension-ui/src/Popup/Signing/Unlock.tsx
View File

@ -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;
`;

18
packages/extension-ui/src/components/Address.tsx
View File

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

6
packages/extension-ui/src/components/Button.tsx
View File

@ -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

2
packages/extension-ui/src/components/Label.tsx
View File

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

2
packages/extension-ui/src/components/Tip.tsx
View File

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

16
packages/extension-ui/src/components/defaults.ts
View File

@ -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,

2
packages/extension/public/popup.html
View File

@ -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>