From 22fa940ddb89ad90049c8f820facd86cb9ef6db7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Aug 2018 12:11:32 -0300
Subject: [PATCH] Adding PoweredBy Component

---
 .../stream/components/PostCommentForm.tsx      |  3 ++-
 .../client/stream/components/PoweredBy.css     |  3 +++
 .../client/stream/components/PoweredBy.tsx     | 18 ++++++++++++++++++
 .../components/UserBoxUnauthenticated.tsx      |  2 +-
 4 files changed, 24 insertions(+), 2 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.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 72bc0ad70..656ec54f8 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
-
+import PoweredBy from "./PoweredBy";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
 import { Button, Typography } from "talk-ui/components";
@@ -40,6 +40,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
           )}
         </Field>
         <div className={styles.postButtonContainer}>
+          <PoweredBy />
           <Localized id="comments-postCommentForm-post">
             <Button color="primary" variant="filled" disabled={submitting}>
               Post
diff --git a/src/core/client/stream/components/PoweredBy.css b/src/core/client/stream/components/PoweredBy.css
new file mode 100644
index 000000000..25c884af5
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.css
@@ -0,0 +1,3 @@
+.text {
+  font-size: calc(14rem / var(--rem-base));
+}
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
new file mode 100644
index 000000000..4ae2f3c00
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -0,0 +1,18 @@
+import React, { StatelessComponent } from "react";
+import { Flex, Typography } from "talk-ui/components";
+import * as styles from "./PoweredBy.css";
+
+const PoweredBy: StatelessComponent = props => {
+  return (
+    <Flex itemGutter="half">
+      <Typography className={styles.text} variant="bodyCopy">
+        Powered by
+      </Typography>
+      <Typography className={styles.text} variant="heading4">
+        The Coral Project
+      </Typography>
+    </Flex>
+  );
+};
+
+export default PoweredBy;
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 323b0acf5..f1a8716ee 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/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