From f26bcfeced156178388c6c2a29fc5626492ba9c4 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 9 May 2024 22:25:06 +0200
Subject: [PATCH] style(reply modal): add c/shortParentCid to textarea

---
 .../reply-modal/reply-modal.module.css         | 18 ++++++++++++------
 src/components/reply-modal/reply-modal.tsx     |  4 +---
 src/themes.css                                 |  2 ++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css
index 1d05b91d..e0cd4bbe 100644
--- a/src/components/reply-modal/reply-modal.module.css
+++ b/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"] {
-  margin-bottom: -1px !important;
-}
-
-.parentCid input[type="text"]:focus {
-  border: var(--reply-modal-field-input-border, revert) !important;
+.parentCid {
+  color: var(--post-form-field-input-color);
+  position: absolute;
+  top: 4px;
+  left: 5px;
+  text-decoration: underline;
+  pointer-events: none;
 }
 
 @media (max-width: 640px) {
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index fae5fedb..e7748f2d 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/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}
diff --git a/src/themes.css b/src/themes.css
index 2ce2ac2d..da09d3f5 100644
--- a/src/themes.css
+++ b/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;