From 6d71e53f44b1078b35a255e293cd548d25196947 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Tue, 24 Aug 2021 07:57:01 -0700
Subject: [PATCH] Use solid heart for "subscribed" (#6947)

## Objective
Make it easier to know the subscription state in a glance, without actually having to reading the text, especially for certain languages.
---
 ui/component/common/icon-custom.jsx   | 20 ++++++++++++++++++++
 ui/component/subscribeButton/view.jsx |  2 +-
 ui/constants/icons.js                 |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index fcd9e0954..a6122059b 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -201,6 +201,26 @@ export const icons = {
   [ICONS.SUBSCRIBE]: buildIcon(
     <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
   ),
+  [ICONS.SUBSCRIBED]: (props: IconProps) => {
+    const { size = 24, color = 'currentColor', ...otherProps } = props;
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        fill={color}
+        stroke={color}
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...otherProps}
+      >
+        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+      </svg>
+    );
+  },
+
   [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" />
   ),
diff --git a/ui/component/subscribeButton/view.jsx b/ui/component/subscribeButton/view.jsx
index b39cc902b..82b898f73 100644
--- a/ui/component/subscribeButton/view.jsx
+++ b/ui/component/subscribeButton/view.jsx
@@ -89,7 +89,7 @@ export default function SubscribeButton(props: Props) {
         ref={buttonRef}
         iconColor="red"
         largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
-        icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
+        icon={unfollowOverride ? ICONS.UNSUBSCRIBE : isSubscribed ? ICONS.SUBSCRIBED : ICONS.SUBSCRIBE}
         button={'alt'}
         requiresAuth={IS_WEB}
         label={label}
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 6734cde59..e803a3dac 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -35,6 +35,7 @@ export const COMPLETE = 'Check';
 export const COMPLETED = 'CheckCircle';
 export const NOT_COMPLETED = 'Circle';
 export const SUBSCRIBE = 'Heart';
+export const SUBSCRIBED = 'HeartSolid';
 export const UNSUBSCRIBE = 'BrokenHeart';
 export const BELL = 'Bell';
 export const BELL_ON = 'BellOn';