Merge pull request #203 from ascribe/upgrade-react-styling

Fix styles for react upgrade
2016-06-13 11:52:24 +02:00 · 2016-06-13 11:52:24 +02:00 · d378ecb0f3
parent 8b4ff3ec8e 9d13ca3bf7
commit d378ecb0f3
17 changed files with 640 additions and 575 deletions
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
@ -1,6 +1,7 @@
 'use strict';

 import React from 'react';
+import classNames from 'classnames';

 import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
 import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
@ -43,30 +44,26 @@ let PieceListToolbar = React.createClass({
        const { className, children, searchFor, searchQuery } = this.props;

        return (
-            <div className={className}>
-                <div className="row">
-                    <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
-                        <div className="row">
-                            <span className="pull-left">
-                                {children}
-                            </span>
-                            <span className="pull-right">
-                                <PieceListToolbarOrderWidget
-                                    orderParams={this.props.orderParams}
-                                    orderBy={this.props.orderBy}
-                                    applyOrderBy={this.props.applyOrderBy}/>
-                                <PieceListToolbarFilterWidget
-                                    filterParams={this.props.filterParams}
-                                    filterBy={this.props.filterBy}
-                                    applyFilterBy={this.props.applyFilterBy} />
-                            </span>
-                            <SearchBar
-                                className="pull-right search-bar ascribe-input-glyph"
-                                searchFor={searchFor}
-                                searchQuery={searchQuery}
-                                threshold={AppConstants.searchThreshold}/>
-                        </div>
-                    </div>
+            <div className={classNames('row', className)}>
+                <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-piece-list-toolbar">
+                    <span className="pull-left">
+                        {children}
+                    </span>
+                    <span className="pull-right">
+                        <PieceListToolbarOrderWidget
+                            orderParams={this.props.orderParams}
+                            orderBy={this.props.orderBy}
+                            applyOrderBy={this.props.applyOrderBy}/>
+                        <PieceListToolbarFilterWidget
+                            filterParams={this.props.filterParams}
+                            filterBy={this.props.filterBy}
+                            applyFilterBy={this.props.applyFilterBy} />
+                    </span>
+                    <SearchBar
+                        className="pull-right search-bar ascribe-input-glyph"
+                        searchFor={searchFor}
+                        searchQuery={searchQuery}
+                        threshold={AppConstants.searchThreshold}/>
                </div>
            </div>
        );
--- a/js/components/header.js
+++ b/js/components/header.js
@ -192,6 +192,7 @@ let Header = React.createClass({
                        <Navbar.Brand>
                            {this.getLogo()}
                        </Navbar.Brand>
+                        <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse
                        eventKey={0}>
--- a/js/components/header_notifications.js
+++ b/js/components/header_notifications.js
@ -97,7 +97,7 @@ let HeaderNotifications = React.createClass({
            }

            return (
-                <Nav navbar pullRight>
+                <Nav navbar pullRight className="notification-menu">
                    <DropdownButton
                        ref='dropdownButton'
                        id="header-notification-dropdown"
@ -107,8 +107,7 @@ let HeaderNotifications = React.createClass({
                                <Glyphicon glyph='envelope' color="green"/>
                                <span className="notification-amount">({numNotifications})</span>
                            </span>
-                        }
-                        className="notification-menu">
+                        }>
                        {this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
                        {this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
                    </DropdownButton>
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@ -290,7 +290,6 @@ const PieceList = React.createClass({
        return (
            <div>
                <PieceListToolbar
-                    className="ascribe-piece-list-toolbar"
                    searchFor={this.searchFor}
                    searchQuery={this.state.search}
                    filterParams={filterParams}
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@ -17,132 +17,6 @@ hr {
    border-top: 1px solid $ascribe-blue-border;
 }

-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
-    border-color: transparent;
-}
-
-.navbar-default {
-    background-color: $ascribe--nav-bg-color;
-    box-shadow: 0 0 1px rgba(0,0,0,.1),
-                0 1px 2px rgba(0,0,0,.2);
-
-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
-        text-transform: uppercase;
-        font-size: 12px;
-        font-weight: $ascribe--font-weight-light;
-        color: $ascribe--nav-fg-prim-color;
-        border-bottom: 3px solid transparent;
-    }
-    .navbar-nav > li > a:hover {
-        color: $ascribe--nav-fg-sec-color;
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        color: $ascribe--nav-fg-prim-color;
-        border-bottom-color: $ascribe--nav-fg-prim-color;
-        background-color: $ascribe--nav-bg-color;
-        font-weight: $ascribe--font-weight-light;
-    }
-
-    .navbar-nav > .active {
-        background-color: $ascribe--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a,
-    .dropdown-menu > .active > a {
-        color:  $ascribe--nav-fg-prim-color;
-        background-color: $ascribe--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        background-color: rgba($ascribe--button-default-color, .05);
-    }
-    .dropdown-menu {
-        background-color: $ascribe--nav-bg-color;
-    }
-    .navbar-nav > li > .dropdown-menu {
-        padding: 0;
-    }
-
-    .dropdown-menu > li > a {
-        color:  $ascribe--nav-fg-prim-color;
-        font-weight: $ascribe--font-weight-light;
-        padding-bottom: 9px;
-        padding-top: 9px;
-    }
-
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        background-color: rgba($ascribe--button-default-color, .05);
-    }
-
-    .dropdown-menu > .divider {
-        margin: 0;
-    }
-
-    .notification-menu {
-        .dropdown-menu {
-            background-color: white;
-            li:hover {
-                background-color: $ascribe-white;
-            }
-        }
-        .notification-action{
-            color: $ascribe-pink;
-        }
-    }
-
-    .navbar-brand {
-        font-size: 23px;
-        padding: 12px 15px;
-
-        .icon-ascribe-logo {
-            color: $ascribe--nav-fg-prim-color;
-
-            &:hover {
-                color: $ascribe--nav-fg-sec-color;
-                text-decoration: none;
-            }
-            &:focus {
-                text-decoration: none;
-            }
-        }
-
-        .img-brand {
-            height: 100%;
-        }
-    }
-
-    .img-brand .navbar-brand {
-        width: 0;
-        height: 0;
-        padding-right: 120px;
-        padding-bottom: 36px;
-        padding-left: 30px;
-        background: transparent no-repeat center 4px;
-        background-size: 150px;
-        margin-bottom: 0;
-        position: relative;
-    }
-
-    .navbar-toggle .icon-bar {
-        background-color: $ascribe--nav-fg-prim-color;
-    }
-
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: $ascribe--nav-bg-color;
-    }
-}
-
 .ascribe-icon {
    font-size: 1.2em;
    font-weight: $ascribe--font-weight-light;
@ -367,14 +241,6 @@ fieldset[disabled] .btn-secondary.active {
    }
 }

-.open > .btn-default.dropdown-toggle:hover,
-.open > .btn-default.dropdown-toggle:focus,
-.open > .btn-default.dropdown-toggle.focus,
-.open > .btn-default.dropdown-toggle.dropdown-toggle {
-    background-color: darken($ascribe--button-secondary-fg-color, 20%);
-    border-color: darken($ascribe--button-secondary-fg-color, 20%);
-}
-
 .pager li > a,
 .pager li > span {
    background-color: $ascribe--button-default-color;
--- a/sass/ascribe_navbar.scss
+++ b/sass/ascribe_navbar.scss
@ -1,4 +1,7 @@
 .navbar-default {
+    background-color: $ascribe--nav-bg-color;
+    box-shadow: 0 0 1px rgba(0,0,0,.1),
+                0 1px 2px rgba(0,0,0,.2);
    border: 0;
    border-color: #ccc;
    border-left: 0;
@ -6,8 +9,142 @@
    border-top: 0;
    font-size: .8em;
    margin-bottom: 1.5em;
+
+    // All Navbar buttons
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
+        background-color: transparent;
+        border: none;
+        border-bottom: 3px solid transparent;
+        box-shadow: none;
+        color: $ascribe--nav-fg-prim-color;
+        font-size: 12px;
+        font-weight: $ascribe--font-weight-light;
+        line-height: 20px;
+        padding: 15px;
+        text-transform: uppercase;
+
+        &:focus,
+        &:hover {
+            background-color: transparent;
+            color: $ascribe--nav-fg-sec-color;
+        }
+    }
+
+    // Currently active route
+    .navbar-nav > li.active > a {
+        background-color: transparent;
+        border-bottom-color: $ascribe--nav-fg-prim-color;
+
+        &:focus,
+        &:hover {
+            background-color: transparent;
+            color: $ascribe--nav-fg-prim-color;
+        }
+    }
+
+    // Open dropdowns
+    .navbar-nav .open {
+        .dropdown-toggle.btn {
+            &:focus,
+            &:hover {
+                background-color: rgba($ascribe--button-default-color, .05);
+                color: $ascribe--nav-fg-prim-color;
+            }
+        }
+
+        .dropdown-menu {
+            margin: 0;
+            padding: 0;
+        }
+
+        .dropdown-menu a {
+            color:  $ascribe--nav-fg-prim-color;
+            font-weight: $ascribe--font-weight-light;
+            padding-bottom: 9px;
+            padding-top: 9px;
+        }
+    }
+
+    .dropdown-menu > .divider {
+        margin: 0;
+    }
+
+    .notification-menu {
+        .dropdown-toggle.btn:focus,
+        .dropdown-toggle.btn:hover {
+            box-shadow: none;
+        }
+    }
+
+    .navbar-brand {
+        font-size: 23px;
+        padding: 12px 15px;
+
+        .icon-ascribe-logo {
+            color: $ascribe--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                color: $ascribe--nav-fg-sec-color;
+                text-decoration: none;
+            }
+            &:focus {
+                text-decoration: none;
+            }
+        }
+
+        .img-brand {
+            height: 100%;
+        }
+    }
+
+    .navbar-toggle {
+        .icon-bar {
+            background-color: $ascribe--nav-fg-prim-color;
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $ascribe--nav-bg-color;
+        }
+    }
+
+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .navbar-nav {
+            margin-left: 0;
+        }
+
+        .navbar-nav .dropdown .dropdown-toggle.btn,
+        .navbar-nav > li > a {
+            display: block;
+            padding-bottom: 10px;
+            padding-top: 10px;
+            text-align: left;
+        }
+
+        .navbar-nav .open .dropdown-menu > li > a {
+            padding: 5px 15px 5px 25px;
+        }
+
+        .navbar-nav .dropdown {
+            display: block;
+        }
+    }
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+    border-color: transparent;
 }

 .navbar-right {
    margin-right: 0;
-}
+}
--- a/sass/ascribe_notification_list.scss
+++ b/sass/ascribe_notification_list.scss
@ -1,7 +1,3 @@
-$break-small: 764px;
-$break-medium: 991px;
-$break-medium: 1200px;
-
 .notification-header, .notification-wrapper {
    min-width: 350px;
    width: 100%;
@ -47,27 +43,26 @@ $break-medium: 1200px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
-    .sub-header{
+    .sub-header {
        margin-bottom: 0.6em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
-    .notification-action{
-        color: $ascribe-dark-blue;
+    .notification-action {
+        color: $ascribe-pink;
    }
 }

-.notification-menu {
-    .dropdown-menu {
-        padding: 0 !important;
-        li a {
-            padding-top: 0;
-        }
-        border-top: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-        max-height: 70vh;
+.notification-menu .dropdown-menu {
+    background-color: white;
+    border-top: 0;
+    max-height: 70vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    li:hover {
+        background-color: $ascribe-white;
    }
 }

--- a/sass/ascribe_piece_list_toolbar.scss
+++ b/sass/ascribe_piece_list_toolbar.scss
@ -1,8 +1,3 @@
-.ascribe-piece-list-toolbar {
-    padding-left: 15px;
-    padding-right: 15px;
-}
-
 .search-bar {
    max-width: 200px;

@ -29,42 +24,31 @@
    }
 }

-.ascribe-piece-list-toolbar-widget {
-    button {
-        background-color: transparent;
-        border: 1px solid transparent;
-        color: $ascribe--button-default-color;
-        padding: 6px 4px 6px 8px;
+.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
+    background-color: transparent;
+    border: 1px solid transparent;
+    box-shadow: none;
+    color: $ascribe--button-default-color;
+    padding: 6px 4px 6px 8px;

-        &:hover,
-        &:active {
-            background-color: $ascribe--button-default-color !important;
-            border-color: $ascribe--button-default-color !important;
-            color: white;
-        }
-        .caret {
-            display: none;
-        }
+    .open &,
+    &:hover,
+    &:active {
+        background-color: $ascribe--button-default-color !important;
+        border-color: $ascribe--button-default-color !important;
+        color: white;
    }
-
-    .ascribe-piece-list-toolbar-widget-item {
-        a {
-            padding-left: 0;
-            padding-right: 0;
-        }
+    .caret {
+        display: none;
    }
+}

+.ascribe-piece-list-toolbar-widget-item {
    .checkbox-line {
        height: 25px;
        position: relative;
        color: #333333;

-        /* Fuck you react-bootstrap */
-        &:hover {
-            background-color: $dropdown-link-hover-bg;
-            cursor: pointer;
-        }
-
        span {
            cursor: pointer;
            left: 9px;
@ -81,7 +65,7 @@
        }
    }

-    .dropdown-menu {
+    .dropdown-menu & {
        min-width: 170px;
    }
 }
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@ -2,11 +2,11 @@
 $vivi23--fg-color: black;
 $vivi23--bg-color: white;
 $vivi23--nav-fg-prim-color: $vivi23--fg-color;
-$vivi23--nav-fg-sec-color: #2882fa;
+$vivi23--nav-fg-sec-color: #3a3a3a;
 $vivi23--nav-bg-color: $vivi23--bg-color;
 $vivi23--nav-highlight-color: #f8f8f8;
 $vivi23--button-default-color: $vivi23--fg-color;
-$vivi23--highlight-color: #2882fa;
+$vivi23--highlight-color: #de2600;


 .client--23vivi {
@ -53,69 +53,40 @@ $vivi23--highlight-color: #2882fa;
    /** Navbar **/
    .navbar-default {
        background-color: $vivi23--nav-fg-prim-color;
-
-        .navbar-brand .icon-ascribe-logo {
-            color: $vivi23--bg-color;
-            &:hover {
-                color: darken($vivi23--bg-color, 20%);
-            }
-        }
-
    }

-    .navbar-nav > li > a,
-    .navbar-nav > li > a:focus,
-    .navbar-nav > li > .active a,
-    .navbar-nav > li > .active a:focus {
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        color: $vivi23--nav-bg-color;
+
+        &:focus,
+        &:hover {
+            color: darken($vivi23--nav-bg-color, 20%);
+        }
    }

-    .navbar-nav > li > a:hover {
-        color: darken($vivi23--nav-bg-color, 20%);
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
+    .navbar-nav > li.active > a {
        background-color: $vivi23--nav-fg-prim-color;
        border-bottom-color: $vivi23--nav-bg-color;
        color: $vivi23--nav-bg-color;
-    }

-    .navbar-nav > .open > a,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > li > a {
-        color: $vivi23--nav-fg-prim-color;
-        background-color: $vivi23--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus,
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($vivi23--nav-fg-prim-color, 20%);
-        background-color: $vivi23--nav-highlight-color;
-    }
-
-    .navbar-collapse.collapsing,
-    .navbar-collapse.collapse.in {
-        background-color: $vivi23--nav-bg-color;
-
-        .navbar-nav > .open > a,
-        .navbar-nav > .active > a {
-            background-color: $vivi23--nav-highlight-color;
+        &:focus,
+        &:hover {
+            color: $vivi23--nav-bg-color;
        }
    }

-    .navbar-collapse.collapsing li a,
-    .navbar-collapse.collapse.in li a {
-        color: $vivi23--nav-fg-prim-color;
-    }
-    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
-        color: lighten($vivi23--nav-fg-prim-color, 20%);
-        background-color: $vivi23--nav-highlight-color;
+    .navbar-nav .open {
+        .dropdown-toggle.btn {
+            background-color: $vivi23--nav-bg-color;
+            color: $vivi23--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $vivi23--nav-highlight-color;
+                color: lighten($vivi23--nav-fg-prim-color, 20%);
+            }
+        }
    }

    .navbar-toggle {
@ -124,15 +95,15 @@ $vivi23--highlight-color: #2882fa;
        .icon-bar {
            background-color: $vivi23--highlight-color;
        }
-    }

-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        border-color: lighten($vivi23--highlight-color, 10%);
-        background-color: $vivi23--nav-fg-prim-color;
+        &:focus,
+        &:hover {
+            border-color: lighten($vivi23--highlight-color, 10%);
+            background-color: $vivi23--nav-fg-prim-color;

-        .icon-bar {
-            background-color: lighten($vivi23--highlight-color, 10%);
+            .icon-bar {
+                background-color: lighten($vivi23--highlight-color, 10%);
+            }
        }
    }

@ -152,6 +123,40 @@ $vivi23--highlight-color: #2882fa;
        }
    }

+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            background-color: $vivi23--nav-bg-color;
+        }
+
+        .navbar-nav .dropdown .dropdown-toggle.btn,
+        .navbar-nav > li > a {
+            color: $vivi23--nav-fg-prim-color;
+
+            &:hover {
+                background-color: $vivi23--nav-highlight-color;
+                color: lighten($vivi23--nav-fg-prim-color, 20%);
+            }
+        }
+
+        .navbar-nav .open .dropdown-menu > li > a {
+            color: $vivi23--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $vivi23--nav-highlight-color;
+                color: $vivi23--nav-fg-prim-color;
+            }
+        }
+
+        .navbar-nav > li.active > a,
+        .navbar-nav > li.active > a:hover,
+        .navbar-nav > li.active > a:focus, {
+            background-color: $vivi23--nav-highlight-color;
+            color: lighten($vivi23--nav-fg-prim-color, 20%);
+        }
+    }
+
    /** Buttons **/
    // reset disabled button styling for btn-default
    .btn-default.disabled,
@ -261,7 +266,7 @@ $vivi23--highlight-color: #2882fa;
    }

    // filter widget
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        background-color: transparent !important;
        border-color: transparent !important;
        color: $vivi23--button-default-color !important;
--- a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
+++ b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
@ -61,66 +61,47 @@ $artcity--ter-highlight-color: #EDEDF0;

        .navbar-brand .icon-ascribe-logo {
            color: $artcity--nav-fg-prim-color;
+
+            &:focus,
            &:hover {
                color: darken($artcity--nav-fg-prim-color, 20%);
            }
        }
-
    }

-    .navbar-nav > li > a,
-    .navbar-nav > li > a:focus,
-    .navbar-nav > li > .active a,
-    .navbar-nav > li > .active a:focus {
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        color: $artcity--nav-fg-prim-color;
-    }

-    .navbar-nav > li > a:hover {
-        color: darken($artcity--nav-fg-prim-color, 20%);
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        background-color: $artcity--nav-bg-color;
-        border-bottom-color: $artcity--nav-fg-prim-color;
-        color: $artcity--nav-fg-prim-color;
-    }
-
-    .navbar-nav > .open > a,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > li > a {
-        color: $artcity--nav-fg-prim-color;
-        background-color: $artcity--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus,
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($artcity--nav-fg-prim-color, 20%);
-        background-color: $artcity--nav-highlight-color;
-    }
-
-    .navbar-collapse.collapsing,
-    .navbar-collapse.collapse.in {
-        background-color: $artcity--nav-bg-color;
-
-        .navbar-nav > .open > a,
-        .navbar-nav > .active > a {
-            background-color: $artcity--nav-highlight-color;
+        &:focus,
+        &:hover {
+            color: darken($artcity--nav-fg-prim-color, 20%);
        }
    }

-    .navbar-collapse.collapsing li a,
-    .navbar-collapse.collapse.in li a {
+    .navbar-nav > li.active > a {
+        background-color: $artcity--nav-bg-color;
+        border-bottom-color: $artcity--nav-fg-prim-color;
        color: $artcity--nav-fg-prim-color;
+
+        &:focus,
+        &:hover {
+            color: $artcity--nav-fg-prim-color;
+        }
    }
-    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
-        color: lighten($artcity--nav-fg-prim-color, 20%);
-        background-color: $artcity--nav-highlight-color;
+
+    .navbar-nav .open {
+        .dropdown-toggle.btn,
+        .dropdown-menu a {
+            color: $artcity--nav-fg-prim-color;
+            background-color: $artcity--nav-bg-color;
+
+            &:focus,
+            &:hover {
+                background-color: $artcity--nav-highlight-color;
+                color: lighten($artcity--nav-fg-prim-color, 20%);
+            }
+        }
    }

    .navbar-toggle {
@ -129,15 +110,15 @@ $artcity--ter-highlight-color: #EDEDF0;
        .icon-bar {
            background-color: $artcity--highlight-color;
        }
-    }

-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        border-color: lighten($artcity--highlight-color, 10%);
-        background-color: $artcity--nav-fg-prim-color;
+        &:focus,
+        &:hover {
+            background-color: $artcity--nav-fg-prim-color;
+            border-color: lighten($artcity--highlight-color, 10%);

-        .icon-bar {
-            background-color: lighten($artcity--highlight-color, 10%);
+            .icon-bar {
+                background-color: lighten($artcity--highlight-color, 10%);
+            }
        }
    }

@ -157,6 +138,41 @@ $artcity--ter-highlight-color: #EDEDF0;
        }
    }

+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            background-color: $artcity--nav-bg-color;
+        }
+
+        .navbar-nav .dropdown .dropdown-toggle.btn,
+        .navbar-nav > li > a {
+            color: $artcity--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $artcity--nav-highlight-color;
+                color: lighten($artcity--nav-fg-prim-color, 20%);
+            }
+        }
+
+        .navbar-nav .open .dropdown-menu > li > a {
+            color: $artcity--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $artcity--nav-highlight-color;
+                color: $artcity--nav-fg-prim-color;
+            }
+        }
+
+        .navbar-nav > li.active > a,
+        .navbar-nav > li.active > a:hover,
+        .navbar-nav > li.active > a:focus, {
+            background-color: $artcity--nav-highlight-color;
+            color: lighten($artcity--nav-fg-prim-color, 20%);
+        }
+    }
+
    /** Buttons **/
    // reset disabled button styling for btn-default
    .btn-default.disabled,
@ -286,7 +302,7 @@ $artcity--ter-highlight-color: #EDEDF0;
    }

    // filter widget
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        background-color: transparent !important;
        border-color: transparent !important;
        color: $artcity--button-default-color !important;
--- a/sass/whitelabel/wallet/cc/cc_custom_style.scss
+++ b/sass/whitelabel/wallet/cc/cc_custom_style.scss
@ -8,50 +8,64 @@ $cc--button-color: $cc--nav-fg-prim-color;
        box-shadow: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
+
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        color: $cc--nav-fg-prim-color;
        background-color: $cc--nav-bg-color;
+
+        &:focus,
+        &:hover {
+            color: lighten($cc--nav-fg-prim-color, 40%);
+        }
    }
-    .navbar-nav > li > a:hover {
-        color: lighten($cc--nav-fg-prim-color, 40%);
-    }
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
+
+    .navbar-nav > li.active > a {
        color: $cc--nav-fg-prim-color;
        border-bottom-color: $cc--nav-fg-prim-color;
        background-color: $cc--nav-bg-color;
+
+        &:focus,
+        &:hover {
+            color: $cc--nav-fg-prim-color;
+        }
    }
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($cc--nav-fg-prim-color, 40%);
-        background-color: $cc--nav-bg-color;
-    }
-    .navbar-nav > .open > a,
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        color: lighten($cc--nav-fg-prim-color, 40%);
-        background-color: $cc--nav-bg-color;
+
+    .navbar-nav .open {
+        .dropdown-toggle.btn {
+            background-color: $cc--nav-bg-color;
+            color: lighten($cc--nav-fg-prim-color, 40%);
+
+            &:focus,
+            &:hover {
+                background-color: $cc--nav-bg-color;
+                color: lighten($cc--nav-fg-prim-color, 40%);
+            }
+        }
+
+        .dropdown-menu a {
+            color: $cc--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                color: lighten($cc--nav-fg-prim-color, 40%);
+            }
+        }
    }
