feat(reply modal): change displayName from name field, style focused inputs, translate title

src/components/reply-modal/reply-modal.module.css

@@ -38,17 +38,21 @@
   background-image: var(--close-button-background-image);
 }
 
-.container input, .container textarea {
-  border: 1px solid #aaa;
-  font-family: Arial, Helvetica, sans-serif;
+.container input[type="text"], .container textarea {
+  border: var(--post-form-field-input-border, revert);
+  font-family: var(--post-form-field-font-family, revert);
   font-size: 10pt;
-  outline: medium none;
+  outline: var(--post-form-field-input-outline, revert);
   width: 298px;
   filter: var(--filter80);
   padding: 2px;
   margin-bottom: 1px;
 }
 
+.container input[type="text"]:focus, .container textarea:focus {
+  border: var(--post-form-field-input-focus-border, revert);
+}
+
 .content textarea {
   vertical-align: top;
 }

src/components/reply-modal/reply-modal.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
+import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import { isValidURL } from '../../lib/utils/url-utils';
 import useReply from '../../hooks/use-reply';
 import useWindowWidth from '../../hooks/use-window-width';
@@ -63,41 +63,38 @@ const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => {
     }
   }, [isMobile]);
 
-  const ReplyForm = React.memo(() => (
-    <div className={styles.replyForm}>
-      <div className={styles.name}>
-        <input type='text' defaultValue={displayName} placeholder={displayName ? undefined : _.capitalize(t('anonymous'))} />
-      </div>
-      <div className={styles.link}>
-        <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
-      </div>
-      <div className={styles.content}>
-        <textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
-      </div>
-      <div className={styles.footer}>
-        <button onClick={onPublishReply}>{t('reply')}</button>
-      </div>
-    </div>
-  ));
-
-  const ModalTitle = () => (
-    <div className={`replyModalHandle ${styles.title}`}>
-      Reply to c/{parentCid && Plebbit.getShortCid(parentCid)}
-      <button
-        className={styles.closeIcon}
-        onClick={(e) => {
-          e.stopPropagation();
-          closeModal();
-        }}
-        title='close'
-      />
-    </div>
-  );
-
   const modalContent = (
     <div className={styles.container} ref={nodeRef}>
-      <ModalTitle />
-      <ReplyForm />
+      <div className={`replyModalHandle ${styles.title}`}>
+        {t('reply_to_cid', { cid: `c/${parentCid && Plebbit.getShortCid(parentCid)}`, interpolation: { escapeValue: false } })}
+        <button
+          className={styles.closeIcon}
+          onClick={(e) => {
+            e.stopPropagation();
+            closeModal();
+          }}
+          title='close'
+        />
+      </div>
+      <div className={styles.replyForm}>
+        <div className={styles.name}>
+          <input
+            type='text'
+            defaultValue={displayName}
+            placeholder={displayName ? undefined : _.capitalize(t('anonymous'))}
+            onChange={(e) => setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } })}
+          />
+        </div>
+        <div className={styles.link}>
+          <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
+        </div>
+        <div className={styles.content}>
+          <textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
+        </div>
+        <div className={styles.footer}>
+          <button onClick={onPublishReply}>{t('reply')}</button>
+        </div>
+      </div>
     </div>
   );