From 6a49363fc0be0a7e3df90bea36f4d045db97c34b Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 9 May 2024 22:55:57 +0200
Subject: [PATCH] style(reply modal): add background color to c/parentCid

---
 .../reply-modal/reply-modal.module.css           | 13 ++++++++++---
 src/components/reply-modal/reply-modal.tsx       | 16 +++++++++++++++-
 src/themes.css                                   |  5 ++++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css
index e0cd4bbe..bb6f689b 100644
--- a/src/components/reply-modal/reply-modal.module.css
+++ b/src/components/reply-modal/reply-modal.module.css
@@ -71,13 +71,20 @@
   cursor: pointer;
 }
 
+.parentCidWrapper {
+  position: absolute;
+  background-color: var(--post-form-field-input-background-color, white);
+  width: 105px;
+  height: 15px;
+  left: 1px;
+  top: 1px;
+  padding: 5px;
+}
+
 .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 e7748f2d..8d2050e4 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -63,6 +63,16 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
     }
   }, [isMobile, scrollY]);
 
+  const parentCidRef = useRef<HTMLSpanElement>(null);
+  const parentCidWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (parentCidRef.current && parentCidRef.current) {
+      const cidWidth = parentCidRef.current.offsetWidth;
+      parentCidRef.current.style.width = `${cidWidth}px`;
+    }
+  }, [parentCid]);
+
   const modalContent = (
     <div className={styles.container} ref={nodeRef}>
       <div className={`replyModalHandle ${styles.title}`}>
@@ -89,7 +99,11 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
           <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
         </div>
         <div className={styles.content}>
-          <span className={styles.parentCid}>{`c/${parentCid && Plebbit.getShortCid(parentCid)}`}</span>
+          <span className={styles.parentCidWrapper} ref={parentCidWrapperRef}>
+            <span className={styles.parentCid} ref={parentCidRef}>
+              {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
+            </span>
+          </span>
           <textarea
             cols={48}
             rows={4}
diff --git a/src/themes.css b/src/themes.css
index da09d3f5..d1d8a358 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -278,7 +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-form-field-input-color: #000;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
@@ -410,6 +410,7 @@
   --post-form-field-border: none;
   --post-form-field-title-font-weight: 700;
   --post-form-field-title-font-size: 16px;
+  --post-form-field-input-color: #000;
 
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
@@ -551,6 +552,7 @@
   --post-form-field-border: none;
   --post-form-field-title-font-weight: 700;
   --post-form-field-title-font-size: 16px;
+  --post-form-field-input-color: #000;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
@@ -868,6 +870,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: #f60;