Channges

src/core/client/stream/tabs/profile/components/CommentsHistory.tsx

@@ -1,20 +1,32 @@
 import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
-import { CommentsHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql";
 import { HorizontalGutter, Typography } from "talk-ui/components";
 import HistoryComment from "./HistoryComment";
 
-export interface CommentsHistoryProps {
+interface Me {
+  comments: {
+    edges: Array<{
+      node: {
+        id: string;
+        body: string | null;
+        createdAt: any;
+        replyCount: number | null;
+      };
+    }>;
+  };
+}
+
+interface CommentsHistoryProps {
   goToConversation: () => void;
-  me: MeData;
+  me: Me;
 }
 
 const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
   const comments = props.me.comments.edges.map(edge => edge.node);
   return (
     <HorizontalGutter size="double">
-      <Localized id="profile-commentHistory">
+      <Localized id="profile-historyComment-commentHistory">
         <Typography variant="heading3">Comment History</Typography>
       </Localized>
       {comments.map(comment => (

src/core/client/stream/tabs/profile/components/HistoryComment.css

@@ -3,13 +3,8 @@
 }
 
 .button,
-.text {
-  color: var(--palette-text-secondary);
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(14rem / var(--rem-base));
-  line-height: calc(18em / 14);
-  letter-spacing: 0;
+.replies {
+  composes: button from "talk-ui/shared/typography.css";
 }
 
 .sideBar {

src/core/client/stream/tabs/profile/components/HistoryComment.tsx

@@ -4,39 +4,39 @@ import { StatelessComponent } from "react";
 import Timestamp from "talk-stream/components/Timestamp";
 import {
   BaseButton,
+  ButtonIcon,
   Flex,
   HorizontalGutter,
-  Icon,
   Typography,
 } from "talk-ui/components";
 import HTMLContent from "../../../components/HTMLContent";
 import * as styles from "./HistoryComment.css";
 
-export interface CommentHistoryProps {
+export interface HistoryCommentProps {
   comment: {
     body: string | null;
     createdAt: string;
     replyCount: number | null;
   };
-  goToConversation: () => void;
+  onGoToConversation: () => void;
 }
 
-const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
+const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
   return (
     <HorizontalGutter>
       <Flex direction="row" justifyContent="space-between">
-        <Typography variant="bodyCopy" headlineMapping={{ bodyCopy: "div" }}>
+        <Typography variant="bodyCopy" container="div">
           {props.comment.body && (
             <HTMLContent>{props.comment.body}</HTMLContent>
           )}
         </Typography>
         <HorizontalGutter className={styles.sideBar}>
           <Flex direction="row" alignItems="center" itemGutter="half">
-            <Icon className={styles.icon}>launch</Icon>
-            <Localized id="profile-viewConversation">
+            <ButtonIcon className={styles.icon}>launch</ButtonIcon>
+            <Localized id="profile-historyComment-viewConversation">
               <BaseButton
                 className={styles.button}
-                onClick={props.goToConversation}
+                onClick={props.onGoToConversation}
                 anchor
               >
                 View Conversation
@@ -44,7 +44,7 @@ const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
             </Localized>
           </Flex>
           <Flex direction="row" alignItems="center" itemGutter="half">
-            <Icon className={styles.icon}>schedule</Icon>
+            <ButtonIcon className={styles.icon}>schedule</ButtonIcon>
             <Timestamp>{props.comment.createdAt}</Timestamp>
           </Flex>
         </HorizontalGutter>
@@ -54,10 +54,10 @@ const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
           direction="row"
           alignItems="center"
           itemGutter="half"
-          className={styles.text}
+          className={styles.replies}
         >
-          <Icon className={styles.icon}>reply</Icon>
-          <Localized id="profile-replies">
+          <ButtonIcon className={styles.icon}>reply</ButtonIcon>
+          <Localized id="profile-historyComment-replies">
             <span>Replies {props.comment.replyCount}</span>
           </Localized>
         </Flex>

src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx

@@ -16,7 +16,7 @@ interface CommentsHistoryContainerProps {
 export class CommentsHistoryContainer extends React.Component<
   CommentsHistoryContainerProps
 > {
-  private goToConversation = () => {
+  private onGoToConversation = () => {
     if (this.props.local.assetURL) {
       window.open(this.props.local.assetURL, "_blank");
     }
@@ -25,7 +25,7 @@ export class CommentsHistoryContainer extends React.Component<
     return (
       <CommentsHistory
         me={this.props.me}
-        goToConversation={this.goToConversation}
+        onGoToConversation={this.onGoToConversation}
       />
     );
   }

src/locales/en-US/stream.ftl

@@ -70,6 +70,6 @@ comments-editCommentForm-editTimeExpired = Edit time has expired. You can no lon
 comments-editedMarker-edited = Edited
 
 ## Profile Tab
-profile-viewConversation = View Conversation
-profile-replies= Replies
-profile-commentHistory= Comment History
+profile-historyComment-viewConversation = View Conversation
+profile-historyComment-replies = Replies
+profile-historyComment-commentHistory = Comment History