From 45e942a345fa28e0df1ce556ccb4a15a7cc5837d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 25 Sep 2018 14:13:54 -0300
Subject: [PATCH] Adding styling

---
 src/core/client/stream/components/App.css                | 4 ++++
 src/core/client/stream/components/App.tsx                | 2 +-
 src/core/client/stream/components/HTMLContent.tsx        | 9 +++++++--
 .../stream/tabs/profile/components/HistoryComment.css    | 5 +++++
 .../stream/tabs/profile/components/HistoryComment.tsx    | 8 +++++---
 src/core/client/ui/components/Tabs/TabContent.tsx        | 7 ++++++-
 6 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css
index 2bcabb67f..75246e7c6 100644
--- a/src/core/client/stream/components/App.css
+++ b/src/core/client/stream/components/App.css
@@ -14,3 +14,7 @@
 .root {
   width: 100%;
 }
+
+.tabContent {
+  padding-top: var(--spacing-unit);
+}
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 4b9107bd6..8913855f4 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -30,7 +30,7 @@ const App: StatelessComponent<AppProps> = props => {
         <Tab tabId="COMMENTS">Comments</Tab>
         <Tab tabId="PROFILE">My Profile</Tab>
       </TabBar>
-      <TabContent activeTab={props.activeTab}>
+      <TabContent activeTab={props.activeTab} className={styles.tabContent}>
         <TabPane tabId="COMMENTS">
           <CommentsPaneContainer />
         </TabPane>
diff --git a/src/core/client/stream/components/HTMLContent.tsx b/src/core/client/stream/components/HTMLContent.tsx
index 62bd62b78..a8d20c0ca 100644
--- a/src/core/client/stream/components/HTMLContent.tsx
+++ b/src/core/client/stream/components/HTMLContent.tsx
@@ -1,3 +1,4 @@
+import cn from "classnames";
 import dompurify from "dompurify";
 import React, { StatelessComponent } from "react";
 
@@ -5,11 +6,15 @@ import styles from "./HTMLContent.css";
 
 interface HTMLContentProps {
   children: string;
+  className?: string;
 }
 
-const HTMLContent: StatelessComponent<HTMLContentProps> = ({ children }) => (
+const HTMLContent: StatelessComponent<HTMLContentProps> = ({
+  children,
+  className,
+}) => (
   <div
-    className={styles.root}
+    className={cn(styles.root, className)}
     dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
   />
 );
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
index 1c7b924fc..286faa81f 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.css
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -9,4 +9,9 @@
 
 .sideBar {
   min-width: 180px;
+  padding-left: var(--spacing-unit);
+}
+
+.body {
+  word-break: break-all;
 }
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index 2bfc6c096..d9520d112 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -27,10 +27,12 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
       <Flex direction="row" justifyContent="space-between">
         <Typography variant="bodyCopy" container="div">
           {props.comment.body && (
-            <HTMLContent>{props.comment.body}</HTMLContent>
+            <HTMLContent className={styles.body}>
+              {props.comment.body}
+            </HTMLContent>
           )}
         </Typography>
-        <HorizontalGutter className={styles.sideBar}>
+        <Flex className={styles.sideBar} direction="column">
           <Flex direction="row" alignItems="center" itemGutter="half">
             <ButtonIcon className={styles.icon}>launch</ButtonIcon>
             <Localized id="profile-historyComment-viewConversation">
@@ -47,7 +49,7 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
             <ButtonIcon className={styles.icon}>schedule</ButtonIcon>
             <Timestamp>{props.comment.createdAt}</Timestamp>
           </Flex>
-        </HorizontalGutter>
+        </Flex>
       </Flex>
       {!!props.comment.replyCount && (
         <Flex
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
index da68f05a9..a39883195 100644
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ b/src/core/client/ui/components/Tabs/TabContent.tsx
@@ -5,10 +5,14 @@ export interface TabContentProps {
    * Active tab id/name
    */
   activeTab?: string;
+  /**
+   * classNames
+   */
+  className?: string;
 }
 
 const TabContent: StatelessComponent<TabContentProps> = props => {
-  const { children, activeTab } = props;
+  const { children, activeTab, className } = props;
   return (
     <>
       {React.Children.toArray(children)
@@ -18,6 +22,7 @@ const TabContent: StatelessComponent<TabContentProps> = props => {
         .map((child: React.ReactElement<any>, i) =>
           React.cloneElement(child, {
             tabId: child.props.tabId ? child.props.tabId : i,
+            className,
           })
         )}
     </>