WIP: reorganize GrowiSubNavigation

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -91,28 +91,32 @@ const GrowiSubNavigation = (props) => {
         <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
       </div>
 
-      <div className="d-flex align-items-center">
-        { !isPageInTrash && (
-          /* Header Button */
-          <div className="mr-2">
-            <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
-          </div>
-        ) }
-        { !isPageInTrash && (
+      <div className="d-flex">
+        <div>
+          { !isPageInTrash && (
+            <div className="d-flex">
+              <span className="mr-2">
+                <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
+              </span>
+              <span className="mr-2">
+                <BookmarkButton pageId={pageId} crowi={appContainer} />
+              </span>
+            </div>
+          ) }
           <div>
-            <BookmarkButton pageId={pageId} crowi={appContainer} />
+            {/* View / Edit / HackMD button group */}
           </div>
-        ) }
+        </div>
 
         {/* Page Authors */}
-        <ul className="authors text-nowrap d-none d-lg-block d-edit-none">
+        <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none">
           { creator != null && (
-            <li>
+            <li className="pb-1">
               <PageCreator creator={creator} createdAt={createdAt} />
             </li>
           ) }
           { revisionAuthor != null && (
-            <li className="mt-1">
+            <li className="mt-1 pt-1 border-top">
               <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} />
             </li>
           ) }

src/client/js/components/Navbar/PageCreator.jsx

@@ -9,7 +9,7 @@ const PageCreator = (props) => {
   const { creator, createdAt, isCompactMode } = props;
   const creatInfo = isCompactMode
     ? (<div>Created at <span className="text-muted">{createdAt}</span></div>)
-    : (<div><div>Created by <a href={userPageRoot(creator)}>{creator.name}</a></div><div className="text-muted">{createdAt}</div></div>);
+    : (<div><div>Created by <a href={userPageRoot(creator)}>{creator.name}</a></div><div className="text-muted text-date">{createdAt}</div></div>);
   const pictureSize = isCompactMode ? 'xs' : 'sm';
 
   return (

src/client/js/components/Navbar/RevisionAuthor.jsx

@@ -9,7 +9,12 @@ const RevisionAuthor = (props) => {
   const { revisionAuthor, updatedAt, isCompactMode } = props;
   const updateInfo = isCompactMode
     ? (<div>Updated at <span className="text-muted">{updatedAt}</span></div>)
-    : (<div><div>Updated by  <a href={userPageRoot(revisionAuthor)}>{revisionAuthor.name}</a></div><div className="text-muted">{updatedAt}</div></div>);
+    : (
+      <div>
+        <div>Updated by <a href={userPageRoot(revisionAuthor)}>{revisionAuthor.name}</a></div>
+        <div className="text-muted text-date">{updatedAt}</div>
+      </div>
+    );
   const pictureSize = isCompactMode ? 'xs' : 'sm';
 
   return (

src/client/styles/scss/_subnav.scss

@@ -22,7 +22,7 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 
 .grw-subnavbar {
   min-height: 115px;
-  padding: 15px 30px;
+  padding: 10px 30px;
 
   &:hover {
     .btn-copy,
@@ -45,15 +45,27 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
     }
   }
 
+  .btn-like,
+  .btn-bookmark {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+
   ul.authors {
-    padding-left: 1.5em;
-    margin: 0;
+    padding: 0.7em 0 0.7em 1.5em;
+    margin-bottom: 0;
+    margin-left: 1em;
 
     li {
       font-size: 12px;
       list-style: none;
     }
 
+    .text-date {
+      font-size: 11px;
+    }
+
     .picture {
       width: 22px;
       height: 22px;

src/client/styles/scss/atoms/_buttons.scss

@@ -1,5 +1,7 @@
-.btn.btn-like,
-.btn.btn-bookmark {
+.btn.btn-outline-info.btn-like,
+.btn.btn-outline-warning.btn-bookmark {
+  color: $secondary;
+
   &.active,
   &:hover {
     // header buttons are always white for active
@@ -9,8 +11,6 @@
   &:not(:hover):not(.active) {
     background-color: transparent;
   }
-  width: 35px;
-  height: 35px;
 }
 
 .btn-copy,