apply colors to 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" role="group " aria-label="three-stranded-button">
-      <button type="button" className="btn three-stranded-button view-button">
+    <div className="btn-group three-stranded-button" role="group " aria-label="three-stranded-button">
+      <button type="button" className="btn btn-outline-primary view-button">
         <i className="icon-control-play icon-fw" />
         { t('view') }
       </button>
-      <button type="button" className="btn three-stranded-button edit-button">
+      <button type="button" className="btn btn-outline-primary edit-button">
         <i className="icon-note icon-fw" />
         { t('Edit') }
       </button>
-      <button type="button" className="btn three-stranded-button hackmd-button">
+      <button type="button" className="btn btn-outline-primary hackmd-button">
         <i className="fa fa-fw fa-file-text-o" />
         { t('hackmd.hack_md') }
       </button>

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

@@ -20,15 +20,6 @@
   }
 }
 
-.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

@@ -203,6 +203,35 @@ ul.pagination {
   background-color: $bgcolor-subnav;
 }
 
+// .three-stranded-button {
+//   .btn-outline-primary {
+//     &:hover {
+//       color: $bgcolor-subnav;
+//     }
+//     &:active {
+//       // color: $bgcolor-subnav;
+//       color: $red;
+//     }
+//   }
+// }
+
+.three-stranded-button {
+  .btn-outline-primary {
+    &:hover,
+    &.active,
+    &:active {
+      // color: $bgcolor-subnav;
+      color: red;
+    }
+  }
+}
+
+.btn-outline-primary {
+  &:active {
+    color: yellow;
+  }
+}
+
 .grw-subnav-fixed-container .grw-subnav {
   background-color: rgba($bgcolor-subnav, 0.85);
 }

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

@@ -132,6 +132,15 @@ $table-hover-bg: $bgcolor-table-hover;
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
+.three-stranded-button {
+  .btn-outline-primary {
+    &:hover {
+      color: $primary;
+      background-color: lighten($secondary, 45%);
+    }
+  }
+}
+
 .grw-drawer-toggler {
   @extend .btn-light;
   color: $gray-500;