Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

topic sidebar styling #624

Merged
merged 4 commits into from
Nov 22, 2023
Merged

topic sidebar styling #624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90bd5b2
ci: finished styling
cosmicpotato137 Nov 21, 2023
b071b5c
ci: fixed review comments
cosmicpotato137 Nov 22, 2023
2e41106
ci: prettier
cosmicpotato137 Nov 22, 2023
54d6122
ci: eslint fix
cosmicpotato137 Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/svg-icons/HashtagIcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 37 additions & 1 deletion src/components/App/SideBar/Relevance/Episode/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -83,9 +84,11 @@ export const Episode = ({
const description = type === 'show' ? showTitle : episodeTitle
const subtitle = type === 'show' ? '' : showTitle

const defaultViewTypes = ['tweet', 'person', 'guest', 'topic']

return (
<EpisodeWrapper className={className} isSelected={isSelected} onClick={onClick}>
{type !== 'tweet' && type !== 'person' && type !== 'guest' && (
{ type && defaultViewTypes.includes(type) && (
<Flex direction="row">
{!isSelectedView && (
<Flex align="center" pr={16}>
Expand Down Expand Up @@ -118,6 +121,12 @@ export const Episode = ({
</Flex>
</Flex>
)}
{type === 'topic' && (
<TypeTopic>
<HashtagIcon />
<p>{subtitle}</p>
</TypeTopic>
)}
{['person', 'guest'].includes(type as string) && (
<TypePerson imageUrl={imageUrl} name={name || ''} title={showTitle || ''} />
)}
Expand Down Expand Up @@ -163,6 +172,33 @@ export const Date = styled(Text)`
flex-shrink: 0;
`

export const TypeTopic = styled.div`
display: flex;
flex-direction: row;

svg {
color: ${colors.mainBottomIcons};
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;
Expand Down
13 changes: 13 additions & 0 deletions src/components/Icons/HashtagIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/* eslint-disable */
import React from 'react'

const HashtagIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
<svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.24488 9.94873L3.51732 12.8382C3.48633 12.976 3.4201 13.0844 3.31861 13.1635C3.21711 13.2425 3.09318 13.2821 2.94682 13.2821C2.75237 13.2821 2.59319 13.2046 2.46928 13.0497C2.34535 12.8948 2.31009 12.7244 2.36351 12.5385L3.01094 9.94873H0.635943C0.427609 9.94873 0.260144 9.86913 0.133547 9.70995C0.00694957 9.55077 -0.0296407 9.37129 0.023776 9.1715C0.0600955 9.02514 0.134609 8.90975 0.247318 8.82535C0.360026 8.74096 0.489568 8.69877 0.635943 8.69877H3.32344L4.1728 5.30131H1.7978C1.58946 5.30131 1.422 5.22172 1.2954 5.06254C1.1688 4.90336 1.13221 4.72388 1.18563 4.5241C1.22195 4.37773 1.29646 4.26234 1.40917 4.17795C1.52188 4.09355 1.65142 4.05135 1.7978 4.05135H4.4853L5.21286 1.16191C5.24383 1.02409 5.31007 0.915657 5.41157 0.836601C5.51305 0.757546 5.63698 0.718018 5.78336 0.718018C5.97779 0.718018 6.13697 0.795469 6.2609 0.950372C6.38483 1.10529 6.42009 1.27569 6.36667 1.46158L5.71923 4.05135H9.16476L9.89232 1.16191C9.9233 1.02409 9.98954 0.915657 10.091 0.836601C10.1925 0.757546 10.3165 0.718018 10.4628 0.718018C10.6573 0.718018 10.8164 0.795469 10.9404 0.950372C11.0643 1.10529 11.0995 1.27569 11.0461 1.46158L10.3987 4.05135H12.7737C12.982 4.05135 13.1495 4.13094 13.2761 4.29012C13.4027 4.4493 13.4393 4.62879 13.3859 4.82858C13.3495 4.97494 13.275 5.09032 13.1623 5.17473C13.0496 5.25911 12.9201 5.30131 12.7737 5.30131H10.0862L9.23684 8.69877H11.6118C11.8202 8.69877 11.9876 8.77836 12.1142 8.93754C12.2408 9.09672 12.2774 9.2762 12.224 9.47598C12.1877 9.62235 12.1132 9.73773 12.0005 9.82212C11.8878 9.90652 11.7582 9.94873 11.6118 9.94873H8.92434L8.19678 12.8382C8.1658 12.976 8.09957 13.0844 7.99807 13.1635C7.89658 13.2425 7.77265 13.2821 7.62628 13.2821C7.43185 13.2821 7.27267 13.2046 7.14874 13.0497C7.0248 12.8948 6.98955 12.7244 7.04296 12.5385L7.6904 9.94873H4.24488ZM4.55738 8.69877H8.0029L8.85226 5.30131H5.40673L4.55738 8.69877Z"
fill="currentColor"
/>
</svg>
)

export default HashtagIcon
Loading