+
    .dropdown-menu {
        background-color: $cc--nav-bg-color;
    }

-    .dropdown-menu > li > a {
-        color: $cc--nav-fg-prim-color;
-    }
+    .navbar-toggle {
+        .icon-bar {
+            background-color: $cc--nav-fg-prim-color;
+        }

-    .navbar-toggle .icon-bar {
-        background-color: $cc--nav-fg-prim-color;
-    }
-
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: $cc--nav-bg-color;
+        &:focus,
+        &:hover {
+            background-color: $cc--nav-bg-color;
+        }
    }
 }

@ -111,7 +125,7 @@ $cc--button-color: $cc--nav-fg-prim-color;
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
 .client--cc {
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        color: $cc--button-color !important;
        background-color: transparent !important;
        border-color: transparent !important;
--- a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
+++ b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
@ -9,50 +9,65 @@ $cyland--button-sec-color: #515151;
        box-shadow: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
+
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        color: $cyland--nav-fg-prim-color;
        background-color: $cyland--nav-bg-color;
+
+        &:focus,
+        &:hover {
+            color: lighten($cyland--nav-fg-prim-color, 40%);
+        }
    }
-    .navbar-nav > li > a:hover {
-        color: lighten($cyland--nav-fg-prim-color, 40%);
-    }
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
+
+    .navbar-nav > li.active > a {
        color: $cyland--nav-fg-prim-color;
        border-bottom-color: $cyland--nav-fg-prim-color;
        background-color: $cyland--nav-bg-color;
+
+        &:focus,
+        &:hover {
+            color: $cyland--nav-fg-prim-color;
+        }
    }
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($cyland--nav-fg-prim-color, 40%);
-        background-color: $cyland--nav-bg-color;
-    }
-    .navbar-nav > .open > a,
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        color: lighten($cyland--nav-fg-prim-color, 40%);
-        background-color: $cyland--nav-bg-color;
+
+    .navbar-nav .open {
+        .dropdown-toggle.btn {
+            background-color: $cyland--nav-bg-color;
+            color: lighten($cyland--nav-fg-prim-color, 40%);
+
+            &:focus,
+            &:hover {
+                background-color: $cyland--nav-bg-color;
+                color: lighten($cyland--nav-fg-prim-color, 40%);
+            }
+        }
+
+        .dropdown-menu a {
+            color: $cc--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $cyland--nav-bg-color;
+                color: lighten($cc--nav-fg-prim-color, 40%);
+            }
+        }
    }
