Refactor the UI of the user profile popup

src/extensionsIntegrated/Phoenix/html/login-dialog.html

@@ -3,12 +3,12 @@
         <h1 class="popup-title">{{welcomeTitle}}</h1>
     </div>
     <div class="popup-body">
-        <button id="phoenix-signin-btn" class="btn btn-primary">
+        <button id="phoenix-signin-btn" class="btn dialog-button primary">
             <i class="fa fa-sign-in-alt"></i>
             {{signInBtnText}}
         </button>
         <div class="support-link">
-            <button id="phoenix-support-btn" class="btn btn-link">
+            <button id="phoenix-support-btn" class="btn dialog-button">
                 <i class="fa fa-question-circle"></i>
                 {{supportBtnText}}
             </button>

src/extensionsIntegrated/Phoenix/html/profile-panel.html

@@ -21,17 +21,17 @@
             </div>
         </div>
 
-        <button id="phoenix-account-btn" class="btn btn-default menu-button">
+        <button id="phoenix-account-btn" class="btn dialog-button menu-button">
             <i class="fa fa-user"></i>
             {{accountBtnText}}
         </button>
 
-        <button id="phoenix-support-btn" class="btn btn-default menu-button">
+        <button id="phoenix-support-btn" class="btn dialog-button menu-button">
             <i class="fa fa-question-circle"></i>
             {{supportBtnText}}
         </button>
 
-        <button id="phoenix-signout-btn" class="btn btn-default menu-button signout">
+        <button id="phoenix-signout-btn" class="btn dialog-button menu-button signout">
             <i class="fa fa-sign-out-alt"></i>
             {{signOutBtnText}}
         </button>

src/extensionsIntegrated/Phoenix/profile-menu.js

