From d1f56a07a2662fb7d1d80b8f5347b223d98f801d Mon Sep 17 00:00:00 2001
From: Vincent Wilson <vince@classyh.at>
Date: Wed, 14 Feb 2024 09:58:29 -0500
Subject: [PATCH] Added series styling to more parts of the app (#166)

* Added series styling to more parts of the app

* Apply suggestions from code review
---
 .../FeatureFeed/Features/HeroListFeature.js   |  8 ++++++-
 .../Features/HeroListFeature.styles.js        |  6 ++++++
 .../FeatureFeedList/FeatureFeedListGrid.js    |  1 +
 packages/web-shared/hooks/useFeatureFeed.js   | 21 +------------------
 web-embeds/public/index.html                  | 11 +++-------
 5 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js
index cce91d66..64691668 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js
@@ -20,7 +20,7 @@ function HeroListFeature(props = {}) {
     if (item.action === 'OPEN_URL') {
       analytics.track('OpenUrl', {
         url: item?.relatedNode?.url,
-      });      
+      });
       return window.open(getURLFromType(item.relatedNode), '_blank');
     }
 
@@ -71,6 +71,7 @@ function HeroListFeature(props = {}) {
 
   const actions = props.feature?.actions;
 
+
   return (
     <Box mb="base" minWidth="180px" {...props}>
       {/* Content */}
@@ -121,6 +122,11 @@ function HeroListFeature(props = {}) {
           flexDirection="column"
           paddingTop={{ md: 'xl', lg: 'xxxl' }}
         >
+          {props?.feature?.heroCard?.relatedNode?.parentItem?.title ? (
+            <Styled.ChannelLabel color="text.secondary">
+              {props?.feature?.heroCard?.relatedNode?.parentItem?.title}
+            </Styled.ChannelLabel>
+          ) : null}
           <Styled.Title>{props?.feature?.heroCard?.title}</Styled.Title>
           <Styled.Summary color="text.secondary">
             {props?.feature?.heroCard?.summary}
diff --git a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js
index cd480d19..9a7ce7a8 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js
@@ -53,6 +53,11 @@ const Summary = withTheme(styled.div`
   ${system}
 `);
 
+const ChannelLabel = withTheme(styled.h3`
+  ${TypeStyles.SmallBodyText}
+  ${system}
+`);
+
 const Container = styled.div`
   display: grid;
 
@@ -83,4 +88,5 @@ export default {
   Summary,
   Container,
   Item,
+  ChannelLabel,
 };
diff --git a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
index de054f48..cf44152e 100644
--- a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
+++ b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
@@ -50,6 +50,7 @@ function FeatureFeedListGrid(props = {}) {
             summary={item.summary}
             onClick={() => handleActionPress(item)}
             videoMedia={item.relatedNode?.videos[0]}
+            channelLabel={item.relatedNode?.parentItem?.title}
           />
         ))}
       </Box>
diff --git a/packages/web-shared/hooks/useFeatureFeed.js b/packages/web-shared/hooks/useFeatureFeed.js
index 70c2830c..84377377 100644
--- a/packages/web-shared/hooks/useFeatureFeed.js
+++ b/packages/web-shared/hooks/useFeatureFeed.js
@@ -176,30 +176,11 @@ export const FEED_FEATURES = gql`
             title
             subtitle
             heroCard {
-              id
-              title
-              labelText
-              summary
-              coverImage {
-                name
-                sources {
-                  uri
-                }
-              }
-              hasAction
-              action
-              actionIcon
+              ...ContentCard
               relatedNode {
-                id
-                __typename
-
                 ... on ContentItem {
-                  title
                   originId
                   originType
-                  videos {
-                    ...VideoMediaFields
-                  }
                 }
               }
             }
diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
index 83f4f7fd..832f325d 100644
--- a/web-embeds/public/index.html
+++ b/web-embeds/public/index.html
@@ -55,14 +55,9 @@
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
 
-  <!-- <div
-      data-type="FeatureFeed"
-      data-church="liquid_church"
-      data-feature-feed="FeatureFeed:d292fd8c-5b9f-4cd7-a2fe-9d7d0914c34f"
-      data-placeholder="Life Is Hard. How Can We Help?"
-      data-modal="true"
-      class="apollos-widget"
-    ></div> -->
+  <div data-type="FeatureFeed" data-church="liquid_church"
+    data-feature-feed="FeatureFeed:04160599-4edf-4824-98c5-02c1a8854c48"
+    data-placeholder="Life Is Hard. How Can We Help?" data-modal="true" class="apollos-widget"></div>
   <!-- 
     <div
       data-church="cedar_creek"