refactor(ui): adjust requested username text on RequestCard to show avatar

src/components/RequestCard/index.tsx

@@ -17,7 +17,6 @@ import globalMessages from '../../i18n/globalMessages';
 import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
-  requestedby: 'Requested by {username}',
   seasons: 'Seasons',
   all: 'All',
 });
@@ -106,10 +105,15 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
             {isMovie(title) ? title.title : title.name}
           </Link>
         </h2>
-        <div className="text-xs truncate sm:text-sm">
+        <div className="flex items-center">
-          {intl.formatMessage(messages.requestedby, {
+          <img
-            username: requestData.requestedBy.displayName,
+            src={requestData.requestedBy.avatar}
-          })}
+            alt=""
+            className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5"
+          />
+          <span className="text-xs truncate sm:text-sm">
+            {requestData.requestedBy.displayName}
+          </span>
         </div>
         {requestData.media.status && (
           <div className="mt-1 sm:mt-2">

src/i18n/locale/en.json

@@ -143,7 +143,6 @@
   "components.RequestButton.viewrequest": "View Request",
   "components.RequestButton.viewrequest4k": "View 4K Request",
   "components.RequestCard.all": "All",
-  "components.RequestCard.requestedby": "Requested by {username}",
   "components.RequestCard.seasons": "Seasons",
   "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
   "components.RequestList.RequestItem.notavailable": "N/A",