Stream Styling

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

@@ -22,7 +22,6 @@ const App: StatelessComponent<AppProps> = props => {
       {view}
     </Flex>
   );
-  // return <div className={styles.root}>{view}</div>;
 };
 
 export default App;

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

@@ -1,15 +1,18 @@
 .root {
   width: 100%;
+  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
-
   display: block;
-  height: 100px;
+  height: 150px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: var(--spacing-unit);
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
 }
 
 .postButtonContainer {

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

@@ -15,6 +15,7 @@ interface FormProps {
 
 export interface PostCommentFormProps {
   onSubmit: OnSubmit<FormProps>;
+  signedIn: boolean;
 }
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
@@ -29,6 +30,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
                 name={input.name}
                 onChange={input.onChange}
                 value={input.value}
+                placeholder="Post a comment"
               />
               {meta.touched &&
                 (meta.error || meta.submitError) && (
@@ -40,11 +42,23 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
           )}
         </Field>
         <div className={styles.postButtonContainer}>
-          <Localized id="comments-postCommentForm-post">
-            <Button color="primary" variant="filled" disabled={submitting}>
-              Post
+          {props.signedIn ? (
+            <Localized id="comments-postCommentForm-submit">
+              <Button color="primary" variant="filled" disabled={submitting}>
+                Submit
+              </Button>
+            </Localized>
+          ) : (
+            <Button
+              color="primary"
+              variant="filled"
+              disabled
+              fullWidth
+              size="large"
+            >
+              Sign In and join the conversation
             </Button>
-          </Localized>
+          )}
         </div>
       </form>
     )}

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

@@ -15,7 +15,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex>
+    <Flex itemGutter>
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography