styling(ui): improve tag list, glossary term list recommendation styling (#3475)

This commit is contained in:
John Joyce 2021-10-27 19:50:17 -07:00 committed by GitHub
parent a1bf95307b
commit 937747a9b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 10 deletions

View File

@ -20,11 +20,15 @@ const TermContainer = styled.div`
const TermButton = styled(Button)`
margin: 0px;
padding: 0px;
font-weight: 500;
`;
const StyledBook = styled(BookOutlined)`
margin-left: 2%;
font-size: 20px;
&& {
padding-left: 2px;
padding-bottom: 2px;
font-size: 10px;
}
`;
type Props = {
@ -56,14 +60,14 @@ export const GlossaryTermSearchList = ({ content, onClick }: Props) => {
return (
<TermSearchListContainer>
{terms.map((term, index) => (
<TermButton type="text" key={term.urn} onClick={() => onClickTerm(term, index)}>
<TermContainer>
<TermContainer>
<TermButton type="link" key={term.urn} onClick={() => onClickTerm(term, index)}>
<Tag closable={false}>
{term.name}
<StyledBook />
</Tag>
</TermContainer>
</TermButton>
</TermButton>
</TermContainer>
))}
</TermSearchListContainer>
);

View File

@ -20,6 +20,7 @@ const TagContainer = styled.div`
const TagButton = styled(Button)`
margin: 0px;
padding: 0px;
font-weight: 500;
`;
type Props = {
@ -51,13 +52,13 @@ export const TagSearchList = ({ content, onClick }: Props) => {
return (
<TagSearchListContainer>
{tags.map((tag, index) => (
<TagButton type="text" key={tag.urn} onClick={() => onClickTag(tag, index)}>
<TagContainer>
<TagContainer>
<TagButton type="link" key={tag.urn} onClick={() => onClickTag(tag, index)}>
<StyledTag $colorHash={tag.urn} closable={false}>
{tag.name}
</StyledTag>
</TagContainer>
</TagButton>
</TagButton>
</TagContainer>
))}
</TagSearchListContainer>
);