-FootstampIcon

Color and size adjustment.

src/client/js/components/FootstampIcon.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 const FootstampIcon = () => (
   <svg
-    id="レイヤー_1"
-    data-name="レイヤー 1"
     xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
     viewBox="0 0 16 16"
   >
     <path d="M7.34,8,3.31,9a1.83,1.83,0,0,1-1.24-.08A1.28,1.28,0,0,1,1.34,8a3.24,3.24,0,0,1,.2-1.82A6.06,6.06,0,0,1,2.6,4.35h0a2.56,2.56,0,0,1,3.34-.77A5.65,5.65,0,0,1,7.69,4.73a3.23,3.23,0,0,1,1,1.53A1.29,1.29,0,0,1,8.42,7.4,1.86,1.86,0,0,1,7.34,8Zm-3-3.82a2.17,2.17,0,0,0-1.05.74h0a4.75,4.75,0,0,0-.89,1.52,2.37,2.37,0,0,0-.17,1.3.38.38,0,0,0,.23.31,1,1,0,0,0,.65,0l4-.94a1,1,0,0,0,.58-.3.39.39,0,0,0,.07-.38,2.32,2.32,0,0,0-.73-1.08,4.7,4.7,0,0,0-1.47-1A2.07,2.07,0,0,0,4.33,4.2Z" />

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

@@ -14,9 +14,9 @@ class SeenUserList extends React.Component {
   render() {
     const { pageContainer } = this.props;
     return (
-      <div className="dropdown text-right">
-        <button className="btn btn-link dropdown-toggle text-danger" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <FootstampIcon />
+      <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>
           <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,6 +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;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -424,3 +425,9 @@ mark.rbt-highlight-text {
 .bg-box {
   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);
+  }
+}