add subscribtion button to exact channel match

src/renderer/component/channelTile/view.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import CardMedia from 'component/cardMedia';
 import TruncatedText from 'component/common/truncated-text';
 import classnames from 'classnames';
+import SubscribeButton from 'component/subscribeButton';
 
 type Props = {
   uri: string,
@@ -38,10 +39,12 @@ class ChannelTile extends React.PureComponent<Props> {
 
   render() {
     const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props;
-    let channelName;
 
+    let channelName;
+    let subscriptionUri;
     if (claim) {
       channelName = claim.name;
+      subscriptionUri = claim.permanent_url;
     }
 
     const onClick = () => navigate('/show', { uri });
@@ -92,6 +95,11 @@ class ChannelTile extends React.PureComponent<Props> {
               </div>
             </React.Fragment>
           )}
+          {subscriptionUri && (
+            <div className="card__actions">
+              <SubscribeButton uri={subscriptionUri} channelName={channelName} />
+            </div>
+          )}
         </div>
       </section>
     );

src/renderer/component/subscribeButton/view.jsx

@@ -41,7 +41,9 @@ export default (props: Props) => {
       icon={isSubscribed ? undefined : icons.HEART}
       button="alt"
       label={subscriptionLabel}
-      onClick={() => {
+      onClick={e => {
+        e.stopPropagation();
+
         if (!subscriptions.length) {
           doNotify({ id: MODALS.FIRST_SUBSCRIPTION });
         }

src/renderer/scss/_vars.scss

@@ -137,6 +137,7 @@ $large-breakpoint: 1921px;
   --search-item-border-color: transparent;
   --search-item-active-color: var(--color-black);
   --search-modal-input-height: 70px;
+  --search-exact-result: #eaeaea;
 
   /* Nav */
   --nav-color: var(--color-grey-dark);

src/renderer/scss/component/_search.scss

@@ -87,7 +87,7 @@
 
 .search__top {
   padding: 0 $spacing-width $spacing-width;
-  background-color: var(--card-bg);
+  background-color: var(--search-exact-result);
 }
 
 .search__content {

static/themes/dark.css

@@ -62,6 +62,7 @@
   --search-active-bg-color: #13233C;
   --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
   --search-modal-input-height: 70px;
+  --search-exact-result: #4C5D77;
 
   /* Nav */
   --nav-color: #44548F;