From 15132a1533166607e9969506ec91fd9c87a4ed1c Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 1 May 2021 18:42:29 +0200
Subject: Show placeholder for empty comment(preview)

---
 webui/src/components/CommentInput/CommentInput.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'webui/src/components/CommentInput/CommentInput.tsx')

diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index 7bf0995d..03f351e7 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
+import { Typography } from '@material-ui/core';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import TextField from '@material-ui/core/TextField';
@@ -24,6 +25,10 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: `solid 3px ${theme.palette.grey['200']}`,
     minHeight: '5rem',
   },
+  previewPlaceholder: {
+    color: theme.palette.text.secondary,
+    fontStyle: 'italic',
+  },
 }));
 
 type TabPanelProps = {
@@ -99,7 +104,13 @@ function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
           />
         </TabPanel>
         <TabPanel value={tab} index={1} className={classes.preview}>
-          <Content markdown={input} />
+          {input !== '' ? (
+            <Content markdown={input} />
+          ) : (
+            <Typography className={classes.previewPlaceholder}>
+              Nothing to preview.
+            </Typography>
+          )}
         </TabPanel>
       </div>
     </div>
-- 
cgit v1.2.3

