m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Merge pull request #3495 from alextsg/cb-290

Browse Source 
Increase tap areas for menu buttons on mobile
This commit is contained in:
kumavis 2018-03-13 10:42:59 -07:00 committed by GitHub
commit c1387cdc54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/app/components/tx-view.js
View File

@ -100,9 +100,10 @@ TxView.prototype.render = function () {
h('div.flex-row.phone-visible', { h('div.flex-row.phone-visible', {
style: { style: {
margin: '1.5em 1.2em 0',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
flex: '0 0 auto',
margin: '10px',
}, },
}, [ }, [
@ -110,11 +111,10 @@ TxView.prototype.render = function () {
style: { style: {
fontSize: '1.3em', fontSize: '1.3em',
cursor: 'pointer', cursor: 'pointer',
padding: '10px',
}, },
onClick: () => { onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() }),
},
}, []),
h('.identicon-wrapper.select-none', { h('.identicon-wrapper.select-none', {
style: { style: {

3
ui/app/css/itcss/components/hero-balance.scss
View File

@ -5,9 +5,6 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: .3em .9em 0;
// height: 80vh;
// max-height: 225px;
flex: 0 0 auto; flex: 0 0 auto;
} }

22
ui/app/css/itcss/components/newui-sections.scss
View File

@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px;
} }
// wallet view and sidebar // wallet view and sidebar
@ -313,4 +314,23 @@ $wallet-view-bg: $alabaster;
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
width: 62vw; width: 62vw;
} }
} }
.unlock-screen-container {
z-index: $main-container-z-index;
font-family: Roboto;
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
background: #f7f7f7;
width: 100%;
}
.unlock-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 auto;
}

14
ui/app/main-container.js
View File

@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
return h(Settings, {key: 'config'}) return h(Settings, {key: 'config'})
default: default:
log.debug('rendering locked screen') log.debug('rendering locked screen')
contents = { return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
component: UnlockScreen,
style: {
boxShadow: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#F7F7F7',
// must force 100%, because lock screen is full-width
width: '100%',
},
key: 'locked',
}
} }
} }

129
ui/app/unlock.js
View File

@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () {
const state = this.props const state = this.props
const warning = state.warning const warning = state.warning
return ( return (
h('.flex-column', { h('.unlock-screen', [
style: {
width: 'inherit',
},
}, [
h('.unlock-screen.flex-column.flex-center.flex-grow', [
h(Mascot, { h(Mascot, {
animationEventEmitter: this.animationEventEmitter, animationEventEmitter: this.animationEventEmitter,
}), }),
h('h1', { h('h1', {
style: { style: {
fontSize: '1.4em', fontSize: '1.4em',
textTransform: 'uppercase', textTransform: 'uppercase',
color: '#7F8082', color: '#7F8082',
}, },
}, 'MetaMask'), }, 'MetaMask'),
h('input.large-input', { h('input.large-input', {
type: 'password', type: 'password',
id: 'password-box', id: 'password-box',
placeholder: 'enter password', placeholder: 'enter password',
style: { style: {
background: 'white', background: 'white',
}, },
onKeyPress: this.onKeyPress.bind(this), onKeyPress: this.onKeyPress.bind(this),
onInput: this.inputChanged.bind(this), onInput: this.inputChanged.bind(this),
}), }),
h('.error', { h('.error', {
style: { style: {
display: warning ? 'block' : 'none', display: warning ? 'block' : 'none',
padding: '0 20px', padding: '0 20px',
textAlign: 'center', textAlign: 'center',
}, },
}, warning), }, warning),
h('button.primary.cursor-pointer', { h('button.primary.cursor-pointer', {
onClick: this.onSubmit.bind(this), onClick: this.onSubmit.bind(this),
style: { style: {
margin: 10, margin: 10,
}, },
}, 'Log In'), }, 'Log In'),
]),
h('.flex-row.flex-center.flex-grow', [ h('p.pointer', {
h('p.pointer', { onClick: () => {
onClick: () => { this.props.dispatch(actions.markPasswordForgotten())
this.props.dispatch(actions.markPasswordForgotten()) if (environmentType() === 'popup') {
if (environmentType() === 'popup') { global.platform.openExtensionInBrowser()
global.platform.openExtensionInBrowser() }
} },
}, style: {
style: { fontSize: '0.8em',
fontSize: '0.8em', color: 'rgb(247, 134, 28)',
color: 'rgb(247, 134, 28)', textDecoration: 'underline',
textDecoration: 'underline', },
}, }, 'Restore from seed phrase'),
}, 'Restore from seed phrase'),
]),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
]),
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
]) ])
) )
} }