#951: updated navbar user menus

frontend/src/components/user-menu/guest-nav.js

@@ -37,7 +37,7 @@ export class GuestMenu extends React.Component {
             </div>
             <div className="col-xs-6">
 
-              <RegisterButton className="btn-success btn-register btn-block">
+              <RegisterButton className="btn-primary btn-register btn-block">
                 {gettext("Register")}
               </RegisterButton>
 
@@ -62,7 +62,7 @@ export class GuestNav extends GuestMenu {
         >
           {gettext("Sign in")}
         </button>
-        <RegisterButton className="navbar-btn btn-success btn-register">
+        <RegisterButton className="navbar-btn btn-primary btn-register">
           {gettext("Register")}
         </RegisterButton>
         <div className="navbar-left">

frontend/style/flavor/buttons.less

@@ -195,40 +195,41 @@
 }
 
 
-// special buttons: sign in and register
-.btn-sign-in {
-  border-radius: @btn-sign-in-radius;
-
-  .misago-btn-outline(
-    @btn-sign-in-color,
-    @btn-sign-in-bg,
-    @btn-sign-in-border,
-
-    @btn-sign-in-hover-color,
-    @btn-sign-in-hover-bg,
-    @btn-sign-in-hover-border,
-
-    @btn-sign-in-active-color,
-    @btn-sign-in-active-bg,
-    @btn-sign-in-active-border
-  );
-}
-
+// sign in and register buttons in navbar
+.navbar-misago {
+  .btn-sign-in {
+    border-radius: @navbar-btn-sign-in-radius;
+
+    .misago-btn-outline(
+      @navbar-btn-sign-in-color,
+      @navbar-btn-sign-in-bg,
+      @navbar-btn-sign-in-border,
+
+      @navbar-btn-sign-in-hover-color,
+      @navbar-btn-sign-in-hover-bg,
+      @navbar-btn-sign-in-hover-border,
+
+      @navbar-btn-sign-in-active-color,
+      @navbar-btn-sign-in-active-bg,
+      @navbar-btn-sign-in-active-border
+    );
+  }
 
-.btn-register {
-  border-radius: @btn-register-radius;
+  .btn-register {
+    border-radius: @navbar-btn-register-radius;
 
-  .misago-btn-outline(
-    @btn-register-color,
-    @btn-register-bg,
-    @btn-register-border,
+    .misago-btn-outline(
+      @navbar-btn-register-color,
+      @navbar-btn-register-bg,
+      @navbar-btn-register-border,
 
-    @btn-register-hover-color,
-    @btn-register-hover-bg,
-    @btn-register-hover-border,
+      @navbar-btn-register-hover-color,
+      @navbar-btn-register-hover-bg,
+      @navbar-btn-register-hover-border,
 
-    @btn-register-active-color,
-    @btn-register-active-bg,
-    @btn-register-active-border
-  );
+      @navbar-btn-register-active-color,
+      @navbar-btn-register-active-bg,
+      @navbar-btn-register-active-border
+    );
+  }
 }

frontend/style/flavor/dropdowns.less

@@ -11,39 +11,17 @@
 
 
 // Navbar dropdown
-.navbar-misago .user-dropdown,
-.mobile-dropdown.open .dropdown-menu {
-  background: @dropdown-inverse-bg;
-
-  a, a:link, a:visited, .btn-link {
-    color: @dropdown-inverse-link-color;
-  }
-
-  a:hover, a:focus, a:active,
-  .btn-link:hover, .btn-link:focus, .btn-link:active {
-    background: @dropdown-inverse-link-hover-bg;
-
-    color: @dropdown-inverse-link-hover-color;
-  }
-
-  .divider {
-    background-color: @dropdown-inverse-divider-bg;
-  }
-}
-
 .user-dropdown .dropdown-header {
   strong {
     display: block;
 
-    color: @dropdown-inverse-header-color;
     font-size: @font-size-large;
     font-weight: 300;
   }
 
   .user-stats {
     margin-top: @line-height-computed / 2;
 
-    color: @dropdown-inverse-subheader-color;
     font-size: @font-size-small;
 
     .material-icon {
@@ -62,14 +40,6 @@
 
 .user-dropdown .guest-preview {
   padding-bottom: @padding-large-vertical;
-
-  h4 {
-    color: @dropdown-inverse-header-color;
-  }
-
-  p {
-    color: @dropdown-inverse-subheader-color;
-  }
 }
 
 .user-dropdown .badge {

frontend/style/flavor/variables.less

@@ -141,34 +141,35 @@
 @navbar-inverse-brand-hover-bg:            transparent;
 
 // Sign in button
-@btn-sign-in-color:               #e0e0e0;
-@btn-sign-in-border:              transparent;
-@btn-sign-in-bg:                  transparent;
+@navbar-btn-sign-in-color:               #e0e0e0;
+@navbar-btn-sign-in-border:              transparent;
+@navbar-btn-sign-in-bg:                  transparent;
 
-@btn-sign-in-hover-color:         #fff;
-@btn-sign-in-hover-border:        #666060;
-@btn-sign-in-hover-bg:            #666060;
+@navbar-btn-sign-in-hover-color:         #fff;
+@navbar-btn-sign-in-hover-border:        #666060;
+@navbar-btn-sign-in-hover-bg:            #666060;
 
-@btn-sign-in-active-color:        #fff;
-@btn-sign-in-active-border:       #424242;
-@btn-sign-in-active-bg:           #424242;
+@navbar-btn-sign-in-active-color:        #fff;
+@navbar-btn-sign-in-active-border:       #424242;
+@navbar-btn-sign-in-active-bg:           #424242;
 
-@btn-sign-in-radius:                100px;
+@navbar-btn-sign-in-radius:                100px;
 
 // Register button
-@btn-register-color:              #e0e0e0;
-@btn-register-border:             #757575;
-@btn-register-bg:                 transparent;
+@navbar-btn-register-color:              #e0e0e0;
+@navbar-btn-register-border:             #757575;
+@navbar-btn-register-bg:                 transparent;
 
-@btn-register-hover-color:        #212121;
-@btn-register-hover-border:       #fff;
-@btn-register-hover-bg:           #fff;
+@navbar-btn-register-hover-color:        #212121;
+@navbar-btn-register-hover-border:       #fff;
+@navbar-btn-register-hover-bg:           #fff;
 
-@btn-register-active-color:       #212121;
-@btn-register-active-border:      #bdbdbd;
-@btn-register-active-bg:          #bdbdbd;
+@navbar-btn-register-active-color:       #212121;
+@navbar-btn-register-active-border:      #bdbdbd;
+@navbar-btn-register-active-bg:          #bdbdbd;
+
+@navbar-btn-register-radius:               100px;
 
-@btn-register-radius:               100px;
 
 //== Page header
 //
@@ -296,22 +297,6 @@
 @dropdown-link-active-bg:        @component-active-bg;
 
 
-//** Background for the dropdown menu.
-@dropdown-inverse-bg:                    lighten(@navbar-inverse-bg, 5%);
-//** Divider color for between dropdown items.
-@dropdown-inverse-divider-bg:            @gray-light;
-
-//** Dropdown link text color.
-@dropdown-inverse-link-color:            @gray-lighter;
-//** Hover color for dropdown links.
-@dropdown-inverse-link-hover-color:      @component-active-color;
-//** Hover background for dropdown links.
-@dropdown-inverse-link-hover-bg:         @component-active-bg;
-
-//** Text color for headers within dropdown menus.
-@dropdown-inverse-header-color:          #fff;
-@dropdown-inverse-subheader-color:       darken(#fff, 15%);
-
 //** Default button in inversed dropdown
 @dropdown-btn-default-color:             darken(#fff, 30%);
 @dropdown-btn-default-border:            darken(#fff, 30%);

frontend/style/misago/dropdowns.less

@@ -92,31 +92,18 @@
 }
 
 
-// Always displayed on mobile dropdown
-.mobile-dropdown, .compact-nav {
-  position: static;
-  margin: 0px;
-  overflow: auto;
-
-  &.open {
-    margin-bottom: @line-height-computed;
-  }
-}
-
-.compact-nav.open {
-  margin-top: @line-height-computed * -1;
+// Navbar's dropdown
+.mobile-dropdown {
+  position: relative;
 }
 
 .mobile-dropdown.open>.dropdown-menu, .compact-nav.open>.dropdown-menu {
   border: none;
   border-radius: 0;
-  .box-shadow(none);
 
   display: block;
   margin: 0px;
   width: 100%;
-
-  position: static;
 }
 
 

frontend/style/misago/navbar.less

@@ -74,7 +74,6 @@
     }
   }
 
-
   // Pull Guest and User menus to right
   .nav-guest, .nav-user {
     float: right;