Post Card update

- fixed title color when using light theme
- removed unnecessary `?` from the code
- improved wording
This commit is contained in:
Kim, Jimin 2022-03-26 19:26:48 +09:00
parent 51dbf855c2
commit 01ace5aea3

View file

@ -56,7 +56,11 @@ const StyledTitle = styled.h1`
font-style: bold; font-style: bold;
margin: 0; margin: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #eeeeee; color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.color2,
dark: theming.dark.color2,
})};
` `
const StyledMetaContainer = styled.small`` const StyledMetaContainer = styled.small``
@ -76,8 +80,8 @@ const PostCard = (props: Props) => {
<StyledPostCard> <StyledPostCard>
<PostCardContainer to={process.env.PUBLIC_URL + postData.url}> <PostCardContainer to={process.env.PUBLIC_URL + postData.url}>
<StyledTitle> <StyledTitle>
{postData?.title || "No title"} {postData.title || "No title"}
{/* show (series for regex matching "/series/<series-title>") */} {/* show "(series)" for urls that matches regex "/series/<series-title>" */}
{/\/series\/[^/]*$/.test(postData.url) && " (series)"} {/\/series\/[^/]*$/.test(postData.url) && " (series)"}
</StyledTitle> </StyledTitle>
@ -93,17 +97,19 @@ const PostCard = (props: Props) => {
<hr /> <hr />
<FontAwesomeIcon icon={faCalendar} /> <FontAwesomeIcon icon={faCalendar} />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
{postData?.date || "Unknown date"} {postData.date || "Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faHourglass} /> <FontAwesomeIcon icon={faHourglass} />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
{postData?.readTime ? postData.readTime + " read" : "unknown length"} {postData.readTime
? postData.readTime + " read"
: "unknown read time"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faBook} /> <FontAwesomeIcon icon={faBook} />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
{postData?.wordCount {postData.wordCount
? postData.wordCount + " words" ? postData.wordCount + " words"
: "unknown words"} : "unknown length"}
</StyledMetaContainer> </StyledMetaContainer>
</PostCardContainer> </PostCardContainer>
</StyledPostCard> </StyledPostCard>