Set color : btn-seen-user-list.

src/client/js/components/User/SeenUserList.jsx

@@ -15,8 +15,8 @@ class SeenUserList extends React.Component {
     const { pageContainer } = this.props;
     return (
       <div className="dropdown text-right ">
-        <button className="btn btn-danger dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <span className="mr-2"><FootstampIcon /></span>
+        <button className="btn btn-seen-user-list border-0 dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <span className="mr-2 svg footstamp-icon"><FootstampIcon /></span>
           <span className="seen-user-count">{pageContainer.state.sumOfSeenUsers}</span>
         </button>
         <span className="dropdown-menu dropdown-menu-right px-2 col user-list-content text-truncate text-muted">

src/client/styles/scss/theme/_apply-colors.scss

@@ -14,7 +14,7 @@ $bordercolor-nav-tabs: #dee2e6 !default;
 $bordercolor-nav-tabs-hover: #e9ecef #e9ecef $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: #495057 !default;
 $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
-$seen-user: #549c79;
+$color-seen-user: #549c79;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -430,8 +430,14 @@ mark.rbt-highlight-text {
   background-color: $bgcolor-global;
 }
 
-.btn-seen-user {
-  .btn {
-    @include button-variant(red, blue, darken(red, 7.5%), darken(blue, 10%), $bgcolor-sidebar-nav-item-active, $bgcolor-sidebar-nav-item-active);
+// een-user-list
+.btn.btn-seen-user-list {
+  @include button-outline-variant($color-seen-user, $color-seen-user, transparent, transparent);
+  &:not(:disabled):not(.disabled):not(:hover) {
+    background-color: transparent;
   }
 }
+
+.svg.footstamp-icon {
+  fill: $color-seen-user !important;
+}