From 5f3ff17eccf3bf875493d1b1a0f4d4723f046f32 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 8 May 2024 12:23:18 +0200
Subject: [PATCH] feat(reply modal): add c/parentCid above textarea, fix
 tomorrow theme

---
 src/components/post-form/post-form.module.css   |  1 -
 .../reply-modal/reply-modal.module.css          | 17 ++++++++++++++---
 src/components/reply-modal/reply-modal.tsx      |  3 +++
 src/themes.css                                  | 11 ++++++++---
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
index b90ea32e..71e01e1a 100644
--- a/src/components/post-form/post-form.module.css
+++ b/src/components/post-form/post-form.module.css
@@ -57,7 +57,6 @@
   outline: var(--post-form-field-input-outline, revert);
   background-color: var(--post-form-field-input-background-color, revert);
   color: var(--post-form-field-input-color, revert);
-  filter: var(--filter80);
   padding: 2px 4px 3px;
   font-size: 10pt;
 }
diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css
index 00c02f7a..ead7f8c3 100644
--- a/src/components/reply-modal/reply-modal.module.css
+++ b/src/components/reply-modal/reply-modal.module.css
@@ -39,18 +39,21 @@
 }
 
 .container input[type="text"], .container textarea {
-  border: var(--post-form-field-input-border, revert);
+  border: var(--post-form-field-input-focus-border, revert);
   font-family: var(--post-form-field-font-family, revert);
+  appearance: var(--post-form-field-input-appearance, revert);
+  outline: var(--post-form-field-input-outline, revert);
+  background-color: var(--post-form-field-input-background-color, revert);
+  color: var(--post-form-field-input-color, revert);
   font-size: 10pt;
   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);
+  border: var(--reply-modal-field-border-focus, revert);
 }
 
 .content textarea {
@@ -63,6 +66,14 @@
   cursor: pointer;
 }
 
+.parentCid input[type="text"] {
+  margin-bottom: -1px !important;
+}
+
+.parentCid input[type="text"]:focus {
+  border: var(--post-form-field-input-focus-border) !important;
+}
+
 @media (max-width: 640px) {
   .container {
     position: absolute;
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 0b0a069c..fae5fedb 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -88,6 +88,9 @@ 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}>
           <textarea
             cols={48}
diff --git a/src/themes.css b/src/themes.css
index ad157561..076271c3 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -690,15 +690,20 @@
   --post-form-toggle-font-weight: 700;
   --post-form-field-title-background-color: #282a2e;
   --post-form-field-title-color: #c5c8c6;
-  --post-form-field-border: 1px solid #111;
+  --post-form-field-border: 1px solid #000;
   --post-form-field-title-font-weight: 700;
   --post-form-field-title-padding: 0 5px;
   --post-form-field-title-font-size: 10pt;
-  --post-form-field-input-border: 1px solid #aaa;
+  --post-form-field-input-border: 1px solid #000;
+  --post-form-field-input-focus-border: 1px solid #515151;
+  --post-form-field-input-background-color: #282a2e;
+  --post-form-field-input-color: #c5c8c6;
   --post-form-field-font-family: arial, helvetica, sans-serif;
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
-  --post-form-field-input-focus-border: 1px solid #111;
+
+  /* reply modal */
+  --reply-modal-field-border-focus: 1px solid #757575;
 
   /* select */
   --select-border: 1px solid #575a60;