Design improvements

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

@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 .footer {
   margin-top: var(--spacing-unit);

src/core/client/stream/components/PermalinkButton/PermalinkPopover.css

@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textField {

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

@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textarea {
@@ -13,14 +12,6 @@
   resize: vertical;
 }
 
-.postButtonContainer {
-  display: flex;
-
-  &:first-child {
-    flex-grow: 1;
-  }
-
-  &:last-child {
-    flex-grow: 0;
-  }
+.poweredBy {
+  margin-top: calc(-0.5 * var(--spacing-unit));
 }

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

@@ -19,10 +19,10 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <HorizontalGutter size="half">
+        <HorizontalGutter>
           <Field name="body" validate={required}>
             {({ input, meta }) => (
-              <div style={{ width: "100%" }}>
+              <div>
                 <textarea
                   className={styles.textarea}
                   name={input.name}
@@ -44,7 +44,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             justifyContent="space-between"
             alignItems="flex-start"
           >
-            <PoweredBy />
+            <PoweredBy className={styles.poweredBy} />
             <Localized id="comments-postCommentForm-submit">
               <Button
                 color="primary"

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

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

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

@@ -0,0 +1,21 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Button, HorizontalGutter } from "talk-ui/components";
+import * as styles from "./PostCommentFormFake.css";
+
+const PostCommentFormFake: StatelessComponent = props => (
+  <HorizontalGutter className={styles.root}>
+    <textarea
+      className={styles.textarea}
+      placeholder="Post a comment"
+      disabled
+    />
+    <Localized id="comments-PostCommentFormFake-signInAndJoin">
+      <Button color="primary" variant="filled" disabled type="submit" fullWidth>
+        Sign in and join the conversation
+      </Button>
+    </Localized>
+  </HorizontalGutter>
+);
+
+export default PostCommentFormFake;

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

@@ -1,10 +1,19 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-const PoweredBy: StatelessComponent = () => {
+interface Props {
+  className: string;
+}
+
+const PoweredBy: StatelessComponent<Props> = props => {
   return (
-    <div>
-      <Typography variant="inputDescription" container="span">
+    <div className={cn(props.className)}>
+      <Typography
+        variant="inputDescription"
+        container="span"
+        color="textSecondary"
+      >
         Powered by
       </Typography>{" "}
       <Typography variant="heading4" container="span">

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

@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
+import PostCommentFormFake from "./PostCommentFormFake";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -22,10 +23,14 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <HorizontalGutter className={styles.root}>
+    <HorizontalGutter className={styles.root} size="double">
       <HorizontalGutter size="half">
         <UserBoxContainer user={props.user} />
-        <PostCommentFormContainer assetID={props.assetID} />
+        {props.user ? (
+          <PostCommentFormContainer assetID={props.assetID} />
+        ) : (
+          <PostCommentFormFake />
+        )}
       </HorizontalGutter>
       <HorizontalGutter
         id="talk-comments-stream-log"

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

@@ -11,14 +11,20 @@ export interface UserBoxAuthenticatedProps {
 const UserBoxAuthenticated: StatelessComponent<
   UserBoxAuthenticatedProps
 > = props => {
+  const Username = () => (
+    <Typography variant="bodyCopyBold" container="span">
+      {props.username}
+    </Typography>
+  );
+
   return (
     <Flex itemGutter="half" wrap>
       <Localized
         id="comments-userBoxAuthenticated-signedInAs"
-        username={<Typography variant="bodyCopyBold" container="span" />}
+        username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
-          {"Signed in as <username>Username</username>."}
+          {"Signed in as <username />."}
         </Typography>
       </Localized>
       <Localized
@@ -32,7 +38,7 @@ const UserBoxAuthenticated: StatelessComponent<
           />
         }
       >
-        <Typography variant="bodyCopy" container={<Flex inline wrap />}>
+        <Typography variant="bodyCopy" container={Flex}>
           {"Not you? <button>Sign Out</button>"}
         </Typography>
       </Localized>

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

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