Make design responsive

src/core/client/stream/components/Comment.css

@@ -1,10 +0,0 @@
-.root {
-}
-
-.gutterBottom {
-  margin-bottom: calc(1px * var(--spacing-unit));
-}
-
-.topBar {
-  margin-bottom: calc(0.5px * var(--spacing-unit));
-}

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

@@ -1,32 +1,27 @@
-import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 
-import { RelativeTime, Typography } from "talk-ui/components";
+import { Typography } from "talk-ui/components";
 
-import * as styles from "./Comment.css";
+import CommentTimestamp from "./CommentTimestamp";
+import CommentTopBar from "./CommentTopBar";
 import Username from "./Username";
 
 export interface CommentProps {
-  className?: string;
   author: {
     username: string;
   } | null;
   body: string | null;
   createdAt: string;
-  gutterBottom?: boolean;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
-  const rootClassName = cn(styles.root, props.className, {
-    [styles.gutterBottom]: props.gutterBottom,
-  });
   return (
-    <div className={rootClassName} role="article">
-      <div className={styles.topBar}>
+    <div role="article">
+      <CommentTopBar>
         {props.author && <Username>{props.author.username}</Username>}
-        <RelativeTime date={props.createdAt} />
-      </div>
+        <CommentTimestamp>{props.createdAt}</CommentTimestamp>
+      </CommentTopBar>
       <Typography>{props.body}</Typography>
     </div>
   );

src/core/client/stream/components/CommentTimestamp.css

@@ -0,0 +1,3 @@
+.root {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { RelativeTime } from "talk-ui/components";
+
+import * as styles from "./CommentTimestamp.css";
+
+export interface CommentTimestampProps {
+  children: string;
+}
+
+const CommentTimestamp: StatelessComponent<CommentTimestampProps> = props => (
+  <RelativeTime className={styles.root} date={props.children} />
+);
+
+export default CommentTimestamp;

src/core/client/stream/components/CommentTopBar.css

@@ -0,0 +1,3 @@
+.root {
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}

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

@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex, MatchMedia } from "talk-ui/components";
+
+import * as styles from "./CommentTopBar.css";
+
+export interface CommentTopBarProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const CommentTopBar: StatelessComponent<CommentTopBarProps> = props => {
+  const rootClassName = cn(styles.root, props.className);
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Flex
+          className={rootClassName}
+          alignItems="baseline"
+          direction={matches ? "row" : "column"}
+          itemGutter={matches ? true : "half"}
+        >
+          {props.children}
+        </Flex>
+      )}
+    </MatchMedia>
+  );
+};
+
+export default CommentTopBar;

src/core/client/stream/components/Indent.css

@@ -1,6 +1,6 @@
 .root {
   border-left: 3px solid;
-  padding-left: calc(1px * var(--spacing-unit));
+  padding-left: var(--spacing-unit);
 }
 
 .level0 {

src/core/client/stream/components/PostCommentForm.css

@@ -5,7 +5,7 @@
   height: 100px;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: calc(1px * var(--spacing-unit));
+  margin-bottom: var(--spacing-unit);
 }
 
 .postButtonContainer {

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

@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button } from "talk-ui/components";
+import { Button, Flex } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import Indent from "./Indent";
@@ -18,9 +18,14 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      <div id={`talk-comments-replyList-log--${props.commentID}`} role="log">
+      <Flex
+        direction="column"
+        id={`talk-comments-replyList-log--${props.commentID}`}
+        role="log"
+        itemGutter
+      >
         {props.comments.map(comment => (
-          <CommentContainer key={comment.id} data={comment} gutterBottom />
+          <CommentContainer key={comment.id} data={comment} />
         ))}
         {props.hasMore && (
           <Localized id="comments-replyList-showAll">
@@ -37,7 +42,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             </Button>
           </Localized>
         )}
-      </div>
+      </Flex>
     </Indent>
   );
 };

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

@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button } from "talk-ui/components";
+import { Button, Flex } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
@@ -24,12 +24,18 @@ const Stream: StatelessComponent<StreamProps> = props => {
     <div className={styles.root}>
       <Logo gutterBottom />
       <PostCommentFormContainer assetID={props.assetID} />
-      <div id="talk-comments-stream-log" role="log" aria-live="polite">
+      <Flex
+        direction="column"
+        id="talk-comments-stream-log"
+        role="log"
+        aria-live="polite"
+        itemGutter
+      >
         {props.comments.map(comment => (
-          <div key={comment.id}>
-            <CommentContainer data={comment} gutterBottom />
+          <Flex direction="column" key={comment.id} itemGutter>
+            <CommentContainer data={comment} />
             <ReplyListContainer comment={comment} />
-          </div>
+          </Flex>
         ))}
         {props.hasMore && (
           <Localized id="comments-stream-loadMore">
@@ -46,7 +52,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
             </Button>
           </Localized>
         )}
-      </div>
+      </Flex>
     </div>
   );
 };

src/core/client/stream/components/Username.css

@@ -1,3 +1,3 @@
 .root {
-  composes: heading4 from "talk-ui/shared/typography.css";
+  line-height: 1;
 }

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

@@ -1,14 +1,28 @@
 import React from "react";
 import { StatelessComponent } from "react";
 
+import { MatchMedia, Typography } from "talk-ui/components";
+
 import * as styles from "./Username.css";
 
-export interface CommentProps {
+export interface UsernameProps {
   children: string;
 }
 
-const Username: StatelessComponent<CommentProps> = props => {
-  return <span className={styles.root}>{props.children}</span>;
+const Username: StatelessComponent<UsernameProps> = props => {
+  return (
+    <MatchMedia minWidth="xs">
+      {matches => (
+        <Typography
+          variant={matches ? "heading2" : "heading3"}
+          className={styles.root}
+          component="span"
+        >
+          {props.children}
+        </Typography>
+      )}
+    </MatchMedia>
+  );
 };
 
 export default Username;