made it possible to change the color

packages/app/src/components/WatchButton.jsx

@@ -16,9 +16,9 @@ const WatchButton = (props) => {
     <>
       <button
         type="button"
-        id="bookmark-button"
+        id="watch-button"
         onClick={handleClick}
-        className={`btn btn-bookmark border-0 ${`btn-${props.size}`} ${isWatching ? 'active' : ''}`}
+        className={`btn btn-watch border-0 ${`btn-${props.size}`} ${isWatching ? 'active' : ''} `}
       >
         {isWatching && (
           <i className="fa fa-eye"></i>

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;