implemented the active button

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

@@ -1,21 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 const ThreeStrandedButton = (props) => {
   const { t } = props;
-
+  const [btnActive, setBtnActive] = useState('view');
   function threeStrandedButtonClickedHandler(viewType) {
     if (props.onThreeStrandedButtonClicked != null) {
       props.onThreeStrandedButtonClicked(viewType);
     }
+    setBtnActive(viewType);
   }
 
   return (
     <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"
+        className={`btn btn-outline-primary view-button ${btnActive == 'view' && 'active-btn'}`}
         onClick={() => { threeStrandedButtonClickedHandler('view') }}
       >
         <i className="icon-control-play icon-fw" />
@@ -23,15 +24,15 @@ const ThreeStrandedButton = (props) => {
       </button>
       <button
         type="button"
-        className="btn btn-outline-primary edit-button"
-        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+        className={`btn btn-outline-primary edit-button ${btnActive == 'edit' && 'active-btn'}`}
+        onClick={(e) => { threeStrandedButtonClickedHandler('edit') }}
       >
         <i className="icon-note icon-fw" />
         { t('Edit') }
       </button>
       <button
         type="button"
-        className="btn btn-outline-primary hackmd-button"
+        className={`btn btn-outline-primary hackmd-button ${btnActive == 'hackmd' && 'active-btn'}`}
         onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
       >
         <i className="fa fa-fw fa-file-text-o" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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