Merge pull request #2272 from kuesa/master

Add Broken Heart Icon for Unsubscribing

CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
+- Broken heart icon for unsubscribe ([#2272](https://github.com/lbryio/lbry-desktop/pull/2272)
+
 ### Changed
 
 ### Fixed

src/renderer/component/common/icon-custom.jsx

@@ -110,4 +110,8 @@ export const customIcons = {
       />
     </g>
   ),
+  // Extended from the feather-icons Heart
+  [ICONS.UNSUBSCRIBE]: buildIcon(
+    <path d="M 12,5.67 10.94,4.61 C 5.7533356,-0.57666427 -2.0266644,7.2033357 3.16,12.39 l 1.06,1.06 7.78,7.78 7.78,-7.78 1.06,-1.06 c 2.149101,-2.148092 2.149101,-5.6319078 0,-7.78 -2.148092,-2.1491008 -5.631908,-2.1491008 -7.78,0 L 9.4481298,8.2303201 15.320603,9.2419066 11.772427,13.723825" />
+  ),
 };

src/renderer/component/subscribeButton/view.jsx

@@ -43,7 +43,7 @@ export default (props: Props) => {
   return (
     <Button
       iconColor="red"
-      icon={isSubscribed ? undefined : ICONS.SUBSCRIPTION}
+      icon={isSubscribed ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIPTION}
       button={buttonStyle || 'alt'}
       label={subscriptionLabel}
       onClick={e => {

src/renderer/constants/icons.js

@@ -27,6 +27,7 @@ export const PHONE = 'Phone';
 export const COMPLETE = 'Check';
 export const COMPLETED = 'CheckCircle';
 export const SUBSCRIPTION = 'Heart';
+export const UNSUBSCRIBE = 'BrokenHeart';
 export const UNLOCK = 'Unlock';
 export const WEB = 'Globe';
 export const SHARE = 'Share2';