Add account window

interface/.meteor/dev_bundle

@@ -0,0 +1 @@
+/Users/alex/.meteor/packages/meteor-tool/.1.3.4_4.n29936++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle

interface/client/mistAPIBackend.js

@@ -31,7 +31,7 @@ mistAPIBackend = function(event) {
     var webview = this.webview;
     var arg = event.args[0];
 
-    console.trace('mistAPIBackend event', event);
+    // console.trace('mistAPIBackend event', event);
 
     if(event.channel === 'setWebviewId') {
         Tabs.update(template.data._id, {$set:{

interface/client/styles/animations.import.less

@@ -29,9 +29,6 @@ aside.sidebar {
             transition: none;
         }
 
-        button.main img {
-            transition: opacity 0.5s;
-        }
         button.slide-out {
             transition: transform 0.2s ease-in-out;
         }

interface/client/styles/browserbar.import.less

@@ -32,92 +32,22 @@
         // ANIMATION
         transition: height 0.25s, box-shadow 0.5s;
 
-        &.show-bar {
-            height: @gridHeight * 20;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-
-            .url-input {
-                opacity: 0.9;
-                transition-duration: 0.3s;
-                transition-delay: 0.1s;        
-                transform: translateX(0) translateZ(0);
-            }
-
-            .url-breadcrumb {
-                opacity: 0;
-                visibility: hidden;
-                transition-duration: 0.3s;                
-                transition-delay: 0.1s; 
-                transform: translateX(20px) translateZ(0);
-                word-spacing: -5px;
-            }
-
-            &:after {
-                display: block;
-                position: absolute;
-                left: 5%;
-                top: 28px;
-                width: 20px;
-                height: 20px;
-                margin-left: -10px;
-                content: "◢◣";
-                color: @colorGrayDark;
-                font-size: 50%;
-                letter-spacing: -2px;
-                transition: left .5s ease-in-out;
-            }
-        }
-
-        &.dapp-info {
-            button.dapp-info {
-                color: @colorGrayDark;
-            }
-
-            div.dapp-info {
-                display: flex;
-            }
-        }
-
-        &.accounts {
-            button.accounts {
-                color: @colorGrayDark;
-            }
-            button.dapp-info {
-                color: @colorLink;
-            }
-
-            div.accounts {
-                display: flex;
-            }
-
-            &:after {
-                left: 95%;
-            }
-        }
-
-        &.url {
-            &:after {
-                left: 50%;
-            }
-            div.url {
-                display: flex;
-            }
-        }
-
-        > button {
+        > .dapp-info, > button {
+            color: #6691c2;
             position: relative;
             padding-left: 0;
             margin-top: 1px;
             max-width: 33%;
-            height: @gridHeight;
+            height: 21px;
             font-family: @sourceSansPro;
             font-size: @fontSizeSmall;
             font-weight: 500;
-            line-height: @gridHeight;
+            line-height: 21px;
             white-space: nowrap;
+            margin-top: -1px;
 
             &.has-icon {
-                padding-left: @gridWidth*0.75;
+                padding-left: @gridWidth * 0.84;
             }
 
             &:focus {
@@ -128,27 +58,36 @@
                 .dapp-shorten-text;
             }
 
-            .dapp-identicon {
-                margin-top: -2px;
-            }
-
             .app-icon {
                 position: absolute;
-                top: 1px;
+                top: 0;
                 left: 0;
-                width: 16px;
-                height: 16px;
-                border-radius: 8px;
+                width: 21px;
+                height: 21px;
+                border-radius: 50%;
+                -webkit-user-drag: none;
+                user-drag: none;
             }
 
-            .icon-key {
-              display: block;
-              float: right;
-              top: 3px;
-              margin-left: 4px;
-              position: relative;
+            .connect-button {
+                float: left;
+                margin-right: 8px;
+                text-transform: uppercase;
+            }            
+            .connect-button, .dapp-info span {
+                line-height: 21px;
+                display: inline-block;
             }
 
+            span.no-accounts {
+                background-image: url(/images/anonymous-icon.png);
+                background-size: cover;
+                background-position: 50%;
+                width: 21px;
+                height: 21px;
+                display: inline-block;
+                border-radius: 50%;
+            }
         }
 
         > form {
@@ -203,7 +142,6 @@
                     color: @colorLinkBlur;
                 }            
             }
-
         }
 
         div.dapp-info,
@@ -279,8 +217,8 @@
         }
 
         .app-bar {
-            margin-left: @gridWidth * 1;
-            margin-right: 0;
+            margin-left: @gridWidth /2;
+            margin-right: @gridWidth /2;
         }
 
     }
@@ -392,7 +330,7 @@
     .browser-bar .accounts {
       width: 0;
       text-overflow: clip;
-      padding-left: @gridWidth * 0.5;
+      padding-left: @gridWidth * 0.75;
     }    
 }
 

interface/client/styles/menu.import.less

@@ -93,14 +93,19 @@ aside.sidebar {
                     color: @colorLinkFocus;
                 }
 
-                img {
+                img, .icon-globe {
                     position: absolute;
-                    top: 10px;
-                    width: 20px;
-                    height: 20px;
+                    top: 12px;
+                    left: 2px;
+                    height: @gridHeight;
+                    width: @gridHeight;
                     border-radius: 10px;
                 }
 
+                .icon-globe {
+                    top: 13px;
+                }
+
                 span, .badge {
                     .dapp-shorten-text;
                     display: block;
@@ -122,17 +127,56 @@ aside.sidebar {
                     font-weight: 200;
                     text-transform: none;
                 }
+            }
+
+            // Remove tab button
+            button.main {
+                img, .icon-globe {
+                    transition: 0.25s ease-in-out transform;
+                    transform: rotateY(0deg) translate3d(0, 0, 0);                    
+                    backface-visibility: hidden;
+                    color: @colorGray;
+                }
+            }
+
+            &:not(.browser):not(.wallet) header:hover {
+                button.main img, button.main .icon-globe {
+                    transform: rotateY(-180deg) translate3d(0, 0, 0);    
+                }
 
-                // &.history {
-                //     padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2;
-                //     font-size: 0.7em;
-                //     text-align: left;
-                // }
+                button.remove-tab {
+                    transform: rotateY(0deg) translate3d(0px, 0px, 0);  
+                    &:hover {
+                        background: @colorLink;
+                        color: @colorWhite;  
+                    }                  
+                }
             }
+
+            button.remove-tab {
+                box-sizing: border-box;
+                position: absolute;
+                padding: 6px 8px 0px 2px;
+                transition: 0.25s ease-in-out transform;
+                left: 8px;
+                top: 11px;
+                color: @colorLink;
+                height: @gridHeight - 1px;
+                width: @gridHeight;
+                border-radius: 50%;
+                padding: 0;
+                z-index: 2;
+                backface-visibility: hidden;
+                transform: rotateY(180deg) translate3d(0px, 0px, 0);                         
+                &:focus {
+                    border: none;
+                }
+            }
+
             button.slide-out {
                 position: absolute;
                 right: @gridHeight/2;
-                top: @gridHeight/1.5;
+                top: @gridHeight/1.75;
                 width: 30px;
                 height: 20px;
                 background: url('icons/expand-icon.png') no-repeat center;
@@ -289,4 +333,10 @@ aside.sidebar {
             margin: @gridHeight/2 @gridWidth/4;
         }
     }
-}
+}
+
+// Remove tab button related code
+aside.full-tabs button.remove-tab {
+    display: none;
+}
+