+
    .dropdown-menu {
        background-color: $cyland--nav-bg-color;
    }

-    .dropdown-menu > li > a {
-        color: $cyland--nav-fg-prim-color;
-    }
+    .navbar-toggle {
+        .icon-bar {
+            background-color: $cyland--nav-fg-prim-color;
+        }

-    .navbar-toggle .icon-bar {
-        background-color: $cyland--nav-fg-prim-color;
-    }
-
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: $cyland--nav-bg-color;
+        &:focus,
+        &:hover {
+            background-color: $cyland--nav-bg-color;
+        }
    }
 }

@ -64,7 +79,7 @@ $cyland--button-sec-color: #515151;
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
 .client--cyland {
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        color: $cyland--button-color !important;
        background-color: transparent !important;
        border-color: transparent !important;
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@ -23,91 +23,77 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
    background-color: $ikono--bg-color;
    box-shadow: none;

-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
-        text-transform: uppercase;
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        border-bottom-color: transparent;
+        color: white;
        font-size: 14px;
        font-weight: bold;
    }

-    .navbar-nav > li > a {
-        color: white;
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        color: black;
-        border-bottom-color: transparent;
-        background-color: transparent;
-        font-weight: bold;
-    }
-
-    .navbar-nav > .active {
+    .navbar-nav > li.active {
        background-color: white;
+
+        & > a {
+            color: black;
+            background-color: transparent;
+            border-bottom-color: transparent;
+            font-weight: bold;
+        }
    }

-    .navbar-toggle .icon-bar {
-        background-color: white;
-    }
+    .navbar-nav .open {
+        .dropdown-toggle.btn {
+            background-color: $ikono--bg-color;
+            color: white;

-    .navbar-nav > .open > a,
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        color: white;
-        background-color: $ikono--bg-color;
+            &:focus,
+            &:hover {
+                background-color: $ikono--bg-color;
+                color: white;
+            }
+        }
+
+        .dropdown-menu a {
+            color: white;
+
+            &:focus,
+            &:hover {
+                background-color: white;
+                color:  $ikono--bg-color;
+            }
+        }
    }

    .dropdown-menu {
        background-color: $ikono--bg-color;
    }

-    .dropdown-menu > li > a {
-        color:  white;
-        font-weight: bold;
-    }
-
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color:  $ikono--bg-color;
-        background-color: white;
-    }
-
-    .notification-menu {
-        .dropdown-menu {
+    .navbar-toggle {
+        .icon-bar {
            background-color: white;
-            li:hover {
-                background-color: rgba($ikono--button-color, 0.1);
-            }
+        }
+
+        &:focus,
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
        }
    }

-    .img-brand.navbar-brand {
-        width: 0;
-        height: 0;
-        padding-right: 120px;
-        padding-bottom: 36px;
-        padding-left: 30px;
-        background-image: url($ikono--logo);
-        background-color: transparent;
-        background-position: center 4px;
-        background-repeat: no-repeat;
-        background-size: 150px;
-        margin-bottom: 0;
-        position: relative;
+    .notification-menu .dropdown-menu {
+        background-color: white;
+
+        li:hover {
+            background-color: rgba($ikono--button-color, 0.1);
+        }
    }

-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: rgba(255, 255, 255, 0.1);
+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        padding-bottom: 5px;
    }
 }

