aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/account-detail.js2
-rw-r--r--ui/app/app.js46
-rw-r--r--ui/app/components/account-dropdowns.js90
-rw-r--r--ui/app/components/account-export.js2
-rw-r--r--ui/app/components/dropdown.js14
-rw-r--r--ui/app/components/menu-droppo.js130
-rw-r--r--ui/app/components/notice.js6
-rw-r--r--ui/app/components/tx-view.js1
-rw-r--r--ui/app/css/itcss/components/network.scss1
-rw-r--r--ui/app/css/itcss/components/sections.scss20
-rw-r--r--ui/app/css/itcss/tools/utilities.scss8
-rw-r--r--ui/app/css/itcss/trumps/index.scss35
-rw-r--r--ui/app/main-container.js1
-rw-r--r--ui/app/unlock.js6
14 files changed, 302 insertions, 60 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 24561c32e..22a883096 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -128,6 +128,7 @@ AccountDetailScreen.prototype.render = function () {
selected,
network,
identities: props.identities,
+ enableAccountOptions: true,
},
),
]
@@ -152,7 +153,6 @@ AccountDetailScreen.prototype.render = function () {
fontSize: '13px',
fontFamily: 'Montserrat Light',
textRendering: 'geometricPrecision',
- marginTop: '10px',
marginBottom: '15px',
color: '#AEAEAE',
},
diff --git a/ui/app/app.js b/ui/app/app.js
index 339e13fd7..660a68230 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -18,7 +18,6 @@ const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
// slideout menu
const WalletView = require('./components/wallet-view')
-const SlideoutMenu = require('react-burger-menu').slide
// other views
const ConfigScreen = require('./config')
@@ -36,6 +35,7 @@ const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
module.exports = connect(mapStateToProps, mapDispatchToProps)(App)
@@ -43,6 +43,13 @@ inherits(App, Component)
function App () { Component.call(this) }
function mapStateToProps (state) {
+ const {
+ identities,
+ accounts,
+ address,
+ } = state.metamask
+ const selected = address || Object.keys(accounts)[0]
+
return {
// state from plugin
sidebarOpen: state.appState.sidebarOpen,
@@ -64,6 +71,10 @@ function mapStateToProps (state) {
lastUnreadNotice: state.metamask.lastUnreadNotice,
lostAccounts: state.metamask.lostAccounts,
frequentRpcList: state.metamask.frequentRpcList || [],
+
+ // state needed to get account dropdown temporarily rendering from app bar
+ identities,
+ selected,
}
}
@@ -233,6 +244,7 @@ App.prototype.renderNetworkDropdown = function () {
const isOpen = state.isNetworkMenuOpen
return h(Dropdown, {
+ useCssTransition: true,
isOpen,
onClickOutside: (event) => {
const { classList } = event.target
@@ -240,7 +252,7 @@ App.prototype.renderNetworkDropdown = function () {
classList.contains('menu-icon'),
classList.contains('network-name'),
classList.contains('network-indicator'),
- ].filter(bool => bool).length === 0;
+ ].filter(bool => bool).length === 0
// classes from three constituent nodes of the toggle element
if (isNotToggleElement) {
@@ -264,6 +276,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'main',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.diamond'),
@@ -278,6 +293,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'ropsten',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('ropsten')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.red-dot'),
@@ -292,6 +310,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'kovan',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('kovan')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.hollow-diamond'),
@@ -306,6 +327,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'rinkeby',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.golden-square'),
@@ -320,6 +344,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'default',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -336,6 +363,9 @@ App.prototype.renderNetworkDropdown = function () {
{
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => this.props.dispatch(actions.showConfigPage()),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -352,12 +382,17 @@ App.prototype.renderDropdown = function () {
const isOpen = state.isMainMenuOpen
return h(Dropdown, {
+ useCssTransition: true,
isOpen: isOpen,
zIndex: 11,
onClickOutside: (event) => {
- const { classList } = event.target
- const isNotToggleElement = !classList.contains('sandwich-expando')
- if (isNotToggleElement) {
+ const classList = event.target.classList
+ const parentClassList = event.target.parentElement.classList
+
+ const isToggleElement = classList.contains('sandwich-expando') ||
+ parentClassList.contains('sandwich-expando')
+
+ if (isOpen && !isToggleElement) {
this.setState({ isMainMenuOpen: false })
}
},
@@ -610,7 +645,6 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
return null
} else {
-
return h(
DropdownMenuItem,
{
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 2813f4752..b23600e9b 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -17,14 +17,14 @@ class AccountDropdowns extends Component {
accountSelectorActive: false,
optionsMenuActive: false,
}
- this.accountSelectorToggleClassName = 'fa-angle-down';
- this.optionsMenuToggleClassName = 'fa-ellipsis-h';
+ this.accountSelectorToggleClassName = 'accounts-selector'
+ this.optionsMenuToggleClassName = 'fa-ellipsis-h'
}
renderAccounts () {
const { identities, selected } = this.props
- return Object.keys(identities).map((key) => {
+ return Object.keys(identities).map((key, index) => {
const identity = identities[key]
const isSelected = identity.address === selected
@@ -35,17 +35,24 @@ class AccountDropdowns extends Component {
onClick: () => {
this.props.actions.showAccountDetail(identity.address)
},
+ style: {
+ marginTop: index === 0 ? '5px' : '',
+ fontSize: '24px',
+ },
},
[
h(
Identicon,
{
address: identity.address,
- diameter: 16,
+ diameter: 32,
+ style: {
+ marginLeft: '10px',
+ },
},
),
- h('span', { style: { marginLeft: '10px' } }, identity.name || ''),
- h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null),
+ h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''),
+ h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
]
)
})
@@ -58,11 +65,17 @@ class AccountDropdowns extends Component {
return h(
Dropdown,
{
+ useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
style: {
- marginLeft: '-125px',
+ marginLeft: '-238px',
+ marginTop: '38px',
minWidth: '180px',
overflowY: 'auto',
maxHeight: '300px',
+ width: '300px',
+ },
+ innerStyle: {
+ padding: '8px 25px',
},
isOpen: accountSelectorActive,
onClickOutside: (event) => {
@@ -85,10 +98,13 @@ class AccountDropdowns extends Component {
h(
Identicon,
{
- diameter: 16,
+ style: {
+ marginLeft: '10px',
+ },
+ diameter: 32,
},
),
- h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
+ h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
],
),
h(
@@ -101,10 +117,19 @@ class AccountDropdowns extends Component {
h(
Identicon,
{
- diameter: 16,
+ style: {
+ marginLeft: '10px',
+ },
+ diameter: 32,
},
),
- h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
+ h('span', {
+ style: {
+ marginLeft: '20px',
+ fontSize: '24px',
+ marginBottom: '5px',
+ },
+ }, 'Import Account'),
]
),
]
@@ -119,7 +144,7 @@ class AccountDropdowns extends Component {
Dropdown,
{
style: {
- marginLeft: '-162px',
+ marginLeft: '-215px',
minWidth: '180px',
},
isOpen: optionsMenuActive,
@@ -149,6 +174,18 @@ class AccountDropdowns extends Component {
{
closeMenu: () => {},
onClick: () => {
+ const { selected, identities } = this.props
+ var identity = identities[selected]
+ actions.showQrView(selected, identity ? identity.name : '')
+ },
+ },
+ 'Show QR Code',
+ ),
+ h(
+ DropdownMenuItem,
+ {
+ closeMenu: () => {},
+ onClick: () => {
const { selected } = this.props
const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
copyToClipboard(checkSumAddress)
@@ -171,7 +208,7 @@ class AccountDropdowns extends Component {
}
render () {
- const { style } = this.props
+ const { style, enableAccountsSelector, enableAccountOptions } = this.props
const { optionsMenuActive, accountSelectorActive } = this.state
return h(
@@ -180,10 +217,18 @@ class AccountDropdowns extends Component {
style: style,
},
[
- h(
- 'i.fa.fa-angle-down',
+ enableAccountsSelector && h(
+ // 'i.fa.fa-angle-down',
+ 'div.cursor-pointer.color-orange.accounts-selector',
{
- style: {},
+ style: {
+ // fontSize: '1.8em',
+ background: 'url(images/switch_acc.svg) white center center no-repeat',
+ height: '25px',
+ width: '25px',
+ transform: 'scale(0.75)',
+ marginRight: '3px',
+ },
onClick: (event) => {
event.stopPropagation()
this.setState({
@@ -194,10 +239,13 @@ class AccountDropdowns extends Component {
},
this.renderAccountSelector(),
),
- h(
+ enableAccountOptions && h(
'i.fa.fa-ellipsis-h',
{
- style: { 'marginLeft': '10px'},
+ style: {
+ marginRight: '0.5em',
+ fontSize: '1.8em',
+ },
onClick: (event) => {
event.stopPropagation()
this.setState({
@@ -213,6 +261,11 @@ class AccountDropdowns extends Component {
}
}
+AccountDropdowns.defaultProps = {
+ enableAccountsSelector: false,
+ enableAccountOptions: false,
+}
+
AccountDropdowns.propTypes = {
identities: PropTypes.objectOf(PropTypes.object),
selected: PropTypes.string,
@@ -226,6 +279,7 @@ const mapDispatchToProps = (dispatch) => {
showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
addNewAccount: () => dispatch(actions.addNewAccount()),
showImportPage: () => dispatch(actions.showImportPage()),
+ showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
},
}
}
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 394d878f7..330f73805 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -100,7 +100,7 @@ ExportAccountView.prototype.render = function () {
textOverflow: 'ellipsis',
overflow: 'hidden',
webkitUserSelect: 'text',
- width: '100%',
+ maxWidth: '275px',
},
onClick: function (event) {
copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 759800fd6..34c7149ee 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -1,14 +1,14 @@
const Component = require('react').Component
const PropTypes = require('react').PropTypes
const h = require('react-hyperscript')
-const MenuDroppo = require('menu-droppo')
+const MenuDroppo = require('./menu-droppo')
const extend = require('xtend')
const noop = () => {}
class Dropdown extends Component {
render () {
- const { isOpen, onClickOutside, style, innerStyle, children } = this.props
+ const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
const innerStyleDefaults = extend({
borderRadius: '4px',
@@ -20,6 +20,7 @@ class Dropdown extends Component {
return h(
MenuDroppo,
{
+ useCssTransition,
isOpen,
zIndex: 11,
onClickOutside,
@@ -43,6 +44,7 @@ class Dropdown extends Component {
Dropdown.defaultProps = {
isOpen: false,
onClick: noop,
+ useCssTransition: false,
}
Dropdown.propTypes = {
@@ -54,7 +56,7 @@ Dropdown.propTypes = {
class DropdownMenuItem extends Component {
render () {
- const { onClick, closeMenu, children } = this.props
+ const { onClick, closeMenu, children, style } = this.props
return h(
'li.dropdown-menu-item',
@@ -63,17 +65,17 @@ class DropdownMenuItem extends Component {
onClick()
closeMenu()
},
- style: {
+ style: Object.assign({
listStyle: 'none',
padding: '8px 0px 8px 0px',
- fontSize: '12px',
+ fontSize: '18px',
fontStyle: 'normal',
fontFamily: 'Montserrat Regular',
cursor: 'pointer',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
- },
+ }, style),
},
children
)
diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js
new file mode 100644
index 000000000..66ab18954
--- /dev/null
+++ b/ui/app/components/menu-droppo.js
@@ -0,0 +1,130 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+module.exports = MenuDroppoComponent
+
+
+inherits(MenuDroppoComponent, Component)
+function MenuDroppoComponent () {
+ Component.call(this)
+}
+
+MenuDroppoComponent.prototype.render = function () {
+ const speed = this.props.speed || '300ms'
+ const useCssTransition = this.props.useCssTransition
+ const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+
+ this.manageListeners()
+
+ let style = this.props.style || {}
+ if (!('position' in style)) {
+ style.position = 'fixed'
+ }
+ style.zIndex = zIndex
+
+ return (
+ h('.menu-droppo-container', {
+ style,
+ }, [
+ h('style', `
+ .menu-droppo-enter {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(-200%);
+ }
+
+ .menu-droppo-enter.menu-droppo-enter-active {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(0%);
+ }
+
+ .menu-droppo-leave {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(0%);
+ }
+
+ .menu-droppo-leave.menu-droppo-leave-active {
+ transition: transform ${speed} ease-in-out;
+ transform: translateY(-200%);
+ }
+ `),
+
+ useCssTransition
+ ? h(ReactCSSTransitionGroup, {
+ className: 'css-transition-group',
+ transitionName: 'menu-droppo',
+ transitionEnterTimeout: parseInt(speed),
+ transitionLeaveTimeout: parseInt(speed),
+ }, this.renderPrimary())
+ : this.renderPrimary(),
+ ])
+ )
+}
+
+MenuDroppoComponent.prototype.renderPrimary = function () {
+ const isOpen = this.props.isOpen
+ if (!isOpen) {
+ return null
+ }
+
+ const innerStyle = this.props.innerStyle || {}
+
+ return (
+ h('.menu-droppo', {
+ key: 'menu-droppo-drawer',
+ style: innerStyle,
+ },
+ [ this.props.children ])
+ )
+}
+
+MenuDroppoComponent.prototype.manageListeners = function () {
+ const isOpen = this.props.isOpen
+ const onClickOutside = this.props.onClickOutside
+
+ if (isOpen) {
+ this.outsideClickHandler = onClickOutside
+ } else if (isOpen) {
+ this.outsideClickHandler = null
+ }
+}
+
+MenuDroppoComponent.prototype.componentDidMount = function () {
+ if (this && document.body) {
+ this.globalClickHandler = this.globalClickOccurred.bind(this)
+ document.body.addEventListener('click', this.globalClickHandler)
+ var container = findDOMNode(this)
+ this.container = container
+ }
+}
+
+MenuDroppoComponent.prototype.componentWillUnmount = function () {
+ if (this && document.body) {
+ document.body.removeEventListener('click', this.globalClickHandler)
+ }
+}
+
+MenuDroppoComponent.prototype.globalClickOccurred = function (event) {
+ const target = event.target
+ const container = findDOMNode(this)
+
+ if (target !== container &&
+ !isDescendant(this.container, event.target) &&
+ this.outsideClickHandler) {
+ this.outsideClickHandler(event)
+ }
+}
+
+function isDescendant (parent, child) {
+ var node = child.parentNode
+ while (node !== null) {
+ if (node === parent) {
+ return true
+ }
+ node = node.parentNode
+ }
+
+ return false
+}
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index d9f0067cd..c26505193 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -19,7 +19,11 @@ Notice.prototype.render = function () {
const disabled = state.disclaimerDisabled
return (
- h('.flex-column.flex-center.flex-grow', [
+ h('.flex-column.flex-center.flex-grow', {
+ style: {
+ width: '100%',
+ },
+ }, [
h('h3.flex-center.text-transform-uppercase.terms-header', {
style: {
background: '#EBEBEB',
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 2bc6daae5..6b8e9e4dd 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -4,7 +4,6 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const actions = require('../actions')
// slideout menu
-const SlideoutMenu = require('react-burger-menu').slide
const WalletView = require('./wallet-view')
const Identicon = require('./identicon')
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index fb135d190..75c3a68d8 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -2,7 +2,6 @@
display: flex;
align-items: center;
font-size: 0.6em;
-
}
.network-name {
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index 4a256c65b..965abbe28 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/ui/app/css/itcss/components/sections.scss
@@ -7,24 +7,6 @@ App Sections
debug / dev
*/
-// #app-content {
-// border: 2px solid green;
-// }
-
-// #design-container {
-// position: absolute;
-// left: 360px;
-// top: -42px;
-// width: calc(100vw - 360px);
-// height: 100vh;
-// overflow: scroll;
-// }
-
-// #design-container img {
-// width: 2000px;
-// margin-right: 600px;
-// }
-
/* initialize */
textarea.twelve-word-phrase {
@@ -507,4 +489,4 @@ div.message-container > div:first-child {
.pop-hover:hover {
transform: scale(1.1);
-} \ No newline at end of file
+}
diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss
index 5e26ede64..2b7ffcb04 100644
--- a/ui/app/css/itcss/tools/utilities.scss
+++ b/ui/app/css/itcss/tools/utilities.scss
@@ -261,10 +261,11 @@ hr.horizontal-line {
.menu-icon {
display: inline-block;
- height: 9px;
- min-width: 9px;
+ height: 12px;
+ min-width: 12px;
margin: 13px;
}
+
.ether-icon {
background: rgb(0, 163, 68);
border-radius: 20px;
@@ -294,7 +295,6 @@ hr.horizontal-line {
color: red;
}
-
/*
Misc
*/
@@ -314,4 +314,4 @@ hr.horizontal-line {
flex: 1 0 auto;
display: flex;
justify-content: flex-end;
-}
+} \ No newline at end of file
diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss
index 6b0c999be..a6a6e4335 100644
--- a/ui/app/css/itcss/trumps/index.scss
+++ b/ui/app/css/itcss/trumps/index.scss
@@ -51,3 +51,38 @@
.app-primary.from-left .main-enter:not(.main-enter-active) {
transform: translateX(-360px);
}
+
+i.fa.fa-question-circle.fa-lg.menu-icon {
+ font-size: 18px;
+}
+
+/*
+ Hacky breakpoint fix for account + tab sections
+ Resolves issue from @frankiebee in
+ https://github.com/MetaMask/metamask-extension/pull/1835
+ Please remove this when integrating new designs
+ */
+
+// This is commented out, because it's not needed in NewUI.
+// We will have a new css architecture w/ different breakpoints.
+
+// @media screen and (min-width: 575px) and (max-width: 800px) {
+// .account-data-subsection {
+// flex: 0 0 auto !important; // reset flex
+// margin-left: 10px !important; // create additional horizontal space
+// margin-right: 10px !important;
+// width: 40%;
+// }
+
+// .tabSection {
+// flex: 0 0 auto !important;
+// margin-left: 10px !important;
+// margin-right: 10px !important;
+// min-width: 285px;
+// width: 49%;
+// }
+
+// .name-label {
+// width: 80%;
+// }
+// }
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index b00349c05..31583f3e5 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -3,7 +3,6 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const TxView = require('./components/tx-view')
const WalletView = require('./components/wallet-view')
-const SlideoutMenu = require('react-burger-menu').slide
const AccountAndTransactionDetails = require('./account-and-transaction-details')
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
const ConfigScreen = require('./config')
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 08235f0ea..1918e2e6a 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -26,7 +26,11 @@ UnlockScreen.prototype.render = function () {
const state = this.props
const warning = state.warning
return (
- h('.flex-column', [
+ h('.flex-column', {
+ style: {
+ width: 'inherit',
+ },
+ }, [
h('.unlock-screen.flex-column.flex-center.flex-grow', [
h(Mascot, {