Add UserBox

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

@@ -2,6 +2,7 @@
 :global {
   body {
     margin: "0";
+    padding: 2px;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;

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

@@ -1,3 +1,7 @@
+.root {
+  width: 100%;
+}
+
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
 

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

@@ -20,7 +20,7 @@ export interface PostCommentFormProps {
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
-      <form autoComplete="off" onSubmit={handleSubmit}>
+      <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
         <Field name="body" validate={required}>
           {({ input, meta }) => (
             <div>

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

@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
+import UserBoxContainer from "../containers/UserBoxContainer";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -20,7 +21,8 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <div className={styles.root}>
+    <Flex className={styles.root} direction="column" itemGutter>
+      <UserBoxContainer />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
@@ -50,7 +52,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
           </Localized>
         )}
       </Flex>
-    </div>
+    </Flex>
   );
 };
 

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

@@ -0,0 +1,3 @@
+.joinText {
+  margin-right: var(--spacing-unit);
+}

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

@@ -0,0 +1,40 @@
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+import * as styles from "./UserBox.css";
+
+export interface UserBoxProps {
+  onSignIn: () => void;
+  onRegister: () => void;
+}
+
+const UserBox: StatelessComponent<UserBoxProps> = props => {
+  return (
+    <Flex>
+      <Typography
+        className={styles.joinText}
+        variant="bodyCopyBold"
+        component="span"
+      >
+        Join the conversation
+      </Typography>
+      <Typography variant="bodyCopyBold" component="span">
+        |
+      </Typography>
+      <Button color="primary" size="small" onClick={props.onSignIn}>
+        Sign In
+      </Button>
+      <Button
+        color="primary"
+        size="small"
+        variant="outlined"
+        onClick={props.onRegister}
+      >
+        Register
+      </Button>
+    </Flex>
+  );
+};
+
+export default UserBox;

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -55,13 +58,16 @@ exports[`renders correctly 1`] = `
       />
     </withPropsOnChange(Flex)>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -127,13 +133,16 @@ exports[`when there is more disables load more button 1`] = `
       </withPropsOnChange(Button)>
     </Localized>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<div
+<withPropsOnChange(Flex)
   className="Stream-root"
+  direction="column"
+  itemGutter={true}
 >
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
@@ -199,5 +208,5 @@ exports[`when there is more renders a load more button 1`] = `
       </withPropsOnChange(Button)>
     </Localized>
   </withPropsOnChange(Flex)>
-</div>
+</withPropsOnChange(Flex)>
 `;