-
 .client--ikonotv {
    .route--landing,
    .route--login,
@ -371,7 +357,7 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
 .client--ikonotv {
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        color: $ikono--button-color !important;
        background-color: transparent !important;
        border-color: transparent !important;
--- a/sass/whitelabel/wallet/market/market_custom_style.scss
+++ b/sass/whitelabel/wallet/market/market_custom_style.scss
@ -58,66 +58,47 @@ $market--highlight-color: #2882fa;

        .navbar-brand .icon-ascribe-logo {
            color: $market--nav-fg-prim-color;
+
+            &:focus,
            &:hover {
                color: darken($market--nav-fg-prim-color, 20%);
            }
        }
-
    }

-    .navbar-nav > li > a,
-    .navbar-nav > li > a:focus,
-    .navbar-nav > li > .active a,
-    .navbar-nav > li > .active a:focus {
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        color: $market--nav-fg-prim-color;
-    }

-    .navbar-nav > li > a:hover {
-        color: darken($market--nav-fg-prim-color, 20%);
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        background-color: $market--nav-bg-color;
-        border-bottom-color: $market--nav-fg-prim-color;
-        color: $market--nav-fg-prim-color;
-    }
-
-    .navbar-nav > .open > a,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > li > a {
-        color: $market--nav-fg-prim-color;
-        background-color: $market--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus,
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($market--nav-fg-prim-color, 20%);
-        background-color: $market--nav-highlight-color;
-    }
-
-    .navbar-collapse.collapsing,
-    .navbar-collapse.collapse.in {
-        background-color: $market--nav-bg-color;
-
-        .navbar-nav > .open > a,
-        .navbar-nav > .active > a {
-            background-color: $market--nav-highlight-color;
+        &:focus,
+        &:hover {
+            color: darken($market--nav-fg-prim-color, 20%);
        }
    }

-    .navbar-collapse.collapsing li a,
-    .navbar-collapse.collapse.in li a {
+    .navbar-nav > li.active > a {
+        background-color: $market--nav-bg-color;
+        border-bottom-color: $market--nav-fg-prim-color;
        color: $market--nav-fg-prim-color;
+
+        &:focus,
+        &:hover {
+            color: $market--nav-fg-prim-color;
+        }
    }
-    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
-        color: lighten($market--nav-fg-prim-color, 20%);
-        background-color: $market--nav-highlight-color;
+
+    .navbar-nav .open {
+        .dropdown-toggle.btn,
+        .dropdown-menu a {
+            background-color: $market--nav-bg-color;
+            color: $market--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $market--nav-highlight-color;
+                color: lighten($market--nav-fg-prim-color, 20%);
+            }
+        }
    }

    .navbar-toggle {
@ -126,15 +107,15 @@ $market--highlight-color: #2882fa;
        .icon-bar {
            background-color: $market--highlight-color;
        }
-    }

-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        border-color: lighten($market--highlight-color, 10%);
-        background-color: $market--nav-fg-prim-color;
+        &:focus,
+        &:hover {
+            border-color: lighten($market--highlight-color, 10%);
+            background-color: $market--nav-fg-prim-color;

-        .icon-bar {
-            background-color: lighten($market--highlight-color, 10%);
+            .icon-bar {
+                background-color: lighten($market--highlight-color, 10%);
+            }
        }
    }

@ -154,6 +135,41 @@ $market--highlight-color: #2882fa;
        }
    }

