Merge pull request #4169 from weseek/imprv/GW-7037-align-footstamp-icon

aligned in a line

src/client/js/components/Sidebar/RecentChanges.jsx

@@ -83,17 +83,17 @@ class RecentChanges extends React.Component {
               <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
               {locked}
             </h5>
-            <div>
+            <div className="mt-1 mb-2">
               { tagElements }
             </div>
-            <div className="d-flex justify-content-between grw-recent-changes-item-lower mt-1">
-              <div>
-                <span className="footstamp-icon mr-1"><FootstampIcon /></span>
-                <span className="mr-2 grw-list-counts">{page.seenUsers.length}</span>
-                <i className="icon-bubble mr-1"></i>
-                <span className="mr-2 grw-list-counts">{page.commentCount}</span>
+            <div className="d-flex justify-content-between grw-recent-changes-item-lower pt-1">
+              <div className="d-flex">
+                <div className="footstamp-icon mr-1 d-inline-block"><FootstampIcon /></div>
+                <div className="mr-2 grw-list-counts d-inline-block">{page.seenUsers.length}</div>
+                <div className="icon-bubble mr-1 d-inline-block"></div>
+                <div className="mr-2 grw-list-counts d-inline-block">{page.commentCount}</div>
               </div>
-              <div className="small mt-auto">
+              <div className="grw-formatted-distance-date small mt-auto">
                 <FormattedDistanceDate id={page.id} date={page.updatedAt} />
               </div>
             </div>

src/client/styles/scss/_recent-changes.scss

@@ -1,17 +1,25 @@
 .list-group {
   .list-group-item {
+    .grw-recent-changes-item-lower {
+      height: 17.5px;
+    }
     .footstamp-icon {
       svg {
-        width: 13.92px;
-        height: 13.95px;
-        viewbox: 0 0 13.9 13.9;
+        width: 14px;
+        height: 14px;
+        transform: translateY(-3.5px);
       }
     }
 
     .grw-list-counts {
+      height: 14px;
       font-size: 12px;
     }
 
+    .grw-formatted-distance-date {
+      font-size: 10px;
+    }
+
     .icon-lock {
       font-size: 14px;
     }