@@ -13,7 +13,10 @@ define(function (require, exports, module) {
     let isPopupVisible = false;
 
     // if user is logged in we show the profile menu, otherwise we show the login menu
-    const isLoggedIn = false;
+    let isLoggedIn = false;
+
+    // this is to handle document click events to close popup
+    let documentClickHandler = null;
 
     const defaultLoginData = {
         welcomeTitle: "Welcome to Phoenix Code",
@@ -37,10 +40,16 @@ define(function (require, exports, module) {
 
     function _handleSignInBtnClick() {
         console.log("User clicked sign in button");
+        closePopup(); // need to close the current popup to show the new one
+        isLoggedIn = true;
+        showProfilePopup();
     }
 
     function _handleSignOutBtnClick() {
         console.log("User clicked sign out");
+        closePopup();
+        isLoggedIn = false;
+        showLoginPopup();
     }
 
     function _handleContactSupportBtnClick() {
@@ -62,6 +71,12 @@ define(function (require, exports, module) {
             $popup = null;
             isPopupVisible = false;
         }
+
+        // we need to remove document click handler if it already exists
+        if (documentClickHandler) {
+            $(document).off("mousedown", documentClickHandler);
+            documentClickHandler = null;
+        }
     }
 
     /**
@@ -94,6 +109,29 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * this function is responsible to set up a click handler to close the popup when clicking outside
+     */
+    function _setupDocumentClickHandler() {
+        // remove any existing handlers
+        if (documentClickHandler) {
+            $(document).off("mousedown", documentClickHandler);
+        }
+
+        // add the new click handler
+        documentClickHandler = function (event) {
+            // if the click is outside the popup and not on the profile button (which toggles the popup)
+            if ($popup && !$popup[0].contains(event.target) && !$("#user-profile-button")[0].contains(event.target)) {
+                closePopup();
+            }
+        };
+
+        // this is needed so we don't close the popup immediately as the profile button is clicked
+        setTimeout(function() {
+            $(document).on("mousedown", documentClickHandler);
+        }, 100);
+    }
+
     /**
      * Shows the sign-in popup when the user is not logged in
      * @param {Object} loginData - Data to populate the template (optional)
@@ -129,7 +167,6 @@ define(function (require, exports, module) {
         // event handlers for buttons
         $popup.find("#phoenix-signin-btn").on("click", function () {
             _handleSignInBtnClick();
-            closePopup();
         });
 
         $popup.find("#phoenix-support-btn").on("click", function () {
@@ -143,6 +180,8 @@ define(function (require, exports, module) {
                 positionPopup();
             }
         });
+
+        _setupDocumentClickHandler();
     }
 
     /**
@@ -187,7 +226,6 @@ define(function (require, exports, module) {
 
         $popup.find("#phoenix-signout-btn").on("click", function () {
             _handleSignOutBtnClick();
-            closePopup();
         });
 
         // handle window resize to reposition popup
@@ -196,6 +234,8 @@ define(function (require, exports, module) {
                 positionPopup();
             }
         });
+
+        _setupDocumentClickHandler();
     }
 
     /**

src/styles/Extn-UserProfile.less

@@ -79,11 +79,13 @@
         background-color: @bc-input-bg;
         border-radius: 4px;
         overflow: hidden;
+        border: 1px solid @bc-btn-border;
+        box-sizing: border-box;
 
         .progress-fill {
             height: 100%;
             background-color: @bc-primary-btn-bg;
-            border-radius: 4px;
+            border-radius: 3px;
         }
     }
 
@@ -96,6 +98,7 @@
         width: 100%;
         text-align: left;
         padding: 8px 12px;
+        margin: 3px 0;
 
         i {
             margin-right: 8px;
@@ -108,11 +111,28 @@
         }
     }
 
-    .btn {
-        margin: 5px 0;
+    .btn.dialog-button {
+        background-color: @bc-btn-bg;
+        color: @bc-text;
+        border: 1px solid @bc-btn-border;
+        border-radius: @bc-border-radius;
+        box-shadow: inset 0 1px @bc-highlight-hard;
+        font-size: (@baseFontSize + 1);
+        font-weight: @font-weight-semibold;
+        margin: 3px 0;
         transition: background-color 0.2s ease;
 
-        &.btn-primary {
+        &:not(:disabled):not(.disabled):hover {
+            background-color: lighten(@bc-btn-bg, 5%);
+            color: @bc-text;
+        }
+
+        &:active:not([disabled]) {
+            background-color: @bc-btn-bg-down;
+            box-shadow: inset 0 1px 0 @bc-shadow-small;
+        }
+
+        &.primary {
             background-color: @bc-primary-btn-bg;
             border: 1px solid @bc-primary-btn-border;
             box-shadow: inset 0 1px 0 @bc-highlight;
@@ -124,46 +144,16 @@
                 margin-right: 5px;
             }
 
-            &:hover {
+            &:not(:disabled):not(.disabled):hover {
                 background-color: lighten(@bc-primary-btn-bg, 10%);
+                color: @bc-text-alt;
             }
 
-            &:active {
+            &:active:not([disabled]) {
                 background-color: @bc-primary-btn-bg-down;
                 box-shadow: inset 0 1px 0 @bc-shadow-small;
             }
         }
-
-        &.btn-default {
-            background-color: @bc-btn-bg;
-            border: 1px solid @bc-btn-border;
-            box-shadow: inset 0 1px 0 @bc-highlight;
-
-            &:hover {
-                background-color: lighten(@bc-btn-bg, 10%);
-            }
-
-            &:active {
-                background-color: @bc-btn-bg-down;
-                box-shadow: inset 0 1px 0 @bc-shadow-small;
-            }
-        }
-
-        &.btn-link {
-            background: none;
-            border: none;
-            box-shadow: none;
-            color: @bc-text-thin-quiet;
-
-            i {
-                margin-right: 5px;
-            }
-
-            &:hover {
-                color: @bc-text;
-                text-decoration: none;
-            }
-        }
     }
 }
 
@@ -191,52 +181,45 @@
 
     .progress-bar {
         background-color: @dark-bc-input-bg;
+        border-color: @dark-bc-btn-border;
 
         .progress-fill {
             background-color: @dark-bc-primary-btn-bg;
         }
     }
 
-    .btn {
-        &.btn-primary {
+    .btn.dialog-button {
+        background-color: @dark-bc-btn-bg;
+        border: 1px solid @dark-bc-btn-border;
+        box-shadow: inset 0 1px 0 @dark-bc-highlight;
+        color: @dark-bc-text;
+
+        &:not(:disabled):not(.disabled):hover {
+            background-color: lighten(@dark-bc-btn-bg, 10%);
+            color: @dark-bc-text;
+        }
+
+        &:active:not([disabled]) {
+            background-color: @dark-bc-btn-bg-down;
+            box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
+        }
+
+        &.primary {
             background-color: @dark-bc-primary-btn-bg;
             border: 1px solid @dark-bc-primary-btn-border;
             box-shadow: inset 0 1px 0 @dark-bc-highlight;
             color: @dark-bc-text-alt;
 
-            &:hover {
+            &:not(:disabled):not(.disabled):hover {
                 background-color: lighten(@dark-bc-primary-btn-bg, 10%);
+                color: @dark-bc-text-alt;
             }
 
-            &:active {
+            &:active:not([disabled]) {
                 background-color: @dark-bc-primary-btn-bg-down;
                 box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
             }
         }
-
-        &.btn-default {
-            background-color: @dark-bc-btn-bg;
-            border: 1px solid @dark-bc-btn-border;
-            box-shadow: inset 0 1px 0 @dark-bc-highlight;
-            color: @dark-bc-text;
-
-            &:hover {
-                background-color: lighten(@dark-bc-btn-bg, 10%);
-            }
-
-            &:active {
-                background-color: @dark-bc-btn-bg-down;
-                box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
-            }
-        }
-
-        &.btn-link {
-            color: @dark-bc-text-thin-quiet;
-
-            &:hover {
-                color: @dark-bc-text;
-            }
-        }
     }
 }
 

src/styles/brackets.less

@@ -670,7 +670,8 @@ a, img {
 }
 
 .user {
-    background-image: url("images/circle-user-solid.svg");
+    background: url("images/circle-user-solid.svg") center no-repeat;
+    background-size: 20px 20px;
 }
 
 #editor-holder {