refactor subnav style

packages/app/src/components/Navbar/PageEditorModeManager.jsx

@@ -65,7 +65,7 @@ function PageEditorModeManager(props) {
   return (
     <>
       <div
-        className={`btn-group grw-page-editor-mode-manager ${styles['grw-subnav']}`}
+        className={`btn-group grw-page-editor-mode-manager ${styles['grw-page-editor-mode-manager']}`}
         role="group"
         aria-label="page-editor-mode-manager"
         id="grw-page-editor-mode-manager"

packages/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -2,31 +2,33 @@
 @use '~/styles/bootstrap/init' as bs;
 @use '~/styles/mixins';
 
-.grw-page-editor-mode-manager .btn {
-  width: 70px;
-  white-space: nowrap;
+.grw-page-editor-mode-manager :global {
+  .btn {
+    width: 70px;
+    white-space: nowrap;
 
-  @include mixins.border-vertical('before', 70%, 1, true);
+    @include mixins.border-vertical('before', 70%, 1, true);
 
-  &.view-button,
-  &.edit-button {
-    line-height: 1.2rem;
-    .grw-page-editor-mode-manager-icon {
-      @include bs.media-breakpoint-down(sm) {
-        font-size: 1.2rem;
+    &.view-button,
+    &.edit-button {
+      line-height: 1.2rem;
+      .grw-page-editor-mode-manager-icon {
+        @include bs.media-breakpoint-down(sm) {
+          font-size: 1.2rem;
+        }
       }
     }
-  }
-  &.hackmd-button {
-    line-height: 1.2rem;
-    .grw-page-editor-mode-manager-icon {
-      @include bs.media-breakpoint-down(sm) {
-        font-size: 1.2rem;
+    &.hackmd-button {
+      line-height: 1.2rem;
+      .grw-page-editor-mode-manager-icon {
+        @include bs.media-breakpoint-down(sm) {
+          font-size: 1.2rem;
+        }
+      }
+      .grw-page-editor-mode-manager-label {
+        font-size: 12px;
+        letter-spacing: -0.6px;
       }
-    }
-    .grw-page-editor-mode-manager-label {
-      font-size: 12px;
-      letter-spacing: -0.6px;
     }
   }
 }