mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #3495 from alextsg/cb-290
Increase tap areas for menu buttons on mobile
This commit is contained in:
commit
c1387cdc54
@ -100,9 +100,10 @@ TxView.prototype.render = function () {
|
||||
|
||||
h('div.flex-row.phone-visible', {
|
||||
style: {
|
||||
margin: '1.5em 1.2em 0',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flex: '0 0 auto',
|
||||
margin: '10px',
|
||||
},
|
||||
}, [
|
||||
|
||||
@ -110,11 +111,10 @@ TxView.prototype.render = function () {
|
||||
style: {
|
||||
fontSize: '1.3em',
|
||||
cursor: 'pointer',
|
||||
padding: '10px',
|
||||
},
|
||||
onClick: () => {
|
||||
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
|
||||
},
|
||||
}, []),
|
||||
onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
|
||||
}),
|
||||
|
||||
h('.identicon-wrapper.select-none', {
|
||||
style: {
|
||||
|
@ -5,9 +5,6 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: .3em .9em 0;
|
||||
// height: 80vh;
|
||||
// max-height: 225px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
// wallet view and sidebar
|
||||
@ -314,3 +315,22 @@ $wallet-view-bg: $alabaster;
|
||||
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;
|
||||
}
|
||||
|
@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
|
||||
return h(Settings, {key: 'config'})
|
||||
default:
|
||||
log.debug('rendering locked screen')
|
||||
contents = {
|
||||
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',
|
||||
}
|
||||
return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
|
||||
}
|
||||
}
|
||||
|
||||
|
129
ui/app/unlock.js
129
ui/app/unlock.js
@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () {
|
||||
const state = this.props
|
||||
const warning = state.warning
|
||||
return (
|
||||
h('.flex-column', {
|
||||
style: {
|
||||
width: 'inherit',
|
||||
},
|
||||
}, [
|
||||
h('.unlock-screen.flex-column.flex-center.flex-grow', [
|
||||
h('.unlock-screen', [
|
||||
|
||||
h(Mascot, {
|
||||
animationEventEmitter: this.animationEventEmitter,
|
||||
}),
|
||||
h(Mascot, {
|
||||
animationEventEmitter: this.animationEventEmitter,
|
||||
}),
|
||||
|
||||
h('h1', {
|
||||
style: {
|
||||
fontSize: '1.4em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#7F8082',
|
||||
},
|
||||
}, 'MetaMask'),
|
||||
h('h1', {
|
||||
style: {
|
||||
fontSize: '1.4em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#7F8082',
|
||||
},
|
||||
}, 'MetaMask'),
|
||||
|
||||
h('input.large-input', {
|
||||
type: 'password',
|
||||
id: 'password-box',
|
||||
placeholder: 'enter password',
|
||||
style: {
|
||||
background: 'white',
|
||||
},
|
||||
onKeyPress: this.onKeyPress.bind(this),
|
||||
onInput: this.inputChanged.bind(this),
|
||||
}),
|
||||
h('input.large-input', {
|
||||
type: 'password',
|
||||
id: 'password-box',
|
||||
placeholder: 'enter password',
|
||||
style: {
|
||||
background: 'white',
|
||||
},
|
||||
onKeyPress: this.onKeyPress.bind(this),
|
||||
onInput: this.inputChanged.bind(this),
|
||||
}),
|
||||
|
||||
h('.error', {
|
||||
style: {
|
||||
display: warning ? 'block' : 'none',
|
||||
padding: '0 20px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, warning),
|
||||
h('.error', {
|
||||
style: {
|
||||
display: warning ? 'block' : 'none',
|
||||
padding: '0 20px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, warning),
|
||||
|
||||
h('button.primary.cursor-pointer', {
|
||||
onClick: this.onSubmit.bind(this),
|
||||
style: {
|
||||
margin: 10,
|
||||
},
|
||||
}, 'Log In'),
|
||||
]),
|
||||
h('button.primary.cursor-pointer', {
|
||||
onClick: this.onSubmit.bind(this),
|
||||
style: {
|
||||
margin: 10,
|
||||
},
|
||||
}, 'Log In'),
|
||||
|
||||
h('.flex-row.flex-center.flex-grow', [
|
||||
h('p.pointer', {
|
||||
onClick: () => {
|
||||
this.props.dispatch(actions.markPasswordForgotten())
|
||||
if (environmentType() === 'popup') {
|
||||
global.platform.openExtensionInBrowser()
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '0.8em',
|
||||
color: 'rgb(247, 134, 28)',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}, '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.markPasswordForgotten())
|
||||
if (environmentType() === 'popup') {
|
||||
global.platform.openExtensionInBrowser()
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '0.8em',
|
||||
color: 'rgb(247, 134, 28)',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}, 'Restore from seed phrase'),
|
||||
|
||||
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'),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user