Use HorizontalGutter component, simplify Flex

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

@@ -16,7 +16,7 @@ const Username: StatelessComponent<UsernameProps> = props => {
         <Typography
           variant={matches ? "heading2" : "heading3"}
           className={styles.root}
-          component="span"
+          container="span"
         >
           {props.children}
         </Typography>

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

@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
-import { Button, Flex, Typography } from "talk-ui/components";
+import { Button, Typography } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
@@ -41,11 +41,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
           <Typography>Comment not found</Typography>
         </Localized>
       )}
-      {comment && (
-        <Flex direction="column">
-          <CommentContainer data={comment} />
-        </Flex>
-      )}
+      {comment && <CommentContainer data={comment} />}
     </div>
   );
 };

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

@@ -1,6 +1,5 @@
 .root {
   width: 100%;
-  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
@@ -9,7 +8,6 @@
   height: 150px;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: var(--spacing-unit);
   padding: var(--spacing-unit);
   border-radius: var(--round-corners);
   resize: vertical;

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

@@ -3,7 +3,7 @@ import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
-import { Button, Typography } from "talk-ui/components";
+import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
 import * as styles from "./PostCommentForm.css";
 import PoweredBy from "./PoweredBy";
 
@@ -19,38 +19,44 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <Field name="body" validate={required}>
-          {({ input, meta }) => (
-            <div>
-              <textarea
-                className={styles.textarea}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
-                placeholder="Post a comment"
-              />
-              {meta.touched &&
-                (meta.error || meta.submitError) && (
-                  <Typography align="right" color="error" gutterBottom>
-                    {meta.error || meta.submitError}
-                  </Typography>
-                )}
-            </div>
-          )}
-        </Field>
-        <div className={styles.postButtonContainer}>
-          <PoweredBy />
-          <Localized id="comments-postCommentForm-submit">
-            <Button
-              color="primary"
-              variant="filled"
-              disabled={submitting}
-              type="submit"
-            >
-              Submit
-            </Button>
-          </Localized>
-        </div>
+        <HorizontalGutter size="half">
+          <Field name="body" validate={required}>
+            {({ input, meta }) => (
+              <div style={{ width: "100%" }}>
+                <textarea
+                  className={styles.textarea}
+                  name={input.name}
+                  onChange={input.onChange}
+                  value={input.value}
+                  placeholder="Post a comment"
+                />
+                {meta.touched &&
+                  (meta.error || meta.submitError) && (
+                    <Typography align="right" color="error" gutterBottom>
+                      {meta.error || meta.submitError}
+                    </Typography>
+                  )}
+              </div>
+            )}
+          </Field>
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <PoweredBy />
+            <Localized id="comments-postCommentForm-submit">
+              <Button
+                color="primary"
+                variant="filled"
+                disabled={submitting}
+                type="submit"
+              >
+                Submit
+              </Button>
+            </Localized>
+          </Flex>
+        </HorizontalGutter>
       </form>
     )}
   </Form>

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

@@ -1,12 +1,16 @@
 import React, { StatelessComponent } from "react";
-import { Flex, Typography } from "talk-ui/components";
+import { Typography } from "talk-ui/components";
 
 const PoweredBy: StatelessComponent = () => {
   return (
-    <Flex itemGutter="half">
-      <Typography variant="bodyCopy">Powered by</Typography>
-      <Typography variant="heading4">The Coral Project</Typography>
-    </Flex>
+    <div>
+      <Typography variant="inputDescription" container="span">
+        Powered by
+      </Typography>{" "}
+      <Typography variant="heading4" container="span">
+        The Coral Project
+      </Typography>
+    </div>
   );
 };
 

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, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import Indent from "./Indent";
@@ -18,11 +18,9 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      <Flex
-        direction="column"
+      <HorizontalGutter
         id={`talk-comments-replyList-log--${props.commentID}`}
         role="log"
-        itemGutter
       >
         {props.comments.map(comment => (
           <CommentContainer key={comment.id} data={comment} />
@@ -41,7 +39,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
+      </HorizontalGutter>
     </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, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
@@ -22,21 +22,21 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <Flex className={styles.root} direction="column" itemGutter>
-      <UserBoxContainer user={props.user} />
-      <PostCommentFormContainer assetID={props.assetID} />
-      <Flex
-        direction="column"
+    <HorizontalGutter className={styles.root}>
+      <HorizontalGutter size="half">
+        <UserBoxContainer user={props.user} />
+        <PostCommentFormContainer assetID={props.assetID} />
+      </HorizontalGutter>
+      <HorizontalGutter
         id="talk-comments-stream-log"
         role="log"
         aria-live="polite"
-        itemGutter
       >
         {props.comments.map(comment => (
-          <Flex direction="column" key={comment.id} itemGutter>
+          <HorizontalGutter key={comment.id}>
             <CommentContainer data={comment} />
             <ReplyListContainer comment={comment} />
-          </Flex>
+          </HorizontalGutter>
         ))}
         {props.hasMore && (
           <Localized id="comments-stream-loadMore">
@@ -52,8 +52,8 @@ const Stream: StatelessComponent<StreamProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
-    </Flex>
+      </HorizontalGutter>
+    </HorizontalGutter>
   );
 };
 

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

@@ -3,9 +3,6 @@ import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
 
-import MatchMedia from "talk-ui/components/MatchMedia";
-import * as styles from "./UserBoxAuthenticated.css";
-
 export interface UserBoxAuthenticatedProps {
   onSignOut: () => void;
   username: string;
@@ -15,36 +12,30 @@ const UserBoxAuthenticated: StatelessComponent<
   UserBoxAuthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter="half">
-      <Flex itemGutter="half" className={styles.child}>
-        <MatchMedia gteWidth="sm">
-          <Localized id="comments-userBoxAuthenticated-signedInAs">
-            <Typography variant="bodyCopy" component="span">
-              Signed in as
-            </Typography>
-          </Localized>
-          <Typography variant="bodyCopyBold" component="span">
-            {props.username}
-          </Typography>
-        </MatchMedia>
-      </Flex>
-      <Flex itemGutter="half" className={styles.child}>
-        <Localized id="comments-userBoxAuthenticated-notYou">
-          <Typography variant="bodyCopy" component="span">
-            Not you?
-          </Typography>
-        </Localized>
-        <Localized id="comments-userBoxAuthenticated-signOut">
+    <Flex itemGutter="half" wrap>
+      <Localized
+        id="comments-userBoxAuthenticated-signedInAs"
+        username={<Typography variant="bodyCopyBold" container="span" />}
+      >
+        <Typography variant="bodyCopy" container="div">
+          {"Signed in as <username>Username</username>."}
+        </Typography>
+      </Localized>
+      <Localized
+        id="comments-userBoxAuthenticated-notYou"
+        button={
           <Button
             color="primary"
             size="small"
             variant="underlined"
             onClick={props.onSignOut}
-          >
-            Sign Out
-          </Button>
-        </Localized>
-      </Flex>
+          />
+        }
+      >
+        <Typography variant="bodyCopy" container={<Flex inline wrap />}>
+          {"Not you? <button>Sign Out</button>"}
+        </Typography>
+      </Localized>
     </Flex>
   );
 };

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

@@ -21,12 +21,12 @@ const UserBoxUnauthenticated: StatelessComponent<
           <Typography
             className={styles.joinText}
             variant="bodyCopyBold"
-            component="span"
+            container="span"
           >
             Join the conversation
           </Typography>
         </Localized>
-        <Typography variant="bodyCopyBold" component="span">
+        <Typography variant="bodyCopyBold" container="span">
           |
         </Typography>
       </MatchMedia>