ci: styling done

stakwork · Nov 12, 2023 · 2b2a1cb · 2b2a1cb
1 parent 7b151f1
commit 2b2a1cb
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/public/show_badge.svg b/public/show_badge.svg
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -86,7 +86,7 @@ export const Episode = ({
         <Flex direction="row">
           {!isSelectedView && (
             <Flex align="center" pr={16}>
-              <Avatar size={64} src={imageUrl !== '' ? imageUrl : } type={type || ''} />
+              <Avatar size={64} src={imageUrl} type={type || ''} />
             </Flex>
           )}
 
@@ -102,16 +102,19 @@ export const Episode = ({
               ) : null}
             </Flex>
 
-            <Description data-testid="episode-description">{episodeTitle}</Description>
+            { type !== 'show' && (<Description data-testid="episode-description">{episodeTitle}</Description>) }
+
             <Flex align="center" direction="row" justify="flex-start">
               {Boolean(date) && <Date>{moment.unix(date).fromNow()}</Date>}
-              {Boolean(showTitle) && <Title>{showTitle}</Title>}
+              {Boolean(showTitle) && type !== 'show' && <Title>{showTitle}</Title>}
+              {Boolean(showTitle) && type === 'show' && <ShowTitle>{showTitle}</ShowTitle>}
               {!isSelectedView && boostCount > 0 && (
                 <Flex style={{ marginLeft: 'auto' }}>
                   <BoostAmt amt={boostCount} />
                 </Flex>
               )}
             </Flex>
+            {type === 'show' && <Producer>By {showTitle}</Producer>}
           </Flex>
         </Flex>
       )}
@@ -160,6 +163,32 @@ export const Date = styled(Text)`
   flex-shrink: 0;
 `
 
+export const ShowTitle = styled.p`
+  margin-top: 20px;
+
+  color: var(--Primary-Text, #FFF);
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Barlow;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px; /* 130.769% */
+`;
+
+export const Producer = styled.p`
+  margin-top: 20px;
+
+  color: var(--Gray-6, #909BAA);
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Barlow;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px; /* 127.273% */
+`;
+
 export const Title = styled(Date)`
   align-items: center;
   flex-shrink: 1;

diff --git a/src/components/common/TypeBadge/index.tsx b/src/components/common/TypeBadge/index.tsx
@@ -14,7 +14,7 @@ type EpisodeTypeImage = {
 const EpisodeTypeImages: EpisodeTypeImage = {
   podcast: { img: 'audio_badge.svg', label: 'podcast' },
   clip: { img: 'audio_badge.svg', label: 'clip' },
-  show: { img: 'audio_badge.svg', label: 'show' },
+  show: { img: 'show_badge.svg', label: 'show' },
   tweet: { img: 'twitter_badge.svg', label: 'tweet' },
   twitter_space: { img: 'audio_badge.svg', label: 'clip' },
   youtube: { img: 'video_badge.svg', label: 'clip' },