Finalize sidebar dimensions

3 files changed, 33 insertions, 31 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 19d80a728..c8ae28b8c 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -143,39 +143,15 @@ App.prototype.renderSidebar = function() {
       // content
       this.props.sidebarOpen ? h(WalletView, {
         responsiveDisplayClassname: '.sidebar',
-        style: {
-          zIndex: 26,
-          position: 'fixed',
-          top: '6%',
-          left: '0px',
-          right: '0px',
-          bottom: '0px',
-          opacity: '1',
-          visibility: 'visible',
-          willChange: 'transform',
-          overflowY: 'auto',
-          boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px',
-          width: '85%',
-          height: '100%',
-        },
+        style: {},
       }) : undefined,
 
     ]),
 
     // overlay
     // TODO: add onClick for overlay to close sidebar
-    this.props.sidebarOpen ? h('div', {
-      style: {
-        zIndex: 25,
-        position: 'fixed',
-        top: '6%',
-        left: '0px',
-        right: '0px',
-        bottom: '0px',
-        opacity: '1',
-        visibility: 'visible',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-      }
+    this.props.sidebarOpen ? h('div.sidebar-overlay', {
+      style: {}
     }, []) : undefined,
   ])
 }
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 750586328..a19a9f0bc 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -732,6 +732,36 @@ div.message-container > div:first-child {
   overflow-y: scroll;
 }
 
+.sidebar {
+  flex: 1 0 230px;
+  background: rgb(250, 250, 250);
+  z-index: 26;
+  position: fixed;
+  top: 35px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  opacity: 1;
+  visibility: visible;
+  will-change: transform;
+  overflow-y: auto;
+  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
+  width: 85%;
+  height: 100%;
+}
+
+.sidebar-overlay {
+  z-index: 25;
+  position: fixed;
+  top: 35px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  opacity: 1;
+  visibility: visible;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
 @media screen and (min-width: 576px) {
   .lap-visible {
     display: flex;
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index af722d100..b9f4902af 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -14,10 +14,6 @@ function MainContainer () {
 }
 
 MainContainer.prototype.render = function () {
-
-  // 2. Fix responsive sizing - smaller
-  //    https://puu.sh/x0gDA/5ff3b734eb.png
-  // 
   // 3. summarize:
   //  switch statement goes inside MainContainer,
   //  or a method in renderPrimary