UI for comments section in editor updated as per design (#2390)

* enhancement ::
updating ui issues in comment edtior section

* bugfix :: updates styling , margin issues in comment mentioning

* styling fix

* fixing ui of comments

* changing user name to slice of firstname and lastname

frontend/src/Editor/Comments.jsx

@@ -19,6 +19,9 @@ const Comments = ({ newThread = {}, appVersionsId, socket, canvasWidth }) => {
       const _users = data.users.map((u) => ({
         id: u.id,
         display: `${capitalize(u.first_name)} ${capitalize(u.last_name)}`,
+        email: u.email,
+        first_name: u.first_name,
+        last_name: u.last_name,
       }));
       setUsers(_users);
     });

frontend/src/_ui/Mentions/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { MentionsInput, Mention } from 'react-mentions';
 
 const Mentions = ({ users, value, setValue, placeholder, darkMode }) => {
@@ -30,13 +29,15 @@ const Mentions = ({ users, value, setValue, placeholder, darkMode }) => {
             backgroundColor: 'white',
             boxShadow: '0px 2px 12px rgba(41, 45, 55, 0.156863)',
             borderRadius: '4',
-            marginTop: '-20px',
-            height: '22px',
+            marginTop: '-100px',
+            height: '100%',
+            width: '270px',
             fontSize: '14px',
             color: '#282D37',
           },
           item: {
             padding: '10px 16px',
+            height: '56px',
 
             '&focused': {
               background: '#EEF3F9',
@@ -58,6 +59,46 @@ const Mentions = ({ users, value, setValue, placeholder, darkMode }) => {
         //   backgroundColor: '#218DE3',
         // }}
         appendSpaceOnAdd
+        renderSuggestion={(suggestion) => (
+          <div
+            style={{
+              display: 'flex',
+            }}
+          >
+            <div
+              style={{
+                width: '36px',
+                height: '36px',
+                borderRadius: '100%',
+                backgroundColor: '#4D72FA',
+                display: 'flex',
+                textAlign: 'center',
+                justifyContent: 'center',
+                marginRight: '12px',
+                alignItems: 'center',
+                color: 'white',
+                textTransform: 'uppercase',
+              }}
+            >
+              {suggestion.first_name.slice(0, 1) + suggestion.last_name.slice(0, 1)}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <p
+                style={{
+                  marginBottom: '0px',
+                }}
+              >
+                {suggestion.display}
+              </p>
+              <p>{suggestion.email}</p>
+            </div>
+          </div>
+        )}
       />
     </MentionsInput>
   );