Merge branch 'next' of github.com:coralproject/talk into ui-tab

* 'next' of github.com:coralproject/talk:
  Adapt snapshot
  Fix lint
  Only show edit button for the author
  Use Message Component
  Adapt integration test
  Fix integration test
  Add edited marker
  fix: remove assetID from client queries to edit comment
  feat: merge metadata during edit
  fix: remove assetID from EditCommentInput
  Fix linting
  Add integration tests
  Add integration test
  More unit tests
  Fix lint and test
  Implement edit

src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap

@@ -18,7 +18,7 @@ exports[`works with multiple form components 1`] = `
     Username
   </label>
   <p
-    className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+    className="Typography-root Typography-detail Typography-colorTextSecondary"
   >
     A unique identifier displayed on your comments. You may use “_” and “.”
   </p>

src/core/client/ui/components/InputDescription/InputDescription.tsx

@@ -11,7 +11,7 @@ const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
   const { className, children, ...rest } = props;
   return (
     <Typography
-      variant="inputDescription"
+      variant="detail"
       color="textSecondary"
       className={className}
       {...rest}

src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <p
-  className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+  className="Typography-root Typography-detail Typography-colorTextSecondary"
 >
   Form Components should go here
 </p>

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/RelativeTime/RelativeTime.css

@@ -1,4 +1,2 @@
 .root {
-  composes: bodyCopy from "talk-ui/shared/typography.css";
-  background-color: transparent;
 }

src/core/client/ui/components/Typography/Typography.css

@@ -40,8 +40,8 @@
   composes: inputLabel from "talk-ui/shared/typography.css";
 }
 
-.inputDescription {
-  composes: inputDescription from "talk-ui/shared/typography.css";
+.detail {
+  composes: detail from "talk-ui/shared/typography.css";
 }
 
 .timestamp {

src/core/client/ui/components/Typography/Typography.tsx

@@ -15,7 +15,7 @@ type Variant =
   | "bodyCopy"
   | "bodyCopyBold"
   | "inputLabel"
-  | "inputDescription"
+  | "detail"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -146,7 +146,7 @@ Typography.defaultProps = {
     bodyCopyBold: "p",
     timestamp: "span",
     inputLabel: "label",
-    inputDescription: "p",
+    detail: "p",
   },
   noWrap: false,
   paragraph: false,

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

@@ -20,5 +20,5 @@ 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";
 export { Tab, TabBar, TabContent, TabPane } from "./Tabs";