Use Message Component

This commit is contained in:
Chi Vinh Le
2018-09-12 22:01:43 +02:00
parent aa904ab0e2
commit c8cd68c6b7
5 changed files with 18 additions and 12 deletions
@@ -15,6 +15,8 @@ import {
Button,
Flex,
HorizontalGutter,
Message,
MessageIcon,
RelativeTime,
Typography,
ValidationMessage,
@@ -102,14 +104,15 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
</ValidationMessage>
</Localized>
) : (
<ValidationMessage fullWidth>
<Message fullWidth>
<MessageIcon>alarm</MessageIcon>
<Localized
id="comments-editCommentForm-editRemainingTime"
time={<RelativeTime date={props.editableUntil} live />}
>
<span>{"Edit: <time></time> remaining"}</span>
</Localized>
</ValidationMessage>
</Message>
)}
<Flex direction="row" justifyContent="flex-end" itemGutter="half">
{props.expired ? (
@@ -629,13 +629,13 @@ exports[`edit a comment: edit form 1`] = `
</div>
</div>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorGrey Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
alarm
</span>
<span>
Edit:
@@ -1048,13 +1048,13 @@ exports[`edit a comment: optimistic response 1`] = `
</div>
</div>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorGrey Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
alarm
</span>
<span>
Edit:
@@ -2481,11 +2481,11 @@ exports[`shows expiry message: edit time expired 1`] = `
</div>
</div>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>