+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            background-color: $market--nav-bg-color;
+        }
+
+        .navbar-nav .dropdown .dropdown-toggle.btn,
+        .navbar-nav > li > a {
+            color: $market--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $market--nav-highlight-color;
+                color: lighten($market--nav-fg-prim-color, 20%);
+            }
+        }
+
+        .navbar-nav .open .dropdown-menu > li > a {
+            color: $market--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $market--nav-highlight-color;
+                color: $market--nav-fg-prim-color;
+            }
+        }
+
+        .navbar-nav > li.active > a,
+        .navbar-nav > li.active > a:hover,
+        .navbar-nav > li.active > a:focus, {
+            background-color: $market--nav-highlight-color;
+            color: lighten($market--nav-fg-prim-color, 20%);
+        }
+    }
+
    /** Buttons **/
    // reset disabled button styling for btn-default
    .btn-default.disabled,
@ -271,7 +287,7 @@ $market--highlight-color: #2882fa;
    }

    // filter widget
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        background-color: transparent !important;
        border-color: transparent !important;
        color: $market--button-default-color !important;
--- a/sass/whitelabel/wallet/polline/polline_custom_style.scss
+++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss
@ -53,76 +53,56 @@ $polline--highlight-color: #2882fa;
    .navbar-default {
        background-color: $polline--bg-color;

-        .navbar-brand .img-brand {
-            height: 100%;
-        }
-
        .navbar-brand {
            padding: 0 5px 0 15px;
-        }

-        .navbar-brand .icon-ascribe-logo {
-            color: $polline--nav-fg-prim-color;
-            &:hover {
-                color: darken($polline--nav-fg-prim-color, 20%);
+            .img-brand {
+                height: 100%;
+            }
+
+            .icon-ascribe-logo {
+                color: $polline--nav-fg-prim-color;
+
+                &:focus,
+                &:hover {
+                    color: darken($polline--nav-fg-prim-color, 20%);
+                }
            }
        }
-
    }

-    .navbar-nav > li > a,
-    .navbar-nav > li > a:focus,
-    .navbar-nav > li > .active a,
-    .navbar-nav > li > .active a:focus {
+    .navbar-nav .dropdown .dropdown-toggle.btn,
+    .navbar-nav > li > a {
        color: $polline--nav-fg-prim-color;
+
+        &:focus,
+        &:hover {
+            color: darken($polline--nav-fg-prim-color, 20%);
+        }
    }

-    .navbar-nav > li > a:hover {
-        color: darken($polline--nav-fg-prim-color, 20%);
-    }
-
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
+    .navbar-nav > li.active > a {
        background-color: $polline--nav-bg-color;
        border-bottom-color: $polline--nav-fg-prim-color;
        color: $polline--nav-fg-prim-color;
-    }

-    .navbar-nav > .open > a,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > li > a {
-        color: $polline--nav-fg-prim-color;
-        background-color: $polline--nav-bg-color;
-    }
-
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus,
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($polline--nav-fg-prim-color, 20%);
-        background-color: $polline--nav-highlight-color;
-    }
-
-    .navbar-collapse.collapsing,
-    .navbar-collapse.collapse.in {
-        background-color: $polline--nav-bg-color;
-
-        .navbar-nav > .open > a,
-        .navbar-nav > .active > a {
-            background-color: $polline--nav-highlight-color;
+        &:focus,
+        &:hover {
+            color: $polline--nav-fg-prim-color;
        }
    }

-    .navbar-collapse.collapsing li a,
-    .navbar-collapse.collapse.in li a {
-        color: $polline--nav-fg-prim-color;
-    }
-    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
-        color: lighten($polline--nav-fg-prim-color, 20%);
-        background-color: $polline--nav-highlight-color;
+    .navbar-nav .open {
+        .dropdown-toggle.btn,
+        .dropdown-menu a {
+            color: $polline--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $polline--nav-highlight-color;
+                color: lighten($polline--nav-fg-prim-color, 20%);
+            }
+        }
    }

    .navbar-toggle {
@ -159,6 +139,41 @@ $polline--highlight-color: #2882fa;
        }
    }

