125692 change mr-3 to mr-2

apps/app/src/components/PageList/PageListItemS.module.scss

@@ -1,13 +1,4 @@
-.page-list-items :global {
-  .page-title {
-    flex: 1;
-    line-height: 1.2;
-  }
-
-  .page-list-meta {
-    > span {
-      margin-right: 0.3rem;
-    }
-  }
-
+.page-title {
+  flex: 1;
+  line-height: 1.2;
 }

apps/app/src/components/PageList/PageListItemS.tsx

@@ -35,15 +35,15 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
   return (
     <>
       {isNarrowView ? (
-        <div className={`d-flex align-items-center ${styles['page-list-items']}`}>
+        <div className="d-flex align-items-center">
           <UserPicture user={page.lastUpdateUser} noLink={noLink} />
           <Clamp lines={2}>
-            <div className={`mx-2 page-title ${noLink ? 'text-break' : ''}`}>
+            <div className={`mx-2 ${styles['page-title']} ${noLink ? 'text-break' : ''}`}>
               {pagePathElement}
             </div>
           </Clamp>
           <span className="ml-2">
-            <PageListMeta page={page} />
+            <PageListMeta page={page} shouldSpaceOutIcon />
           </span>
         </div>
       ) : (

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

@@ -45,7 +45,7 @@ const SeenUsersCount = (props: SeenUsersCountProps): JSX.Element => {
   const strengthClass = `strength-${strengthLevel}`; // strength-{0, 1, 2, 3, 4}
 
   return (
-    <span className={`seen-users-count ${shouldSpaceOutIcon ? 'mr-3' : ''} ${strengthClass}`}>
+    <span className={`seen-users-count ${shouldSpaceOutIcon ? 'mr-2' : ''} ${strengthClass}`}>
       <i className="footstamp-icon"><FootstampIcon /></i>
       {count}
     </span>
@@ -69,40 +69,40 @@ export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) =>
   // top check
   let topLabel;
   if (isTopPage(page.path)) {
-    topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''} top-label`}>TOP</span>;
+    topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-1' : ''} top-label`}>TOP</span>;
   }
 
   // template check
   let templateLabel;
   if (checkTemplatePath(page.path)) {
-    templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''}`}>TMPL</span>;
+    templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-2' : ''}`}>TMPL</span>;
   }
 
   let commentCount;
   if (page.commentCount > 0) {
-    commentCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-bubble" />{page.commentCount}</span>;
+    commentCount = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="icon-bubble" />{page.commentCount}</span>;
   }
 
   let likerCount;
   if (props.likerCount != null && props.likerCount > 0) {
-    likerCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-heart-o" />{props.likerCount}</span>;
+    likerCount = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="fa fa-heart-o" />{props.likerCount}</span>;
   }
 
   let locked;
   if (page.grant !== 1) {
-    locked = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-lock" /></span>;
+    locked = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="icon-lock" /></span>;
   }
 
   let bookmarkCount;
   if (props.bookmarkCount != null && props.bookmarkCount > 0) {
-    bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-bookmark-o" />{props.bookmarkCount}</span>;
+    bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="fa fa-bookmark-o" />{props.bookmarkCount}</span>;
   }
 
   return (
     <span className="page-list-meta">
       {topLabel}
       {templateLabel}
-      <SeenUsersCount count={page.seenUsers.length} basisViewersCount={basisViewersCount} />
+      <SeenUsersCount count={page.seenUsers.length} basisViewersCount={basisViewersCount} shouldSpaceOutIcon />
       {commentCount}
       {likerCount}
       {locked}