77804 change footstamp's color and margin

packages/app/src/styles/_search.scss

@@ -194,6 +194,12 @@
       margin: 0 10px 0 0;
       vertical-align: middle;
     }
+
+    .page-list-meta {
+      .footstamp-icon {
+        margin-right: 2px;
+      }
+    }
   }
 
   .search-result-content {

packages/app/src/styles/theme/_apply-colors.scss

@@ -19,6 +19,7 @@ $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
 $bordercolor-search-item-left-active: $primary;
 $bgcolor-search-item-active: lighten($bordercolor-search-item-left-active, 76%);
+$svg-fill-color: #3f474e;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -600,6 +601,11 @@ body.pathname-sidebar {
           }
         }
       }
+      .page-list-meta {
+        svg {
+          fill: $svg-fill-color;
+        }
+      }
     }
   }
 }

packages/ui/src/components/PagePath/PageListMeta.jsx

@@ -39,8 +39,13 @@ export class PageListMeta extends React.Component {
     }
 
     let footprintCount;
-    if (true) {
-      footprintCount = <span className="mr-1 footstamp-icon"><FootstampIcon />10</span>;
+    if (page.seenUsers != null && page.seenUsers.length >= 0) {
+      footprintCount = (
+        <>
+          <span className="footstamp-icon"><FootstampIcon /></span>
+          {page.seenUsers.length}
+        </>
+      );
     }
 
     return (