feat(reply modal): add c/parentCid above textarea, fix tomorrow theme

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;
 }

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;

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}

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;