Improving appearance of markdown input fields and their previews.

ReCodEx · Dec 15, 2024 · dc24c33 · dc24c33
1 parent 1fb3e3f
commit dc24c33
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/src/components/forms/Fields/MarkdownTextAreaField.js b/src/components/forms/Fields/MarkdownTextAreaField.js
@@ -36,8 +36,8 @@ class MarkdownTextAreaField extends Component {
               <FormattedMessage id="app.markdownTextArea.showPreview" defaultMessage="Preview" />
             </OnOffCheckbox>
           </Col>
-          <Col sm={8}>
-            <Form.Text className="text-end">
+          <Col sm={8} className="text-end">
+            <Form.Text>
               <FormattedMessage
                 id="app.markdownTextArea.canUseMarkdown"
                 defaultMessage="You can use <a>markdown syntax</a> in this field."
@@ -54,18 +54,12 @@ class MarkdownTextAreaField extends Component {
         </Row>
 
         {showPreview && (
-          <div className="mt-3">
-            <h6>
-              <FormattedMessage id="app.markdownTextArea.preview" defaultMessage="Preview:" />
-            </h6>
-            <div className={styles.preview}>
+          <div className="mt-1">
+            <div className={`${styles.preview} ${value.length === 0 ? styles.previewEmpty : ''}`}>
               {value.length === 0 && (
-                <p>
-                  <small>
-                    (
-                    <FormattedMessage id="app.markdownTextArea.empty" defaultMessage="Empty" />)
-                  </small>
-                </p>
+                <>
+                  (<FormattedMessage id="app.markdownTextArea.empty" defaultMessage="Empty" />)
+                </>
               )}
               <Markdown source={value} />
             </div>

diff --git a/src/components/forms/Fields/MarkdownTextAreaField.less b/src/components/forms/Fields/MarkdownTextAreaField.less
@@ -1,6 +1,15 @@
 .preview {
   background: #eee;
   border: 1px solid #ccc;
-  padding: 10px 5px;
+  padding: 0.5rem;
   margin-bottom: 2em;
+  border-radius: 0.25rem;
+}
+
+.previewEmpty {
+  color: #888;
+  font-size: 80%;
+  font-style: italic;
+  text-align: center;
+  padding-bottom: 0.75rem;
 }
diff --git a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.css b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.css
@@ -59,6 +59,11 @@ pre .sourceCodeViewerComments, code .sourceCodeViewerComments {
   border-radius: 0.2em;
   padding: 0.5em;
   position: relative;
+  /* reset the font so the code view font is not inherited */
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
 }
 
 .sourceCodeViewerComments > div.issue {
@@ -150,4 +155,4 @@ pre .sourceCodeViewerComments, code .sourceCodeViewerComments {
 
 .sourceCodeViewer.addComment .scvAddButton:hover::before {
   opacity: 1;
-}
+}