style(reply modal): add c/shortParentCid to textarea

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

@@ -56,8 +56,13 @@
   border: var(--reply-modal-field-input-border-focus, revert);
 }
 
+.content {
+  position: relative;
+}
+
 .content textarea {
   vertical-align: top;
+  padding-top: 2em;
 }
 
 .footer button {
@@ -66,12 +71,13 @@
   cursor: pointer;
 }
 
-.parentCid input[type="text"] {
+.parentCid {
-  margin-bottom: -1px !important;
+  color: var(--post-form-field-input-color);
-}
+  position: absolute;
-
+  top: 4px;
-.parentCid input[type="text"]:focus {
+  left: 5px;
-  border: var(--reply-modal-field-input-border, revert) !important;
+  text-decoration: underline;
+  pointer-events: none;
 }
 
 @media (max-width: 640px) {

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

@@ -88,10 +88,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
         <div className={styles.link}>
           <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
         </div>
-        <div className={styles.parentCid}>
-          <input type='text' readOnly value={`c/${parentCid && Plebbit.getShortCid(parentCid)}`} />
-        </div>
         <div className={styles.content}>
+          <span className={styles.parentCid}>{`c/${parentCid && Plebbit.getShortCid(parentCid)}`}</span>
           <textarea
             cols={48}
             rows={4}

src/themes.css

@@ -133,6 +133,7 @@
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #ea8;
+  --post-form-field-input-color: #000;
 
   /* quotelink */
   --post-quotelink-text-color: navy;
@@ -277,6 +278,7 @@
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #98e;
+  --post-form-field-input-color: #c5c8c6;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;