poanetwork
/
nifty-wallet
mirror of https://github.com/poanetwork/nifty-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Restyling of warnings

This commit is contained in:
vbaranov 2018-08-06 21:11:06 +03:00
parent cd2e66ffe1
commit 471df8cda0
21 changed files with 114 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/images/loading.svg
View File

@ -1,49 +1 @@
<svg class="lds-spinner" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect x="47" y="22.5" rx="4.7" ry="2.25" width="6" height="15" fill="#6729a8">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g></svg>
<svg width="150px" height="150px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background: none;"><circle cx="50" cy="50" r="29.6013" fill="none" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-width="{{config.width}}" stroke="#6630a5" stroke-width="3"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="2" keySplines="0 0.2 0.8 1" begin="-1s" repeatCount="indefinite"></animate><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="2" keySplines="0.2 0 0.8 1" begin="-1s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" r="8.10015" fill="none" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-width="{{config.width}}" stroke="#6630a5" stroke-width="3"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="2" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"></animate><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="2" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

4
app/images/warning.svg
View File

@ -1 +1,3 @@
<svg height="32" viewBox="0 0 33 32" width="33" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(-1 -1)"><path d="m20.1321134 3.85444772 12.4400695 22.74755558c.7949791 1.4536761.2609997 3.2765713-1.1926764 4.0715504-.4413776.2413784-.9363687.3678866-1.439437.3678866h-24.88013896c-1.65685425 0-3-1.3431457-3-3 0-.5030683.12650819-.9980594.36788658-1.439437l12.44006948-22.74755558c.7949791-1.4536761 2.6178743-1.98765551 4.0715504-1.19267639.503438.27531763.9173588.68923844 1.1926764 1.19267639z" stroke="#ff001f" stroke-width="2"/><g fill="#ff001f"><path d="m16 9h3v13h-3z"/><path d="m16 24h3v3h-3z"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12">
<path fill="#FF1345" fill-rule="evenodd" d="M13.877 10.689L7.735.418A.859.859 0 0 0 7 0a.859.859 0 0 0-.735.418L.123 10.689a.872.872 0 0 0-.012.871c.152.272.438.44.747.44h12.284a.857.857 0 0 0 .747-.44.872.872 0 0 0-.012-.871zM7.005 3.553c.352 0 .651.2.651.556 0 1.085-.127 2.645-.127 3.73 0 .283-.307.401-.524.401-.29 0-.534-.119-.534-.401 0-1.085-.127-2.645-.127-3.73 0-.356.29-.556.661-.556zm.009 6.721a.7.7 0 0 1-.697-.702c0-.383.299-.703.697-.703.37 0 .687.32.687.703 0 .373-.317.702-.687.702z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 660 B

After

Width:  |  Height:  |  Size: 577 B

5
old-ui/app/accounts/import/index.js
View File

@ -37,6 +37,8 @@ AccountImportSubview.prototype.render = function () {
h('div', {
style: {
width: '100%',
paddingLeft: '30px',
paddingRight: '30px',
},
}, [
h('.section-title.flex-row.flex-center', [
@ -55,14 +57,13 @@ AccountImportSubview.prototype.render = function () {
style: {
display: 'inline-block',
alignItems: 'center',
padding: '5px 30px 0px 30px',
},
}, [
h('span', 'Imported accounts will not be associated with your originally created Nifty Wallet account seedphrase.'),
]),
h('div', {
style: {
padding: '10px 30px',
padding: '10px 0',
},
}, [

4
old-ui/app/accounts/import/json.js
View File

@ -24,7 +24,7 @@ class JsonImportSubview extends Component {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '5px 30px 0px 30px',
padding: '5px 0px 0px 0px',
},
}, [
@ -39,7 +39,7 @@ class JsonImportSubview extends Component {
},
}),
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',

4
old-ui/app/accounts/import/private-key.js
View File

@ -26,12 +26,12 @@ PrivateKeyImportView.prototype.render = function () {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '5px 30px 0px 30px',
padding: '5px 0px 0px 0px',
},
}, [
h('span', 'Paste your private key string here'),
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
id: 'private-key-box',
onKeyPress: this.createKeyringOnEnter.bind(this),

14
old-ui/app/add-token.js
View File

@ -54,13 +54,17 @@ AddTokenScreen.prototype.render = function () {
h('h2.page-subtitle', 'Add Token'),
]),
h('.error', {
h('div', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
margin: '0 30px',
},
}, warning),
}, [
h('.error', {
style: {
display: warning ? 'block' : 'none',
},
}, warning),
]),
// conf view
h('.flex-column.flex-justify-center.flex-grow.select-none', [

8
old-ui/app/app.js
View File

@ -642,13 +642,7 @@ App.prototype.renderPrimary = function () {
},
}, 'QR Code'),
]),
h('div', {
style: {
position: 'absolute',
left: '44px',
width: '285px',
},
}, [
h('div', [
h(QrView, {key: 'qr'}),
]),
])

