implemented so that the PageMangement will go to where it belongs

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

@@ -25,6 +25,8 @@ import RevisionAuthor from './RevisionAuthor';
 import DrawerToggler from './DrawerToggler';
 import UserPicture from '../User/UserPicture';
 
+import PageManagement from '../Page/PageManagement';
+
 
 // eslint-disable-next-line react/prop-types
 const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
@@ -196,6 +198,7 @@ const GrowiSubNavigation = (props) => {
         <div className="d-flex flex-column align-items-end justify-content-center">
           <div className="d-flex">
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
+            <PageManagement />
           </div>
           <div className="mt-2">
             <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />

src/client/js/components/Page/PageManagement.jsx

@@ -175,10 +175,10 @@ const PageManagement = (props) => {
       <>
         <button
           type="button"
-          className="btn-link nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret"
+          className="btn-link nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-icon-btn"
           data-toggle="dropdown"
         >
-          <i className="icon-options-vertical"></i>
+          <i className="icon-options"></i>
         </button>
       </>
     );
@@ -192,7 +192,7 @@ const PageManagement = (props) => {
           className="btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled"
           id="icon-options-guest-tltips"
         >
-          <i className="icon-options-vertical"></i>
+          <i className="icon-options"></i>
         </button>
         <UncontrolledTooltip placement="top" target="icon-options-guest-tltips">
           {t('Not available for guest')}

src/client/styles/scss/_page_management.scss

@@ -0,0 +1,4 @@
+// Dropdown icon
+.grw-icon-btn {
+  transition: 0.3s;
+}

src/client/styles/scss/style-app.scss

@@ -45,6 +45,7 @@
 @import 'page_list';
 @import 'page-path';
 @import 'page';
+@import 'page_management';
 @import 'page-presentation';
 @import 'search';
 @import 'shortcuts';

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

@@ -72,6 +72,7 @@ textarea.form-control {
   &:hover {
     color: $light;
     background-color: lighten($bgcolor-global, 15%);
+    border: none;
   }
 }
 

src/client/styles/scss/theme/antarctic.scss

@@ -119,6 +119,13 @@ html[dark] {
     }
   }
 
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
+
   .table {
     background-color: $themelight;
   }

src/client/styles/scss/theme/christmas.scss

@@ -189,4 +189,11 @@ html[dark] {
       @include three-stranded-button(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }

src/client/styles/scss/theme/default.scss

@@ -110,6 +110,13 @@ html[light] {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }
 
 //== Dark Mode

src/client/styles/scss/theme/future.scss

@@ -96,6 +96,13 @@ html[dark] {
     }
   }
 
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
+
   // headers
   @for $i from 1 through 6 {
     h#{$i} {

src/client/styles/scss/theme/halloween.scss

@@ -114,6 +114,13 @@ html[dark] {
     }
   }
 
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
+
   // Table
   .table {
     color: $color-global;

src/client/styles/scss/theme/island.scss

@@ -115,4 +115,11 @@ html[dark] {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }

src/client/styles/scss/theme/kibela.scss

@@ -108,4 +108,11 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }

src/client/styles/scss/theme/mono-blue.scss

@@ -94,6 +94,13 @@ html[light] {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }
 
 html[dark] {
@@ -202,4 +209,11 @@ html[dark] {
       @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }

src/client/styles/scss/theme/nature.scss

@@ -117,4 +117,11 @@ html[dark] {
       @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }

src/client/styles/scss/theme/spring.scss

@@ -100,6 +100,13 @@ html[dark] {
     }
   }
 
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
+
   .growi:not(.login-page) {
     // add background-image
     #page-wrapper,

src/client/styles/scss/theme/wood.scss

@@ -167,4 +167,11 @@ html[dark] {
       @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
     }
   }
+
+  // Dropdown icon
+  .grw-icon-btn:hover,
+  .grw-icon-btn:focus {
+    // Wrote !important to override bg-transparent styles
+    background-color: rgba($color-link, 0.15) !important;
+  }
 }

src/server/views/widget/page_tabs.html

@@ -47,7 +47,7 @@
   {# to place right side #}
   <div class="mr-auto"></div>
 
-  <!-- icon-options-vertical -->
+  <!-- icon-options -->
   {% if !isTrashPage() %}
     <li id="page-management" class="nav-item dropdown d-edit-none"></li>
   {% endif %}