refactor: made profile popup buttons consistent to the rest of the UI

Author: devvaannsh

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/styles/Extn-UserProfile.less

@@ -96,6 +96,7 @@
         width: 100%;
         text-align: left;
         padding: 8px 12px;
+        margin: 3px 0;
 
         i {
             margin-right: 8px;
@@ -108,11 +109,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 +142,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;
-            }
-        }
     }
 }
 
@@ -197,46 +185,38 @@
         }
     }
 
-    .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;
-            }
-        }
     }
 }