fix: fixed tag styling due to localization (#2785)

This commit is contained in:
Wyatt Johnson
2020-01-10 18:32:15 +00:00
committed by GitHub
parent a582773e1d
commit 745fb4056c
3 changed files with 104 additions and 88 deletions
@@ -18,11 +18,11 @@ const CommentAuthorContainer: FunctionComponent<Props> = ({ comment }) => {
}
return (
<>
<Localized id="commentAuthor-status-banned">
<div className={styles.authorStatus}>
<div className={styles.authorStatus}>
<Localized id="commentAuthor-status-banned">
<Tag color="error">BANNED</Tag>
</div>
</Localized>
</Localized>
</div>
</>
);
};
@@ -185,14 +185,16 @@ const ModerateCard: FunctionComponent<Props> = ({
>
<Flex alignItems="center">
{!hideUsername && username && (
<BaseButton
onClick={commentAuthorClick}
className={styles.usernameButton}
>
<Username>{username}</Username>
</BaseButton>
<>
<BaseButton
onClick={commentAuthorClick}
className={styles.usernameButton}
>
<Username>{username}</Username>
</BaseButton>
<CommentAuthorContainer comment={comment} />
</>
)}
<CommentAuthorContainer comment={comment} />
<Timestamp>{createdAt}</Timestamp>
{edited && (
<Localized id="moderate-comment-edited">
@@ -18,17 +18,19 @@ exports[`renders approved correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>
@@ -146,17 +148,19 @@ exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>
@@ -274,17 +278,19 @@ exports[`renders dangling correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>
@@ -402,17 +408,19 @@ exports[`renders rejected correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>
@@ -530,17 +538,19 @@ exports[`renders reply correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>
@@ -667,17 +677,19 @@ exports[`renders story info 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>
@@ -829,17 +841,19 @@ exports[`renders tombstoned when comment is deleted 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
<React.Fragment>
<ForwardRef(forwardRef)
className="ModerateCard-usernameButton"
onClick={[Function]}
>
<Username>
Theon
</Username>
</ForwardRef(forwardRef)>
<Relay(CommentAuthorContainer)
comment={Object {}}
/>
</React.Fragment>
<Timestamp
toggleAbsolute={true}
>