Merge pull request #574 from cofacts/addingHeader

Fix test and header style
cofacts · Jul 21, 2024 · 91dcbfb · 91dcbfb
2 parents cccab71 + 23bae55
commit 91dcbfb
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/components/ReplyRequestReason/ReplyRequestReason.js b/components/ReplyRequestReason/ReplyRequestReason.js
@@ -1,11 +1,12 @@
 import React from 'react';
+import { t } from 'ttag';
 import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/react-hooks';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Button } from '@material-ui/core';
 import TimeInfo from 'components/Infos/TimeInfo';
-import Link from 'next/link';
+import { ProfileTooltip } from 'components/ProfileLink';
 
 import { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
@@ -37,6 +38,9 @@ const useStyles = makeStyles(theme => ({
   reason: {
     marginTop: 0,
   },
+  time: {
+    color: theme.palette.secondary[200],
+  },
   vote: {
     borderRadius: 45,
     marginRight: 3,
@@ -119,15 +123,23 @@ function ReplyRequestReason({ replyRequest, articleId }) {
 
   const isOwnReplyRequest = user && currentUser && user.id === currentUser.id;
 
+  const authorElem = (
+    <ProfileTooltip key="editor" user={user}>
+      <span>{user?.name || t`Someone`}</span>
+    </ProfileTooltip>
+  );
+
   return (
     <div className={classes.root}>
       <Box color="primary.main" pr={2}>
         <Avatar user={user} size={40} />
       </Box>
       <Box flex={1} className={classes.reasonBody}>
         <Box className={classes.header}>
-          <p className={classes.user}>{user.id}</p>
-          <TimeInfo time={replyRequest.updatedAt}/>
+          <p className={classes.user}>{authorElem}</p>
+          <TimeInfo time={replyRequest.updatedAt}>
+            {str => <span className={classes.time}>{str}</span>}
+          </TimeInfo>
         </Box>
         <p className={classes.reason}>{replyRequestReason}</p>
         <Box display="flex" justifyContent="space-between">