3
old-ui/app/components/account-export.js
View File

@ -56,7 +56,6 @@ ExportAccountView.prototype.render = function () {
color: '#333333',
marginBottom: '0px',
marginTop: '30px',
textAlign: 'center',
},
}, warning),
h('input#exportAccount.sizing-input', {
@ -116,7 +115,7 @@ ExportAccountView.prototype.render = function () {
},
}, 'Your private key'),
h('div.flex-row', [
h('p.error', {
h('p', {
style: {
paddingTop: '25px',
textOverflow: 'ellipsis',

24
old-ui/app/components/bn-as-decimal-input.js
View File

@ -95,19 +95,23 @@ BnAsDecimalInput.prototype.render = function () {
}, suffix),
]),
state.invalid ? h('span.error', {
state.invalid ? h('div', {
style: {
paddingLeft: '30px',
paddingRight: '30px',
background: 'rgba(255, 255, 255, 0.85)',
position: 'absolute',
right: '0px',
textAlign: 'right',
transform: 'translateY(26px)',
padding: '3px',
background: 'rgba(255,255,255,0.85)',
zIndex: '1',
textTransform: 'capitalize',
border: '2px solid #E20202',
top: '130px',
left: '0px',
},
}, state.invalid) : null,
}, [
h('div.error', {
style: {
transform: 'translateY(26px)',
zIndex: '1',
},
}, state.invalid),
]) : null,
])
)
}

42
old-ui/app/components/network.js
View File

