From 9ffa834ec03786d01e03830b92b4237e50d74fd4 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 8 Jun 2016 17:09:06 +0200
Subject: [PATCH 1/6] Fix Navbar not showing mobile toggle

---
 js/components/header.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/components/header.js b/js/components/header.js
index 642c3951..c5f7ef61 100644
--- 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}>

From 4fd0e0d99c90d6d420f0be9d58dafb8077fe01c2 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 8 Jun 2016 17:43:07 +0200
Subject: [PATCH 2/6] Fix Navbar and notification list styling

---
 js/components/header_notifications.js         |   5 +-
 sass/ascribe_custom_style.scss                | 126 ----------------
 sass/ascribe_navbar.scss                      | 139 +++++++++++++++++-
 sass/ascribe_notification_list.scss           |  29 ++--
 .../wallet/ikonotv/ikonotv_custom_style.scss  |  15 --
 5 files changed, 152 insertions(+), 162 deletions(-)

diff --git a/js/components/header_notifications.js b/js/components/header_notifications.js
index aed0e9da..5e94f63b 100644
--- 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>
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index e0c8c9e9..d6e4872d 100644
--- 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;
diff --git a/sass/ascribe_navbar.scss b/sass/ascribe_navbar.scss
index 25dff374..2b1c8c55 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/sass/ascribe_notification_list.scss b/sass/ascribe_notification_list.scss
index b5f46a4c..dbad7ad4 100644
--- 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;
     }
 }
 
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 9d5dc143..5db377f1 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -86,21 +86,6 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
         }
     }
 
-    .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;
-    }
-
     .navbar-toggle:hover,
     .navbar-toggle:focus {
         background-color: rgba(255, 255, 255, 0.1);

From 1cc047d060f5666ae20c649f42ae1a0f038b2450 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 8 Jun 2016 18:06:16 +0200
Subject: [PATCH 3/6] Fix PieceListToolbar styling

---
 .../piece_list_toolbar.js                     | 45 ++++++++---------
 js/components/piece_list.js                   |  1 -
 sass/ascribe_custom_style.scss                |  8 ---
 sass/ascribe_piece_list_toolbar.scss          | 50 +++++++------------
 4 files changed, 38 insertions(+), 66 deletions(-)

diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index bcc15603..b95a16ff 100644
--- 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>
         );
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 114585d7..98e3252d 100644
--- 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}
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index d6e4872d..1312739d 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -241,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;
diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss
index a83447fb..099afe07 100644
--- 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;
     }
 }

From 9d89b0b7cab94a627c0d9bc81a0b258e57d1da01 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 8 Jun 2016 18:38:39 +0200
Subject: [PATCH 4/6] Fix 23vivi's colors

---
 sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index b37b3f67..57fa74b5 100644
--- 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 {

From 4a6d601dcbc3f419a3c7dc95ca9a9aea6f95ed15 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 9 Jun 2016 11:09:43 +0200
Subject: [PATCH 5/6] Fix whitelabel styling after updates

---
 .../wallet/23vivi/23vivi_custom_style.scss    | 123 +++++++++--------
 .../wallet/artcity/artcity_custom_style.scss  | 126 ++++++++++--------
 .../whitelabel/wallet/cc/cc_custom_style.scss |  78 ++++++-----
 .../wallet/cyland/cyland_custom_style.scss    |  79 ++++++-----
 .../wallet/ikonotv/ikonotv_custom_style.scss  |  99 +++++++-------
 .../wallet/market/market_custom_style.scss    | 126 ++++++++++--------
 .../wallet/polline/polline_custom_style.scss  | 123 +++++++++--------
 7 files changed, 418 insertions(+), 336 deletions(-)

diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index 57fa74b5..2c91a6b8 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -53,69 +53,40 @@ $vivi23--highlight-color: #de2600;
     /** 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: #de2600;
         .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: #de2600;
         }
     }
 
+    /* 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: #de2600;
     }
 
     // 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;
diff --git a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
index 98d43bb4..935c8581 100644
--- 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;
diff --git a/sass/whitelabel/wallet/cc/cc_custom_style.scss b/sass/whitelabel/wallet/cc/cc_custom_style.scss
index f72ef677..6b3f4bef 100644
--- 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;
diff --git a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
index 6322ef5b..d594c43c 100644
--- 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;
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 5db377f1..e119dc79 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -23,76 +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);
         }
     }
 
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: rgba(255, 255, 255, 0.1);
+    .notification-menu .dropdown-menu {
+        background-color: white;
+
+        li:hover {
+            background-color: rgba($ikono--button-color, 0.1);
+        }
+    }
+
+    /* For mobile toggled menu */
+    @media (max-width: 767px) {
+        padding-bottom: 5px;
     }
 }
 
-
 .client--ikonotv {
     .route--landing,
     .route--login,
@@ -356,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;
diff --git a/sass/whitelabel/wallet/market/market_custom_style.scss b/sass/whitelabel/wallet/market/market_custom_style.scss
index 933bb4ab..850fcb27 100644
--- 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;
diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss
index a6a6a0f4..f62b7084 100644
--- 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;

From 9d13ca3bf7ee48180cfc81fdad842891c8491bb2 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 9 Jun 2016 13:31:14 +0200
Subject: [PATCH 6/6] Fix visual regression tests for react-bootstrap update

---
 test/gemini/tests/main/authenticated.js | 38 ++++++++++++++++++++-----
 test/gemini/tests/main/detail.js        |  4 ---
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
index 07162d75..638ac6ca 100644
--- 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);
                     });
             });
         });
diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
index 3d2b0e87..955ec204 100644
--- 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) => {