Use Message Component

src/core/client/stream/components/EditCommentForm.tsx

@@ -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 ? (

src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap

@@ -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>

src/core/client/ui/components/Message/MessageIcon.css

@@ -1,4 +1,6 @@
 .root {
+  align-self: flex-start;
+  margin-top: 1px;
   &:first-child {
     margin-right: calc(0.5 * var(--spacing-unit));
   }

src/core/client/ui/components/Message/index.ts

@@ -1 +1,2 @@
-export { default } from "./Message";
+export { default, default as Message } from "./Message";
+export { default as MessageIcon } from "./MessageIcon";

src/core/client/ui/components/index.ts

@@ -20,4 +20,4 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
-export { default as Message } from "./Message";
+export { default as Message, MessageIcon } from "./Message";