rename css

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

@@ -45,10 +45,10 @@ function PageEditorModeManager(props) {
   return (
     <>
       <div
-        className="btn-group grw-three-stranded-button"
+        className="btn-group grw-page-editor-mode-manager"
         role="group"
-        aria-label="three-stranded-button"
-        id="grw-three-stranded-button"
+        aria-label="page-editor-mode-manager"
+        id="grw-page-editor-mode-manager"
       >
         {(!isDeviceSmallerThanMd || editorMode !== 'view') && (
           <PageEditorModeButtonWrapper
@@ -57,7 +57,7 @@ function PageEditorModeManager(props) {
             onClick={threeStrandedButtonClickedHandler}
             targetMode="view"
           >
-            <i className="icon-control-play icon-fw grw-three-stranded-button-icon" />
+            <i className="icon-control-play icon-fw grw-page-editor-mode-manager-icon" />
             { t('view') }
           </PageEditorModeButtonWrapper>
         )}
@@ -68,7 +68,7 @@ function PageEditorModeManager(props) {
             onClick={threeStrandedButtonClickedHandler}
             targetMode="edit"
           >
-            <i className="icon-note icon-fw grw-three-stranded-button-icon" />
+            <i className="icon-note icon-fw grw-page-editor-mode-manager-icon" />
             { t('Edit') }
           </PageEditorModeButtonWrapper>
         )}
@@ -79,13 +79,13 @@ function PageEditorModeManager(props) {
             onClick={threeStrandedButtonClickedHandler}
             targetMode="hackmd"
           >
-            <i className="fa fa-fw fa-file-text-o grw-three-stranded-button-icon" />
+            <i className="fa fa-fw fa-file-text-o grw-page-editor-mode-manager-icon" />
             { t('hackmd.hack_md') }
           </PageEditorModeButtonWrapper>
         )}
       </div>
       {isBtnDisabled && (
-        <UncontrolledTooltip placement="top" target="grw-three-stranded-button" fade={false}>
+        <UncontrolledTooltip placement="top" target="grw-page-editor-mode-manager" fade={false}>
           {t('Not available for guest')}
         </UncontrolledTooltip>
       )}

src/client/styles/scss/_mixins.scss

@@ -254,7 +254,7 @@
   }
 }
 
-@mixin three-stranded-button($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+@mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -270,7 +270,7 @@
 
   &.view-button,
   &.edit-button {
-    .grw-three-stranded-button-icon {
+    .grw-page-editor-mode-manager-icon {
       margin-right: -0.25rem;
     }
   }
@@ -278,7 +278,7 @@
     font-size: 12px;
     letter-spacing: -0.6px;
 
-    .grw-three-stranded-button-icon {
+    .grw-page-editor-mode-manager-icon {
       margin-right: -0.1rem;
     }
   }

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

@@ -232,7 +232,7 @@ ul.pagination {
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
-.grw-three-stranded-button {
+.grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
       color: $primary;

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

@@ -152,7 +152,7 @@ $border-color: $border-color-global;
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
-.grw-three-stranded-button {
+.grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
       color: $primary;

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

@@ -114,9 +114,9 @@ html[dark] {
   @import 'apply-colors-light';
 
   //Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
+      @include page-editor-mode-manager(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
     }
   }
 

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

@@ -185,9 +185,9 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
+      @include page-editor-mode-manager(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
   }
 }

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

@@ -105,9 +105,9 @@ html[light] {
   @import 'apply-colors-light';
 
   // Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -205,9 +205,9 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+      @include page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }
   }
 }

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

@@ -90,9 +90,9 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
+      @include page-editor-mode-manager(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
   }
 

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

@@ -108,9 +108,9 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
+      @include page-editor-mode-manager(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
     }
   }
 

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

@@ -110,9 +110,9 @@ html[dark] {
   }
 
   // Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
+      @include page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
   }
 }

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

@@ -109,9 +109,9 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-light';
   //Button
-  .grw-three-stranded-button {
+  .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
+      @include page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
     }
   }
 }

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

@@ -89,9 +89,9 @@ html[light] {
     }
   }
   // Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -197,9 +197,9 @@ html[dark] {
   }
 
   // Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
+      @include page-editor-mode-manager(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
   }
 }

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

@@ -112,9 +112,9 @@ html[dark] {
   }
 
   // Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
+      @include page-editor-mode-manager($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
     }
   }
 }

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

@@ -98,9 +98,9 @@ html[dark] {
   .btn.btn-outline-primary {
     @include button-outline-variant($accentcolor, $accentcolor, lighten($accentcolor, 20%), $accentcolor);
   }
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
+      @include page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
     }
   }
 

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

@@ -162,9 +162,9 @@ html[dark] {
   }
 
   // Button
-  .btn-group.grw-three-stranded-button {
+  .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
+      @include page-editor-mode-manager(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
     }
   }
 }