From 90bd5b2353d006cd982b5f6456cd474fc8c1f63d Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Tue, 21 Nov 2023 13:35:35 -0500 Subject: [PATCH 1/4] ci: finished styling --- public/svg-icons/HashtagIcon.svg | 3 ++ .../App/SideBar/Relevance/Episode/index.tsx | 36 ++++++++++++++++++- src/components/Icons/HashtagIcon.tsx | 13 +++++++ 3 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 public/svg-icons/HashtagIcon.svg create mode 100644 src/components/Icons/HashtagIcon.tsx diff --git a/public/svg-icons/HashtagIcon.svg b/public/svg-icons/HashtagIcon.svg new file mode 100644 index 000000000..d6abbaca6 --- /dev/null +++ b/public/svg-icons/HashtagIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx index 0799b87b1..6c620c1e6 100644 --- a/src/components/App/SideBar/Relevance/Episode/index.tsx +++ b/src/components/App/SideBar/Relevance/Episode/index.tsx @@ -1,6 +1,7 @@ import moment from 'moment' import styled from 'styled-components' import { BoostAmt } from '~/components/App/Helper/BoostAmt' +import HashtagIcon from '~/components/Icons/HashtagIcon' import LinkIcon from '~/components/Icons/LinkIcon' import { Avatar } from '~/components/common/Avatar' import { Flex } from '~/components/common/Flex' @@ -85,7 +86,7 @@ export const Episode = ({ return ( - {type !== 'tweet' && type !== 'person' && type !== 'guest' && ( + {type !== 'tweet' && type !== 'person' && type !== 'guest' && type !== 'topic' && ( {!isSelectedView && ( @@ -118,6 +119,12 @@ export const Episode = ({ )} + {type === 'topic' && ( + + +

{subtitle}

+ + )} {['person', 'guest'].includes(type as string) && ( )} @@ -163,6 +170,33 @@ export const Date = styled(Text)` flex-shrink: 0; ` +export const TypeTopic = styled.div` + display: flex; + flex-direction: row; + + svg { + color: #909baa; + margin-right: 10px; + } + + p { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + + overflow: hidden; + color: var(--Primary-Text, #fff); + leading-trim: both; + text-edge: cap; + text-overflow: ellipsis; + font-family: Barlow; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 16px; /* 100% */ + } +` + export const Title = styled(Date)` align-items: center; flex-shrink: 1; diff --git a/src/components/Icons/HashtagIcon.tsx b/src/components/Icons/HashtagIcon.tsx new file mode 100644 index 000000000..235c82638 --- /dev/null +++ b/src/components/Icons/HashtagIcon.tsx @@ -0,0 +1,13 @@ +/* eslint-disable */ +import React from 'react' + +const HashtagIcon: React.FC> = (props) => ( + + + +) + +export default HashtagIcon From b071b5cb8d9e2494c32e726a22381dc330966505 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Wed, 22 Nov 2023 14:17:13 -0500 Subject: [PATCH 2/4] ci: fixed review comments --- src/components/App/SideBar/Relevance/Episode/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx index 6c620c1e6..9440a4f6c 100644 --- a/src/components/App/SideBar/Relevance/Episode/index.tsx +++ b/src/components/App/SideBar/Relevance/Episode/index.tsx @@ -84,9 +84,11 @@ export const Episode = ({ const description = type === 'show' ? showTitle : episodeTitle const subtitle = type === 'show' ? '' : showTitle + const defaultViewTypes = ['tweet', 'person', 'guest', 'topic']; + return ( - {type !== 'tweet' && type !== 'person' && type !== 'guest' && type !== 'topic' && ( + {defaultViewTypes.includes(type) && ( {!isSelectedView && ( @@ -175,7 +177,7 @@ export const TypeTopic = styled.div` flex-direction: row; svg { - color: #909baa; + color: ${colors.mainBottomIcons}; margin-right: 10px; } From 2e41106cd50fafd546878769fe75532fb1ebe904 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Wed, 22 Nov 2023 14:20:47 -0500 Subject: [PATCH 3/4] ci: prettier --- src/components/App/SideBar/Relevance/Episode/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx index 9440a4f6c..1c8ced374 100644 --- a/src/components/App/SideBar/Relevance/Episode/index.tsx +++ b/src/components/App/SideBar/Relevance/Episode/index.tsx @@ -84,7 +84,7 @@ export const Episode = ({ const description = type === 'show' ? showTitle : episodeTitle const subtitle = type === 'show' ? '' : showTitle - const defaultViewTypes = ['tweet', 'person', 'guest', 'topic']; + const defaultViewTypes = ['tweet', 'person', 'guest', 'topic'] return ( From 54d6122a2c846238386f2216ed6034b5f0e632d3 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Wed, 22 Nov 2023 14:23:59 -0500 Subject: [PATCH 4/4] ci: eslint fix --- src/components/App/SideBar/Relevance/Episode/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx index 1c8ced374..041a780bf 100644 --- a/src/components/App/SideBar/Relevance/Episode/index.tsx +++ b/src/components/App/SideBar/Relevance/Episode/index.tsx @@ -88,7 +88,7 @@ export const Episode = ({ return ( - {defaultViewTypes.includes(type) && ( + { type && defaultViewTypes.includes(type) && ( {!isSelectedView && (