changed the class name from active-btn to active

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

@@ -16,7 +16,7 @@ const ThreeStrandedButton = (props) => {
     <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
       <button
         type="button"
-        className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active-btn'}`}
+        className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'}`}
         onClick={() => { threeStrandedButtonClickedHandler('view') }}
       >
         <i className="icon-control-play icon-fw" />
@@ -24,7 +24,7 @@ const ThreeStrandedButton = (props) => {
       </button>
       <button
         type="button"
-        className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active-btn'}`}
+        className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'}`}
         onClick={(e) => { threeStrandedButtonClickedHandler('edit') }}
       >
         <i className="icon-note icon-fw" />
@@ -32,7 +32,7 @@ const ThreeStrandedButton = (props) => {
       </button>
       <button
         type="button"
-        className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active-btn'}`}
+        className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'}`}
         onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
       >
         <i className="fa fa-fw fa-file-text-o" />

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

@@ -117,7 +117,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
     }
-    .btn.active-btn {
+
+    .btn.btn-outline-primary.active {
       background-color: lighten($primary, 60%);
     }
   }

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

@@ -188,7 +188,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($subthemecolor, 45%);
     }
   }

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

@@ -109,7 +109,7 @@ html[light] {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($primary, 70%);
     }
   }
@@ -212,7 +212,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: $primary;
     }
   }

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

@@ -94,7 +94,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: darken($primary, 10%);
     }
   }

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

@@ -112,7 +112,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($primary, 5%);
     }
   }

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

@@ -114,7 +114,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: darken($primary, 5%);
     }
   }

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

@@ -110,7 +110,7 @@ html[dark] {
   @import 'apply-colors-light';
   //Button
   .grw-three-stranded-button {
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: $light;
     }
   }

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

@@ -93,7 +93,7 @@ html[light] {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($primary, 70%);
     }
   }
@@ -204,7 +204,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: darken($primary, 10%);
     }
   }

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

@@ -116,7 +116,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($bgcolor-navbar, 70%);
     }
   }

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

@@ -98,7 +98,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($primary, 10%);
     }
   }

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

@@ -166,7 +166,7 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
     }
-    .btn.active-btn {
+    .btn.btn-outline-primary.active {
       background-color: lighten($primary, 25%);
     }
   }