adjust PageAccessoriesModalControl layout

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -19,7 +19,7 @@ const PageAccessoriesModalControl = (props) => {
   const { t, pageAccessoriesContainer, isGuestUserMode } = props;
 
   return (
-    <div className="grw-page-accessories-control d-flex align-items-end pb-1">
+    <div className="grw-page-accessories-control d-flex align-items-center pb-1">
       <button
         type="button"
         className="btn btn-link grw-btn-page-accessories"
@@ -66,6 +66,9 @@ const PageAccessoriesModalControl = (props) => {
           {t('Not available for guest')}
         </UncontrolledTooltip>
       )}
+
+      <span className="border-left grw-border-hr mx-1">&nbsp;</span>
+
       <SeenUserInfo />
     </div>
   );

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

@@ -20,7 +20,7 @@ const SeenUserInfo = (props) => {
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <div className="grw-seen-user-info ml-1 pl-1">
+    <div className="grw-seen-user-info">
       <Button id="po-seen-user" color="link" className="px-2">
         <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>

src/client/styles/scss/_page-accessories-control.scss

@@ -1,16 +1,22 @@
 .grw-page-accessories-control {
   flex-wrap: wrap;
   line-height: 1.25;
+  border-bottom: 1px solid transparent;
 
   .grw-btn-page-accessories {
-    width: 35px;
-    height: 35px;
+    padding: 0.375rem 0.5rem;
+    margin: 0 0.2rem;
+
     svg {
       width: 16px;
       height: 16px;
     }
   }
 
+  .grw-border-hr {
+    height: 25px;
+  }
+
   .seen-user-count {
     font-size: 12px;
     font-weight: bolder;