change text-color when the button is hovered and active

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

@@ -188,16 +188,16 @@ const GrowiSubNavigation = (props) => {
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
           </div>
           <div className="mt-2">
-            <div className="btn-group" role="group" aria-label="three-stranded-button">
-              <button type="button" className="btn btn-outline-primary">
+            <div className="btn-group three-stranded-button" role="group " aria-label="three-stranded-button">
+              <button type="button" className="btn btn-outline-primary view-button">
                 <i className="icon-control-play icon-fw" />
                 { t('view') }
               </button>
-              <button type="button" className="btn btn-outline-primary">
+              <button type="button" className="btn btn-outline-primary edit-button">
                 <i className="icon-note icon-fw" />
                 { t('Edit') }
               </button>
-              <button type="button" className="btn btn-outline-primary">
+              <button type="button" className="btn btn-outline-primary hackmd-button">
                 <i className="fa fa-fw fa-file-text-o" />
                 { t('hackmd.hack_md') }
               </button>

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -201,6 +201,15 @@ ul.pagination {
  */
 .grw-subnav {
   background-color: $bgcolor-subnav;
+
+  .three-stranded-button {
+    .btn-outline-primary {
+      &:hover,
+      &:active {
+        color: $bgcolor-subnav;
+      }
+    }
+  }
 }
 
 .grw-subnav-fixed-container .grw-subnav {