From b7176830bbb4dcbbb10b6ac73f3c214742886efb Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 21 Jul 2024 20:25:28 +0800
Subject: [PATCH 1/3] fix(ReplyRequestReason): lint

---
 components/ReplyRequestReason/ReplyRequestReason.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/ReplyRequestReason/ReplyRequestReason.js b/components/ReplyRequestReason/ReplyRequestReason.js
index e3c93c6c..6f2427c8 100644
--- a/components/ReplyRequestReason/ReplyRequestReason.js
+++ b/components/ReplyRequestReason/ReplyRequestReason.js
@@ -5,7 +5,6 @@ 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 { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
@@ -127,7 +126,7 @@ function ReplyRequestReason({ replyRequest, articleId }) {
       <Box flex={1} className={classes.reasonBody}>
         <Box className={classes.header}>
           <p className={classes.user}>{user.id}</p>
-          <TimeInfo time={replyRequest.updatedAt}/>
+          <TimeInfo time={replyRequest.updatedAt} />
         </Box>
         <p className={classes.reason}>{replyRequestReason}</p>
         <Box display="flex" justifyContent="space-between">

From 3d78309f3735068e4bdb1acc4fbcc8c42211bd1c Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 21 Jul 2024 22:23:20 +0800
Subject: [PATCH 2/3] fix(ReplyRequestReason): show author of reply request

---
 components/ReplyRequestReason/ReplyRequestReason.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/ReplyRequestReason/ReplyRequestReason.js b/components/ReplyRequestReason/ReplyRequestReason.js
index 6f2427c8..609daa69 100644
--- a/components/ReplyRequestReason/ReplyRequestReason.js
+++ b/components/ReplyRequestReason/ReplyRequestReason.js
@@ -1,10 +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 { ProfileTooltip } from 'components/ProfileLink';
 
 import { ThumbUpIcon, ThumbDownIcon } from 'components/icons';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
@@ -118,6 +120,12 @@ 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}>
@@ -125,7 +133,7 @@ function ReplyRequestReason({ replyRequest, articleId }) {
       </Box>
       <Box flex={1} className={classes.reasonBody}>
         <Box className={classes.header}>
-          <p className={classes.user}>{user.id}</p>
+          <p className={classes.user}>{authorElem}</p>
           <TimeInfo time={replyRequest.updatedAt} />
         </Box>
         <p className={classes.reason}>{replyRequestReason}</p>

From 23bae5550cd319dc2192e46b37b58c75ffd2f981 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 22 Jul 2024 02:34:04 +0800
Subject: [PATCH 3/3] feat(ReplyRequestReason): adjust time info style

---
 components/ReplyRequestReason/ReplyRequestReason.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/ReplyRequestReason/ReplyRequestReason.js b/components/ReplyRequestReason/ReplyRequestReason.js
index 609daa69..f7fbe517 100644
--- a/components/ReplyRequestReason/ReplyRequestReason.js
+++ b/components/ReplyRequestReason/ReplyRequestReason.js
@@ -38,6 +38,9 @@ const useStyles = makeStyles(theme => ({
   reason: {
     marginTop: 0,
   },
+  time: {
+    color: theme.palette.secondary[200],
+  },
   vote: {
     borderRadius: 45,
     marginRight: 3,
@@ -134,7 +137,9 @@ function ReplyRequestReason({ replyRequest, articleId }) {
       <Box flex={1} className={classes.reasonBody}>
         <Box className={classes.header}>
           <p className={classes.user}>{authorElem}</p>
-          <TimeInfo time={replyRequest.updatedAt} />
+          <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">