+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            background-color: $polline--nav-bg-color;
+        }
+
+        .navbar-nav .dropdown .dropdown-toggle.btn,
+        .navbar-nav > li > a {
+            color: $polline--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $polline--nav-highlight-color;
+                color: lighten($polline--nav-fg-prim-color, 20%);
+            }
+        }
+
+        .navbar-nav .open .dropdown-menu > li > a {
+            color: $polline--nav-fg-prim-color;
+
+            &:focus,
+            &:hover {
+                background-color: $polline--nav-highlight-color;
+                color: $polline--nav-fg-prim-color;
+            }
+        }
+
+        .navbar-nav > li.active > a,
+        .navbar-nav > li.active > a:hover,
+        .navbar-nav > li.active > a:focus, {
+            background-color: $polline--nav-highlight-color;
+            color: lighten($polline--nav-fg-prim-color, 20%);
+        }
+    }
+
    /** Buttons **/
    // reset disabled button styling for btn-default
    .btn-default.disabled,
@ -276,7 +291,7 @@ $polline--highlight-color: #2882fa;
    }

    // filter widget
-    .ascribe-piece-list-toolbar-widget button {
+    .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
        background-color: transparent !important;
        border-color: transparent !important;
        color: $polline--button-default-color !important;
--- a/test/gemini/tests/main/authenticated.js
+++ b/test/gemini/tests/main/authenticated.js
@ -33,7 +33,7 @@ gemini.suite('Authenticated', (suite) => {
            });
    });

