replace css style editing for the three-stranded-button

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

@@ -12,16 +12,16 @@ const ThreeStrandedButton = (props) => {
   const { t } = props;
 
   return (
-    <div className="btn-group three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button type="button" className="btn btn-outline-primary view-button">
+    <div className="btn-group" role="group " aria-label="three-stranded-button">
+      <button type="button" className="btn three-stranded-button view-button">
         <i className="icon-control-play icon-fw" />
         { t('view') }
       </button>
-      <button type="button" className="btn btn-outline-primary edit-button">
+      <button type="button" className="btn three-stranded-button edit-button">
         <i className="icon-note icon-fw" />
         { t('Edit') }
       </button>
-      <button type="button" className="btn btn-outline-primary hackmd-button">
+      <button type="button" className="btn three-stranded-button hackmd-button">
         <i className="fa fa-fw fa-file-text-o" />
         { t('hackmd.hack_md') }
       </button>

src/client/styles/scss/atoms/_buttons.scss

@@ -20,6 +20,15 @@
   }
 }
 
+.btn.three-stranded-button {
+  @include button-outline-variant($primary, $primary, lighten($secondary, 45%), $primary);
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: whitesmoke;
+    background-color: $primary;
+  }
+}
+
 .btn-copy,
 .btn-edit {
   opacity: 0.3;

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

@@ -201,15 +201,6 @@ 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 {