[mobile] Add styles of comments for android

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -37,7 +37,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
                 </NavRight>
             </Navbar>
             <div className='wrap-comment'>
-                <div className="header-comment">
+                <div className="comment-header">
                     {Device.android &&
                     <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
                     }
@@ -74,7 +74,7 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
                     </div>
                 </div>
                 <div class='wrap-comment'>
-                    <div class="header-comment">
+                    <div class="comment-header">
                         ${Device.android ? templateInitials : ''}
                         <div class='name'>${userInfo.name}</div>
                     </div>
@@ -237,7 +237,7 @@ const EditCommentDialog = inject("storeComments")(observer(({storeComments, comm
                     </div>
                 </div>
                 <div class='wrap-comment'>
-                    <div class="header-comment">
+                    <div class="comment-header">
                         ${Device.android ? templateInitials : ''}
                         <div>
                             <div class='name'>${comment.userName}</div>
@@ -318,7 +318,7 @@ const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo
                 </NavRight>
             </Navbar>
             <div className='wrap-comment'>
-                <div className="header-comment">
+                <div className="comment-header">
                     {Device.android &&
                     <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
                     }
@@ -354,7 +354,7 @@ const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInf
                     </div>
                 </div>
                 <div class='wrap-comment'>
-                    <div class="header-comment">
+                    <div class="comment-header">
                         ${Device.android ? templateInitials : ''}
                         <div class='name'>${userInfo.name}</div>
                     </div>
@@ -473,7 +473,7 @@ const EditReplyDialog = inject("storeComments")(observer(({storeComments, commen
                     </div>
                 </div>
                 <div class='wrap-comment'>
-                    <div class="header-comment">
+                    <div class="comment-header">
                         ${Device.android ? templateInitials : ''}
                         <div>
                             <div class='name'>${reply.userName}</div>
@@ -580,7 +580,7 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
                                     {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
                                     <div className='comment-text'><pre>{comment.comment}</pre></div>
                                     {comment.replies.length > 0 &&
-                                    <ul className='list-reply'>
+                                    <ul className='reply-list'>
                                         {comment.replies.map((reply, indexReply) => {
                                             return (
                                                 <li key={`reply-${indexComment}-${indexReply}`}

apps/common/mobile/resources/less/comments.less

@@ -96,7 +96,7 @@
       overflow-wrap: break-word;
     }
   }
-  .list-reply {
+  .reply-list {
     padding-left: 26px;
   }
 }

apps/common/mobile/resources/less/material/comments.less

@@ -1,11 +1,8 @@
 .device-android {
-  .wrap-comment {
+  .wrap-comment, .comment-list, .reply-list {
-    .header-comment {
+    .comment-header, .reply-header {
       display: flex;
-      align-items: center;
       .initials {
-        height: 30px;
-        width: 30px;
         border-radius: 50px;
         color: @white;
         display: flex;
@@ -15,13 +12,24 @@
         font-size: 14px;
       }
     }
+  }
+
+  .wrap-comment {
+    .comment-header {
+      align-items: center;
+      .initials {
+        height: 30px;
+        width: 30px;
+      }
+    }
     .wrap-textarea {
       .input:not(.input-outline):after {
         content: none;
       }
     }
   }
-  #add-comment-dialog {
+
+  #add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
     .dialog {
       --f7-dialog-text-color: @black;
       .done {
@@ -29,4 +37,46 @@
       }
     }
   }
+
+  .comment-list {
+    .item-inner:after {
+      content: none;
+    }
+    .comment-header {
+      .left {
+        display: flex;
+        align-items: center;
+        .initials {
+          width: 40px;
+          height: 40px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+  .reply-list {
+    .reply-header {
+      .left {
+        display: flex;
+        .initials {
+          margin-top: 5px;
+          width: 24px;
+          height: 24px;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+
+  .edit-comment-popup, .edit-reply-popup, #edit-comment-dialog, #edit-reply-dialog {
+    .wrap-comment {
+      .comment-header, .reply-header {
+        .initials {
+          height: 40px;
+          width: 40px;
+        }
+      }
+    }
+  }
+
 }