From ab4ca7f24c65f4f2823c9228906067e737206abc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 22:52:03 -0300
Subject: [PATCH] Adding PoweredBy and more

---
 .../stream/components/PostCommentForm.css     |  9 +++++-
 .../stream/components/PostCommentForm.tsx     | 31 ++++++++++---------
 .../client/stream/components/PoweredBy.css    |  0
 .../client/stream/components/PoweredBy.tsx    | 13 ++++++++
 .../components/UserBoxAuthenticated.css       |  4 +--
 .../components/UserBoxAuthenticated.tsx       | 10 +++---
 .../stream/containers/UserBoxContainer.tsx    | 12 +++----
 src/core/client/ui/components/Flex/Flex.css   |  6 ++--
 8 files changed, 52 insertions(+), 33 deletions(-)
 create mode 100644 src/core/client/stream/components/PoweredBy.css
 create mode 100644 src/core/client/stream/components/PoweredBy.tsx

diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index 7a8ffebee..954a4de74 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/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;
+  }
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index c90c56b96..1f57246a7 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/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>
diff --git a/src/core/client/stream/components/PoweredBy.css b/src/core/client/stream/components/PoweredBy.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
new file mode 100644
index 000000000..5991c837a
--- /dev/null
+++ b/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;
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.css b/src/core/client/stream/components/UserBoxAuthenticated.css
index 272b33bdb..a98581e23 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.css
+++ b/src/core/client/stream/components/UserBoxAuthenticated.css
@@ -1,3 +1,3 @@
-.joinText {
-  margin-right: var(--spacing-unit);
+.child {
+  width: initial;
 }
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index d897dd205..1b692ba9b 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/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"
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index db68f5cb6..a1f2bb87b 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/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}
-        /> */}
+        />
       </>
     );
   }
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 9fed320d3..2e6914c7f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/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 {