Fix icon color

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add watch later to hover action for last used playlist on popup _community pr!_ ([#6274](https://github.com/lbryio/lbry-desktop/pull/6274))
 - Open in desktop (web feature) _community pr!_ ([#6667](https://github.com/lbryio/lbry-desktop/pull/6667))
 - Add confirmation on comment removal  _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
+- Show on content page if a file is part of a playlist already  _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393))
 
 ### Changed
 - Use Canonical Url for copy link ([#6500](https://github.com/lbryio/lbry-desktop/pull/6500))

ui/component/claimCollectionAddButton/index.js

@@ -1,11 +1,17 @@
 import { connect } from 'react-redux';
 import { doOpenModal } from 'redux/actions/app';
 import CollectionAddButton from './view';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectClaimUrlInCollection } from 'lbry-redux';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  claim: makeSelectClaimForUri(props.uri)(state),
+  const claim = makeSelectClaimForUri(props.uri)(state);
-});
+  const permanentUrl = claim && claim.permanent_url;
+
+  return {
+    claim,
+    isSaved: makeSelectClaimUrlInCollection(permanentUrl)(state),
+  };
+};
 
 export default connect(select, {
   doOpenModal,

ui/component/claimCollectionAddButton/view.jsx

@@ -11,10 +11,11 @@ type Props = {
   fileAction?: boolean,
   type?: boolean,
   claim: Claim,
+  isSaved: boolean,
 };
 
 export default function CollectionAddButton(props: Props) {
-  const { doOpenModal, uri, fileAction, type = 'playlist', claim } = props;
+  const { doOpenModal, uri, fileAction, type = 'playlist', claim, isSaved } = props;
 
   // $FlowFixMe
   const streamType = (claim && claim.value && claim.value.stream_type) || '';
@@ -24,10 +25,14 @@ export default function CollectionAddButton(props: Props) {
   return (
     <Button
       button={fileAction ? undefined : 'alt'}
-      className={classnames({ 'button--file-action': fileAction })}
+      className={classnames({
-      icon={fileAction ? ICONS.ADD : ICONS.LIBRARY}
+        'button--file-action': fileAction,
+        'button--file-action-active': fileAction && isSaved,
+      })}
+      icon={fileAction ? (!isSaved ? ICONS.ADD : ICONS.STACK) : ICONS.LIBRARY}
       iconSize={fileAction ? 22 : undefined}
-      label={uri ? __('Save') : __('New List')}
+      iconColor={isSaved && 'primary'}
+      label={uri ? (!isSaved ? __('Save') : __('Saved')) : __('New List')}
       requiresAuth={IS_WEB}
       title={__('Add this claim to a list')}
       onClick={(e) => {

ui/component/common/icon.jsx

@@ -3,6 +3,7 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
 import { icons } from './icon-custom';
+import { DOMAIN } from 'config';
 
 // It would be nice to standardize this somehow
 // These are copied from `scss/vars`, can they both come from the same source?
@@ -38,6 +39,8 @@ class IconComponent extends React.PureComponent<Props> {
 
   getIconColor = (color: string) => {
     switch (color) {
+      case 'primary':
+        return DOMAIN === 'odysee.com' ? RED_COLOR : GREEN_COLOR;
       case 'red':
         return RED_COLOR;
       case 'green':

ui/scss/component/_button.scss

@@ -240,6 +240,11 @@
   }
 }
 
+.button--file-action-active {
+  @extend .button--file-action;
+  color: var(--color-link);
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;

web/package.json

@@ -31,7 +31,7 @@
     "koa-logger": "^3.2.1",
     "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
-    "lbry-redux": "lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264",
+    "lbry-redux": "lbryio/lbry-redux#9ebfc927d087193a29c0650993f0aa8be492a8c4",
     "lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
     "mysql": "^2.17.1",
     "node-fetch": "^2.6.1",

web/yarn.lock

@@ -3331,9 +3331,9 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
-lbry-redux@lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264:
+lbry-redux@lbryio/lbry-redux#9ebfc927d087193a29c0650993f0aa8be492a8c4:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/508e8d36fd91106beb7d6b4edb9f726dae0e6264"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/9ebfc927d087193a29c0650993f0aa8be492a8c4"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"