Increase tap areas for menu buttons on mobile

ui/app/components/tx-view.js

@@ -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: () => {
+        onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
-          this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
+      }),
-        },
-      }, []),
 
       h('.identicon-wrapper.select-none', {
         style: {

ui/app/css/itcss/components/hero-balance.scss

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

ui/app/css/itcss/components/newui-sections.scss

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

ui/app/main-container.js

@@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
         return h(Settings, {key: 'config'})
       default:
         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',
-        }
     }
   }
 

ui/app/unlock.js

@@ -28,12 +28,7 @@ UnlockScreen.prototype.render = function () {
   const state = this.props
   const warning = state.warning
   return (
-    h('.flex-column', {
+    h('.unlock-screen', [
-      style: {
-        width: 'inherit',
-      },
-    }, [
-      h('.unlock-screen.flex-column.flex-center.flex-grow', [
 
       h(Mascot, {
         animationEventEmitter: this.animationEventEmitter,
@@ -72,9 +67,7 @@ UnlockScreen.prototype.render = function () {
           margin: 10,
         },
       }, 'Log In'),
-      ]),
 
-      h('.flex-row.flex-center.flex-grow', [
       h('p.pointer', {
         onClick: () => {
           this.props.dispatch(actions.markPasswordForgotten())
@@ -88,9 +81,7 @@ UnlockScreen.prototype.render = function () {
           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'))
@@ -103,8 +94,6 @@ UnlockScreen.prototype.render = function () {
           marginTop: '32px',
         },
       }, 'Use classic interface'),
-      ]),
-
     ])
   )
 }