@ -76,72 +76,44 @@ Network.prototype.render = function () {
switch (iconName) {
case 'ethereum-network':
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'Main Network'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'sokol-test-network':
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'Sokol Network'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'Ropsten Test Net'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'kovan-test-network':
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'Kovan Test Net'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'Rinkeby Test Net'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
case 'poa-network':
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'POA Network'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])
default:
return h('.network-indicator', [
h('.network-name', {
style: {
paddingLeft: '9px',
color: '#6729a8',
}},
h('.network-name',
'Private Network'),
props.onClick && h('i.fa.fa-caret-down.fa-lg'),
])

2
old-ui/app/components/notice.js
View File

@ -93,7 +93,7 @@ Notice.prototype.render = function () {
style: {
background: '#542289',
color: '#ffffff',
height: '310px',
height: '430px',
width: '90%',
overflowY: 'scroll',
scroll: 'auto',

7
old-ui/app/components/pending-tx.js
View File

@ -282,8 +282,9 @@ PendingTx.prototype.render = function () {
position: 'absolute',
top: '25px',
background: 'rgba(255, 255, 255, 0.85)',
border: '2px solid rgb(226, 2, 2)',
width: '100%',
paddingLeft: '30px',
paddingRight: '30px',
},
}, [
txMeta.simulationFails ?
@ -303,7 +304,7 @@ PendingTx.prototype.render = function () {
: null,
insufficientBalance ?
h('span.error', {
h('.error', {
style: {
fontSize: '12px',
},
@ -311,7 +312,7 @@ PendingTx.prototype.render = function () {
: null,
(dangerousGasLimit && !gasLimitSpecified) ?
h('span.error', {
h('.error', {
style: {
fontSize: '12px',
},

2
old-ui/app/components/qr-code.js
View File

@ -39,7 +39,6 @@ QrCodeView.prototype.render = function () {
alignItems: 'center',
},
}, [
Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
this.props.warning ? this.props.warning && h('span.error.flex-center', {
style: {
@ -59,6 +58,7 @@ QrCodeView.prototype.render = function () {
__html: qrImage.createTableTag(4),
},
}),
Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
h('.flex-row', [
h('h3.ellip-address', {
style: {

2
old-ui/app/components/tab-bar.js
View File

@ -26,7 +26,7 @@ TabBar.prototype.render = function () {
},
}, tabs.map((tab) => {
const { key, content } = tab
return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', {
return h(subview === key ? subview === 'history' ? '.activeForm.left' : '.activeForm.right' : '.inactiveForm.pointer', {
onClick: () => {
this.setState({ subview: key })
tabSelected(key)

14
old-ui/app/config.js
View File

@ -53,13 +53,17 @@ ConfigScreen.prototype.render = function () {
h('h2.page-subtitle', 'Settings'),
]),
h('.error', {
h('div', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
margin: '0 30px',
},
}, warning),
}, [
h('.error', {
style: {
display: warning ? 'block' : 'none',
},
}, warning),
]),
// conf view
h('.flex-column.flex-justify-center.flex-grow.select-none', [

24
old-ui/app/css/index.css
View File

@ -221,6 +221,8 @@ textarea.twelve-word-phrase {
width: 5.2em;
line-height: 9px;
text-rendering: geometricPrecision;
padding-left: 9px;
color: #6729a8;
}
.check {
@ -258,8 +260,18 @@ app sections
/* unlock */
.error {
color: #db60a4;
margin-bottom: 9px;
border: 1px solid #ff1345 !important;
color: #ff1345 !important;
font-size: 12px;
background: rgba(255,19,69, 0.1);
border-radius: 3px;
text-align: left;
padding: 10px 10px 10px 34px;
background-image: url('../images/warning.svg');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
}
.warning {
@ -751,6 +763,14 @@ input.large-input {
text-align: center;
}
.activeForm.left {
border-radius: 0px 8px 0px 0px;
}
.activeForm.right {
border-radius: 8px 0px 0px 0px;
}
.inactiveForm {
background: #60269c;
color: #ffffff;
@ -822,7 +842,7 @@ input.large-input {
.qr-header {
font-family: "Nunito SemiBold";
font-size: 16px;
margin-top: 30px;
margin-bottom: 30px;
}
.qr-message {

14
old-ui/app/first-time/init-menu.js
View File

@ -85,10 +85,17 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
]),
]),
h('span.in-progress-notification', state.warning),
state.warning ? h('div', {
style: {
width: '260px',
padding: '20px 0 0',
},
}, [
h('div.error', state.warning),
]) : null,
// password
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'New Password (min 8 chars)',
@ -101,7 +108,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
}),
// confirm password
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
id: 'password-box-confirm',
placeholder: 'Confirm Password',
@ -128,7 +135,6 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
style: {
fontSize: '0.8em',
color: '#8fdc97',
textDecoration: 'underline',
},
}, 'Import Existing DEN'),
]),

2
old-ui/app/keychains/hd/create-vault-complete.js
View File

@ -52,7 +52,7 @@ CreateVaultCompleteScreen.prototype.render = function () {
textAlign: 'center',
},
}, [
h('span.error', 'These 12 words are the only way to restore your Nifty Wallet accounts.\nSave them somewhere safe and secret.'),
h('div.error', 'These 12 words are the only way to restore your Nifty Wallet accounts.\nSave them somewhere safe and secret.'),
]),
h('textarea.twelve-word-phrase', {

6
old-ui/app/keychains/hd/recover-seed/confirmation.js
View File

@ -49,10 +49,10 @@ RevealSeedConfirmation.prototype.render = function () {
},
}, [
h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
h('.error', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
// confirmation
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'Enter your password to confirm',
@ -65,7 +65,7 @@ RevealSeedConfirmation.prototype.render = function () {
(props.warning) && (
h('span.error', {
style: {
margin: '20px',
margin: '20px 0',
},
}, props.warning.split('-'))
),

28
old-ui/app/keychains/hd/restore-vault.js
View File

@ -24,7 +24,12 @@ RestoreVaultScreen.prototype.render = function () {
return (
h('.initialize-screen.flex-column.flex-center.flex-grow', [
h('.initialize-screen.flex-column.flex-center.flex-grow', {
style: {
paddingLeft: '30px',
paddingRight: '30px',
},
}, [
h('h3.flex-center.section-title', {
style: {
@ -45,15 +50,14 @@ RestoreVaultScreen.prototype.render = function () {
style: {
width: '100%',
marginBottom: '20px',
marginLeft: '60px',
},
}, 'Wallet Seed'),
h('textarea.twelve-word-phrase.letter-spacey', {
h('textarea.twelve-word-phrase', {
placeholder: 'Enter your secret twelve word phrase here to restore your vault.',
}),
// password
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'New Password (min 8 chars)',
@ -61,14 +65,14 @@ RestoreVaultScreen.prototype.render = function () {
persistentFormId: 'password',
},
style: {
width: 300,
width: '100%',
marginTop: 20,
border: '1px solid #e2e2e2',
},
}),
// confirm password
h('input.large-input.letter-spacey', {
h('input.large-input', {
type: 'password',
id: 'password-box-confirm',
placeholder: 'Confirm Password',
@ -77,14 +81,21 @@ RestoreVaultScreen.prototype.render = function () {
persistentFormId: 'password-confirmation',
},
style: {
width: 300,
width: '100%',
marginTop: 20,
border: '1px solid #e2e2e2',
},
}),
(state.warning) && (
h('span.error.in-progress-notification', state.warning)
h('div', {
style: {
padding: '20px 0 0',
width: '100%',
},
}, [
h('div.error.in-progress-notification', state.warning),
])
),
// submit
@ -93,7 +104,6 @@ RestoreVaultScreen.prototype.render = function () {
style: {
marginTop: 20,
width: '100%',
marginRight: '60px',
},
}, [

2
old-ui/app/unlock.js
View File

@ -70,8 +70,6 @@ UnlockScreen.prototype.render = function () {
h('.error', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
},
}, warning),
]),