-    gemini.suite('Authenticated', (authenticatedSuite) => {
+    gemini.suite('Authenticated', () => {
        gemini.suite('Header-desktop', (headerSuite) => {
            headerSuite
                .setCaptureElements('nav.navbar .container')
@ -48,17 +48,38 @@ gemini.suite('Authenticated', (suite) => {

            gemini.suite('User dropdown', (headerUserSuite) => {
                headerUserSuite
-                    .setCaptureElements('#nav-route-user-dropdown ~ .dropdown-menu')
+                    .setCaptureElements('#nav-route-user-dropdown-container .dropdown-menu')
                    .capture('expanded user dropdown', (actions, find) => {
                        actions.click(find('#nav-route-user-dropdown'));
+
+                        // React-bootstrap's dropdown buttons are wrapped around list items when they're in a navigation
+                        // context, so we can't use a simple sibling selector here to capture the dropdown menu. Instead,
+                        // we'll manually add an id to the dropdown container to allow us to select it.
+                        // eslint-disable-next-line prefer-arrow-callback
+                        actions.executeJS(function addIdToUserDropdownContainer(window) {
+                            /* eslint-disable no-var, prefer-template */
+                            var userDropdownButtonSelector = '#nav-route-user-dropdown';
+                            var userDropdownButton = window.document.querySelector(userDropdownButtonSelector);
+
+                            var parentEl = userDropdownButton.parentElement;
+                            while (parentEl && parentEl.className.split(' ').indexOf('dropdown') === -1) {
+                                parentEl = parentEl.parentElement;
+                            }
+
+                            if (parentEl) {
+                                parentEl.id = 'nav-route-user-dropdown-container';
+                            }
+                            /* eslint-enable no-var */
+                        });
                    });
            });

            gemini.suite('Notification dropdown', (headerNotificationSuite) => {
                headerNotificationSuite
-                    .setCaptureElements('#header-notification-dropdown ~ .dropdown-menu')
+                    .setCaptureElements('.notification-menu .dropdown-menu')
                    .capture('expanded notifications dropdown', (actions, find) => {
                        actions.click(find('#header-notification-dropdown'));
+                        actions.waitForElementToShow('.notification-menu .dropdown-menu', TIMEOUTS.SHORT);
                    });
            });
        });
@ -110,7 +131,8 @@ gemini.suite('Authenticated', (suite) => {
                collectionPlaceholderSuite
                    .setCaptureElements('.ascribe-accordion-list-placeholder')
                    .capture('collection empty search', (actions, find) => {
-                        actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result');
+                        actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'),
+                                         'no search result');
                        actions.waitForElementToShow('.ascribe-accordion-list-placeholder', TIMEOUTS.NORMAL);
                    });
            });
@ -136,7 +158,7 @@ gemini.suite('Authenticated', (suite) => {
                .capture('piece list toolbar search filled', (actions, find) => {
                    actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
                    actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search',
-                                                 TIMEOUTS.NORMAL);
+                                                 TIMEOUTS.LONG);
                });

            gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
@ -147,7 +169,8 @@ gemini.suite('Authenticated', (suite) => {
                        actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));

                        // Wait as the dropdown screenshot still includes the collection in the background
-                        actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+                        actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)',
+                                                     TIMEOUTS.NORMAL);
                    });
            });

