Merge pull request #4168 from weseek/feat/GW-6992-watcher-buttton

create watch button

packages/app/src/components/Navbar/SubNavButtons.jsx

@@ -7,6 +7,7 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 
 import BookmarkButton from '../BookmarkButton';
 import LikeButton from '../LikeButton';
+import WatchButton from '../WatchButton';
 import PageManagement from '../Page/PageManagement';
 
 const SubnavButtons = (props) => {
@@ -21,6 +22,9 @@ const SubnavButtons = (props) => {
 
     return (
       <>
+        <span>
+          <WatchButton />
+        </span>
         {pageContainer.isAbleToShowLikeButton && (
           <span>
             <LikeButton />

packages/app/src/components/WatchButton.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+
+const WatchButton = (props) => {
+
+  const [isWatching, setIsWatching] = useState(true);
+
+  const handleClick = () => {
+    setIsWatching(!isWatching);
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        id="watch-button"
+        onClick={handleClick}
+        className={`btn btn-watch border-0 ${`btn-${props.size}`} ${isWatching ? 'active' : ''} `}
+      >
+        {isWatching && (
+          <i className="fa fa-eye"></i>
+        )}
+
+        {!isWatching && (
+          <i className="fa fa-eye-slash"></i>
+        )}
+      </button>
+
+    </>
+  );
+
+};
+
+WatchButton.propTypes = {
+  size: PropTypes.string,
+};
+
+WatchButton.defaultProps = {
+  size: 'md',
+};
+
+export default withTranslation()(WatchButton);

packages/app/src/styles/_subnav.scss

@@ -38,6 +38,7 @@
     }
   }
 
+  .btn-watch,
   .btn-like,
   .btn-bookmark {
     height: 40px;

packages/app/src/styles/atoms/_buttons.scss

@@ -20,6 +20,17 @@
   }
 }
 
+.btn.btn-watch {
+  @include button-outline-variant($secondary, $success, rgba(lighten($success, 10%), 0.15), rgba(lighten($success, 10%), 0.5));
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: lighten($success, 15%);
+  }
+  &:not(:disabled):not(.disabled):not(:hover) {
+    background-color: transparent;
+  }
+}
+
 .btn-copy,
 .btn-edit {
   opacity: 0.3;