From 343784dcb1311b2ec2065e9b66ba1b859a442306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 10 Oct 2018 10:39:33 -0300
Subject: [PATCH 1/5] Profile Mobile version

---
 .../profile/components/CommentsHistory.tsx    |  2 +-
 .../profile/components/HistoryComment.css     | 13 ++-
 .../profile/components/HistoryComment.tsx     | 82 +++++++++----------
 3 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx
index 90cec49ff..654e0daf4 100644
--- a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx
+++ b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx
@@ -22,7 +22,7 @@ interface CommentsHistoryProps {
 
 const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
   return (
-    <HorizontalGutter>
+    <HorizontalGutter size="double">
       <Localized id="profile-historyComment-commentHistory">
         <Typography variant="heading3">Comment History</Typography>
       </Localized>
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
index 3d3af60dd..ac2320f04 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.css
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -3,16 +3,15 @@
 }
 
 .button,
-.replies,
-.story {
+.replies {
   composes: button from "talk-ui/shared/typography.css";
 }
 
-.sideBar {
-  min-width: 180px;
-  padding-left: var(--spacing-unit);
-}
-
 .body {
+  max-width: 80%;
   word-break: break-all;
 }
+
+.commentHistory .divider {
+  margin: calc(var(--spacing-unit) * 2) 0 !important;
+}
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index 920a5f380..ef7893cd9 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -7,6 +7,7 @@ import {
   Flex,
   HorizontalGutter,
   Icon,
+  MatchMedia,
   Typography,
 } from "talk-ui/components";
 import HTMLContent from "../../../components/HTMLContent";
@@ -25,53 +26,44 @@ export interface HistoryCommentProps {
 
 const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
   return (
-    <HorizontalGutter>
-      <Flex direction="row" justifyContent="space-between">
-        <Typography variant="bodyCopy" container="div">
-          {props.body && (
-            <HTMLContent className={styles.body}>{props.body}</HTMLContent>
-          )}
-        </Typography>
-        <Flex className={styles.sideBar} direction="column">
-          <Flex direction="row" alignItems="center" itemGutter="half">
-            <Button
-              variant="underlined"
-              target="_parent"
-              href={props.conversationURL}
-              onClick={props.onGotoConversation}
-              anchor
-            >
-              <Icon>launch</Icon>
-              <Localized id="profile-historyComment-viewConversation">
-                <span>View Conversation</span>
-              </Localized>
-            </Button>
-          </Flex>
-          <Flex direction="row" alignItems="center" itemGutter="half">
-            <Icon className={styles.icon}>schedule</Icon>
-            <Timestamp>{props.createdAt}</Timestamp>
-          </Flex>
-        </Flex>
-      </Flex>
-      {!!props.replyCount && (
-        <Flex
-          direction="row"
-          alignItems="center"
-          itemGutter="half"
-          className={styles.replies}
-        >
-          <Icon className={styles.icon}>reply</Icon>
-          <Localized
-            id="profile-historyComment-replies"
-            $replyCount={props.replyCount}
-          >
-            <span>{"Replies {$replyCount}"}</span>
-          </Localized>
-        </Flex>
-      )}
+    <HorizontalGutter className={styles.commentHistory}>
       <Localized id="profile-historyComment-story" $title={props.asset.title}>
-        <span className={styles.story}>{"Story: {$title}"}</span>
+        <Typography variant="heading4">{"Story: {$title}"}</Typography>
       </Localized>
+      <Timestamp>{props.createdAt}</Timestamp>
+      <Typography variant="bodyCopy" container="div">
+        {props.body && (
+          <HTMLContent className={styles.body}>{props.body}</HTMLContent>
+        )}
+      </Typography>
+      <Flex direction="row" alignItems="center" itemGutter="double">
+        {!!props.replyCount && (
+          <div className={styles.replies}>
+            <Icon className={styles.icon}>reply</Icon>
+            <Localized
+              id="profile-historyComment-replies"
+              $replyCount={props.replyCount}
+            >
+              <span>{"Replies {$replyCount}"}</span>
+            </Localized>
+          </div>
+        )}
+        <Button
+          variant="underlined"
+          target="_parent"
+          href={props.conversationURL}
+          onClick={props.onGotoConversation}
+          anchor
+        >
+          <Icon>launch</Icon>
+          <Localized id="profile-historyComment-viewConversation">
+            <span>View Conversation</span>
+          </Localized>
+        </Button>
+      </Flex>
+      <MatchMedia lteWidth="xs">
+        <hr className={styles.divider} />
+      </MatchMedia>
     </HorizontalGutter>
   );
 };

From dcc4b4a8927bdcc5d6e54ce9d9e87404d59480f7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 Oct 2018 17:07:54 +0200
Subject: [PATCH 2/5] fix: styles closer to design

---
 .../client/stream/tabs/profile/components/HistoryComment.css  | 4 ++--
 .../client/stream/tabs/profile/components/HistoryComment.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
index ac2320f04..2c45cedfd 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.css
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -1,8 +1,8 @@
 .icon {
   color: var(--palette-text-secondary);
+  margin-right: calc(0.5 * var(--spacing-unit));
 }
 
-.button,
 .replies {
   composes: button from "talk-ui/shared/typography.css";
 }
@@ -12,6 +12,6 @@
   word-break: break-all;
 }
 
-.commentHistory .divider {
+.divider {
   margin: calc(var(--spacing-unit) * 2) 0 !important;
 }
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index ef7893cd9..8cc721b9f 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -26,7 +26,7 @@ export interface HistoryCommentProps {
 
 const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
   return (
-    <HorizontalGutter className={styles.commentHistory}>
+    <HorizontalGutter>
       <Localized id="profile-historyComment-story" $title={props.asset.title}>
         <Typography variant="heading4">{"Story: {$title}"}</Typography>
       </Localized>
@@ -36,7 +36,7 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
           <HTMLContent className={styles.body}>{props.body}</HTMLContent>
         )}
       </Typography>
-      <Flex direction="row" alignItems="center" itemGutter="double">
+      <Flex direction="row" alignItems="center" itemGutter>
         {!!props.replyCount && (
           <div className={styles.replies}>
             <Icon className={styles.icon}>reply</Icon>

From b74e8f339097671e939ca081f1c8049a52c627b5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 Oct 2018 17:08:51 +0200
Subject: [PATCH 3/5] fix: only break words when necessary

---
 .../client/stream/tabs/profile/components/HistoryComment.css     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
index 2c45cedfd..3fc148629 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.css
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -9,7 +9,6 @@
 
 .body {
   max-width: 80%;
-  word-break: break-all;
 }
 
 .divider {

From a8d69a0c5db44902e016470ab0e8522ae661d70e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 Oct 2018 17:13:11 +0200
Subject: [PATCH 4/5] feat: add some padding to default demo site

---
 src/core/client/embed/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html
index e0e8f74e6..2be8f9be9 100644
--- a/src/core/client/embed/index.html
+++ b/src/core/client/embed/index.html
@@ -9,7 +9,7 @@
   <style>
     body {
       margin: 0;
-      padding: 0 0 50px 0;
+      padding: 0 20px 50px 20px;
     }
   </style>
 </head>

From ea5d907ff5d719a794554fa0f6c0ba1efb6583f4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 Oct 2018 17:22:20 +0200
Subject: [PATCH 5/5] fix: remove 80% max-width

---
 .../client/stream/tabs/profile/components/HistoryComment.css  | 4 ----
 .../client/stream/tabs/profile/components/HistoryComment.tsx  | 4 +---
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
index 3fc148629..058599b47 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.css
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -7,10 +7,6 @@
   composes: button from "talk-ui/shared/typography.css";
 }
 
-.body {
-  max-width: 80%;
-}
-
 .divider {
   margin: calc(var(--spacing-unit) * 2) 0 !important;
 }
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index 8cc721b9f..4aca65531 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -32,9 +32,7 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
       </Localized>
       <Timestamp>{props.createdAt}</Timestamp>
       <Typography variant="bodyCopy" container="div">
-        {props.body && (
-          <HTMLContent className={styles.body}>{props.body}</HTMLContent>
-        )}
+        {props.body && <HTMLContent>{props.body}</HTMLContent>}
       </Typography>
       <Flex direction="row" alignItems="center" itemGutter>
         {!!props.replyCount && (