feat: add background color to comment area #575

Author: shuashuai

i18n/de_DE.yaml

@@ -722,9 +722,9 @@ ui:
     btn_save_edits: Änderungen speichern
     btn_cancel: Stornieren
   dates:
-    long_date: MMM D
-    long_date_with_year: "MMM D, JJJJ"
-    long_date_with_time: "MMM T, JJJJ [at] HH:mm"
+    long_date: DD. MMM
+    long_date_with_year: "DD. MMM YYYY"
+    long_date_with_time: "DD. MMM YYYY [at] HH:mm"
     now: jetzt
     x_seconds_ago: "vor {{count}}s"
     x_minutes_ago: "vor {{count}}m"

ui/src/components/Comment/index.tsx

@@ -328,16 +328,17 @@ const Comment = ({ objectId, mode, commentId }) => {
     );
   };
   return (
-    <div className="comments-wrap">
-      {comments.map((item, index) => {
+    <div
+      className={classNames(
+        'comments-wrap',
+        comments.length > 0 && 'bg-light px-3 py-2 rounded',
+      )}>
+      {comments.map((item) => {
         return (
           <div
             key={item.comment_id}
             id={item.comment_id}
-            className={classNames(
-              'border-bottom py-2 comment-item',
-              index === 0 && 'border-top',
-            )}>
+            className="border-bottom py-2 comment-item">
             {item.showEdit ? (
               <Form
                 className="mt-2"
@@ -397,7 +398,7 @@ const Comment = ({ objectId, mode, commentId }) => {
         );
       })}
 
-      <div className="mt-2">
+      <div className={classNames(comments.length > 0 && 'py-2')}>
         <Button
           variant="link"
           className="p-0 btn-no-border"
@@ -425,7 +426,10 @@ const Comment = ({ objectId, mode, commentId }) => {
       {visibleComment && (
         <Form
           mode={mode}
-          className="mt-2"
+          className={classNames(
+            'mt-2',
+            comments.length <= 0 && 'bg-light p-3 rounded',
+          )}
           onSendReply={(value) => handleSendReply({ value, type: 'comment' })}
           onCancel={() => setVisibleComment(!visibleComment)}
         />