More connect improvements

* Use extra route for disconnected/initial state
* Style connect screen properly
* Hide widget when connected in favor of custom UI
* Show account info in sidebar header

app/styles/_colors.scss

@@ -4,7 +4,14 @@ $dark-grey-3: #aaa;
 $light-grey-1: #b5c3d1;
 $light-grey-2: #ececec;
 
+body {
+  background-color: #fff;
+  transition: background-color 0.2s linear;
+}
+
 #app-container {
+  background-color: #fff;
+
   > aside {
     background-color: $dark-grey-1;
     color: $light-grey-1;
@@ -19,7 +26,6 @@ $light-grey-2: #ececec;
   }
 
   > main {
-    // background-color: $dark-grey-2;
     background-color: #fff;
 
     > header {
@@ -32,4 +38,8 @@ $light-grey-2: #ececec;
       }
     }
   }
+
+  &.disconnected main {
+    background-color: $light-grey-2;
+  }
 }

app/styles/_layout.scss

@@ -3,12 +3,23 @@
 }
 
 #remotestorage-widget {
-  position: fixed;
-  top: 1rem;
-  right: 3rem;
-  z-index: 1;
+  z-index: 23;
+  display: none;
+  top: 20%;
+  left: 50%;
+  margin-left: -200px;
 }
 
+.connect #remotestorage-widget {
+  display: block;
+}
+
+// .index #remotestorage-widget {
+//   position: fixed;
+//   top: 1rem;
+//   right: 3rem;
+// }
+
 #app-container {
   position: absolute;
   top: 0;
@@ -21,17 +32,34 @@
   justify-content: flex-start;
   align-items: stretch;
 
-  > aside {
-    flex: 0 0 16rem;
-    overflow: auto;
-    padding: 2rem;
-
-    nav {
-      margin-top: 5rem;
-      margin-bottom: 4rem;
+  &.disconnected {
+    > aside {
+      flex: 0;
+      overflow: hidden;
     }
   }
 
+  &.connected {
+    > aside {
+      flex: 0 0 16rem;
+      overflow: auto;
+      padding: 3rem 2rem;
+    }
+  }
+
+  > aside {
+    transition: flex 0.2s ease-in;
+
+    #account {
+      height: 4em;
+    }
+
+    // nav {
+    //   margin-top: 5rem;
+    //   margin-bottom: 4rem;
+    // }
+  }
+
   > main {
     flex: 1;
     overflow: auto;