Adding PoweredBy and more

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

@@ -17,5 +17,12 @@
 
 .postButtonContainer {
   display: flex;
-  justify-content: flex-end;
+
+  &:first-child {
+    flex-grow: 1;
+  }
+
+  &:last-child {
+    flex-grow: 0;
+  }
 }

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

@@ -5,8 +5,8 @@ import { Field, Form } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
+import PoweredBy from "talk-stream/components/PoweredBy";
 import { Button, Typography } from "talk-ui/components";
-
 import * as styles from "./PostCommentForm.css";
 
 interface FormProps {
@@ -41,25 +41,26 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        <div className={styles.postButtonContainer}>
-          {props.signedIn ? (
+        {props.signedIn ? (
+          <div className={styles.postButtonContainer}>
+            <PoweredBy />
             <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>
-          )}
-        </div>
+          </div>
+        ) : (
+          <Button
+            color="primary"
+            variant="filled"
+            disabled
+            fullWidth
+            size="large"
+          >
+            Sign In and join the conversation
+          </Button>
+        )}
       </form>
     )}
   </Form>

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

@@ -0,0 +1,13 @@
+import React, { StatelessComponent } from "react";
+import { Flex, 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>
+  );
+};
+
+export default PoweredBy;

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

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

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

@@ -4,7 +4,7 @@ import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
 
 import MatchMedia from "talk-ui/components/MatchMedia";
-// import * as styles from "./UserBoxUnauthenticated.css";
+import * as styles from "./UserBoxAuthenticated.css";
 
 export interface UserBoxUnauthenticatedProps {
   onSignOut: () => void;
@@ -15,7 +15,7 @@ const UserBoxAuthenticated: StatelessComponent<
 > = props => {
   return (
     <Flex itemGutter>
-      <Flex itemGutter="half">
+      <Flex itemGutter="half" className={styles.child}>
         <MatchMedia gteWidth="sm">
           <Localized id="comments-userBoxAuthenticated-signedInAs">
             <Typography variant="bodyCopy" component="span">
@@ -27,13 +27,13 @@ const UserBoxAuthenticated: StatelessComponent<
           </Typography>
         </MatchMedia>
       </Flex>
-      <Flex itemGutter="half">
-        <Localized id="comments-userBoxUnauthenticated-notYou">
+      <Flex itemGutter="half" className={styles.child}>
+        <Localized id="comments-userBoxAuthenticated-notYou">
           <Typography variant="bodyCopy" component="span">
             Not you?
           </Typography>
         </Localized>
-        <Localized id="comments-userBoxUnauthenticated-register">
+        <Localized id="comments-userBoxAuthenticated-signOut">
           <Button
             color="primary"
             size="small"

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -11,8 +11,8 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
-// import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+// import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
 interface InnerProps {
   local: Local;
@@ -24,7 +24,7 @@ export class UserBoxContainer extends Component<InnerProps> {
   private handleFocus = () => this.props.setAuthPopupState({ focus: true });
   private handleBlur = () => this.props.setAuthPopupState({ focus: false });
   private handleClose = () => this.props.setAuthPopupState({ open: false });
-  // private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
   private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
 
   public render() {
@@ -45,11 +45,11 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBoxAuthenticated onSignOut={this.handleRegister} />
-        {/* <UserBoxUnauthenticated
+        {/* <UserBoxAuthenticated onSignOut={this.handleRegister} /> */}
+        <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
-        /> */}
+        />
       </>
     );
   }

src/core/client/ui/components/Flex/Flex.css

@@ -1,12 +1,10 @@
 .root {
-  flex-grow: 1;
-  max-width: 100%;
+  width: 100%;
 }
 
 .flex {
   display: flex;
-  flex-grow: 1;
-  max-width: 100%;
+  width: 100%;
 }
 
 .halfItemGutter {