@ -159,7 +182,8 @@ gemini.suite('Authenticated', (suite) => {
                        actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));

                        // Wait as the dropdown screenshot still includes the collection in the background
-                        actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+                        actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)',
+                                                     TIMEOUTS.NORMAL);
                    });
            });
        });
--- a/test/gemini/tests/main/detail.js
+++ b/test/gemini/tests/main/detail.js
@ -62,7 +62,6 @@ gemini.suite('Authenticated work detail', (suite) => {
            .setUrl('/login')
            .ignoreElements('.ascribe-body')
            .capture('logged in', (actions, find) => {
-                console.log('logging in');
                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
@ -83,7 +82,6 @@ gemini.suite('Authenticated work detail', (suite) => {
            });

        gemini.suite('Authorized piece', (authorizedPieceSuite) => {
-            console.log('authorized piece');
            authorizedPieceSuite
                .setUrl(pieceUrl)
                .capture('authorized piece');
@ -99,7 +97,6 @@ gemini.suite('Authenticated work detail', (suite) => {
            detailActionButtonSuite
                .setUrl(editionUrl)
                .capture('hover on action button', (actions, find) => {
-                    console.log('hover on action button');
                    actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default'));
                })
                .capture('hover on delete button', (actions, find) => {
@ -147,7 +144,6 @@ gemini.suite('Authenticated work detail', (suite) => {
            .setUrl('/logout')
            .ignoreElements('.ascribe-body')
            .before((actions) => {
-                console.log('before log out');
                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
            })
            .capture('logout', (actions) => {