cometchat · priyadarshininadar · Dec 29, 2020 · Dec 29, 2020
diff --git a/CometChat/components/AddMemberView/index.js b/CometChat/components/AddMemberView/index.js
@@ -2,6 +2,7 @@ import { useState } from "react";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 
 import Avatar from "../Avatar";
 import StatusIndicator from "../StatusIndicator";
@@ -15,6 +16,7 @@ import {
   selectionBoxStyle
 } from "./style";
 
+import { theme } from "../../resources/theme";
 import inactiveIcon from "./resources/checkbox-inactive.svg";
 import activeIcon from "./resources/checkbox-blue-active.svg";
 
@@ -59,17 +61,11 @@ const AddMemberView = (props) => {
       onMouseEnter={event => toggleTooltip(event, true)}
       onMouseLeave={event => toggleTooltip(event, false)}>
         <div css={avatarStyle()} className="avatar">
-          <Avatar 
-          image={props.user.avatar} 
-          cornerRadius="50%" 
-          borderColor={props.theme.color.secondary}
-          borderWidth="1px" />
+          <Avatar image={props.user.avatar} borderColor={props.theme.borderColor.primary} />
           <StatusIndicator
           widgetsettings={props.widgetsettings}
           status={props.user.status}
-          cornerRadius="50%" 
-          borderColor={props.theme.color.darkSecondary}
-          borderWidth="1px" />
+          borderColor={props.theme.borderColor.primary} />
         </div>
         <div css={nameStyle()} className="name">{props.user.name}</div>
       </td>
@@ -86,4 +82,13 @@ const AddMemberView = (props) => {
   )
 }
 
+// Specifies the default values for props:
+AddMemberView.defaultProps = {
+  theme: theme
+};
+
+AddMemberView.propTypes = {
+  theme: PropTypes.object
+}
+
 export default AddMemberView;
diff --git a/CometChat/components/Avatar/index.js b/CometChat/components/Avatar/index.js
@@ -2,10 +2,9 @@ import React from "react";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 
-import {
-  imgStyle
-} from "./style";
+import { imgStyle } from "./style";
 
 import srcIcon from "./resources/1px.png";
 
@@ -19,9 +18,9 @@ class Avatar extends React.Component {
 
   render() {
 
-    const borderWidth = this.props.borderWidth || '1px';
-    const borderColor = this.props.borderColor || '#AAA';
-    const cornerRadius = this.props.cornerRadius || '50%';
+    const borderWidth = this.props.borderWidth;
+    const borderColor = this.props.borderColor;
+    const cornerRadius = this.props.cornerRadius;
     const image = this.props.image;
 
     let img = new Image();
@@ -36,9 +35,24 @@ class Avatar extends React.Component {
     const getStyle = () => ({ borderWidth: borderWidth, borderStyle: 'solid', borderColor: borderColor, 'borderRadius': cornerRadius });
 
     return (
-      <img src={srcIcon} data-src={image} css={imgStyle()} alt="Avatar" style={getStyle()} ref={el => { this.imgRef = el;}} />
+      <img src={srcIcon} data-src={image} css={imgStyle()} alt={image} style={getStyle()} ref={el => { this.imgRef = el;}} />
     );
   }
 }
 
+// Specifies the default values for props:
+Avatar.defaultProps = {
+  borderWidth: "1px",
+  borderColor: "#AAA",
+  cornerRadius: "50%",
+  image: srcIcon
+};
+
+Avatar.propTypes = {
+  borderWidth: PropTypes.string,
+  borderColor: PropTypes.string,
+  cornerRadius: PropTypes.string,
+  image: PropTypes.string
+}
+
 export default Avatar;
diff --git a/CometChat/components/Backdrop/index.js b/CometChat/components/Backdrop/index.js
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 
 import {
     backdropStyle
@@ -9,4 +10,15 @@ const backdrop = (props) => (
     props.show ? <div css={backdropStyle()} className="modal__backdrop" onClick={props.clicked}></div> : null
 );
 
+// Specifies the default values for props:
+backdrop.defaultProps = {
+    count: 0,
+    clicked: () => {}
+};
+
+backdrop.propTypes = {
+    show: PropTypes.bool,
+    clicked: PropTypes.func,
+}
+
 export default backdrop;
diff --git a/CometChat/components/BadgeCount/index.js b/CometChat/components/BadgeCount/index.js
@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 
-import {
-  badgeStyle
-} from "./style";
+import { theme } from "../../resources/theme";
+import { badgeStyle } from "./style";
 
 const badgecount = (props) => {
 
@@ -14,7 +14,19 @@ const badgecount = (props) => {
       <span css={badgeStyle(props)} className="unread-count">{props.count}</span>
     );
   }
+
   return count;
 }
 
+// Specifies the default values for props:
+badgecount.defaultProps = {
+  count: 0,
+  theme: theme
+};
+
+badgecount.propTypes = {
+  count: PropTypes.number,
+  theme: PropTypes.object
+}
+
 export default badgecount;
diff --git a/CometChat/components/BanMemberView/index.js b/CometChat/components/BanMemberView/index.js
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 
 import { CometChat } from "@cometchat-pro/chat";
 
@@ -14,18 +15,20 @@ import {
     actionStyle
 } from "./style";
 
+import Translator from "../../resources/localization/translator";
+import { theme } from "../../resources/theme";
 import unban from "./resources/block.png";
 
 const memberview = (props) => {
 
     const roles = {}
-    roles[CometChat.GROUP_MEMBER_SCOPE.ADMIN] = "Administrator";
-    roles[CometChat.GROUP_MEMBER_SCOPE.MODERATOR] = "Moderator";
-    roles[CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT] = "Participant";
+    roles[CometChat.GROUP_MEMBER_SCOPE.ADMIN] = Translator.translate("ADMINISTRATOR", props.lang);
+    roles[CometChat.GROUP_MEMBER_SCOPE.MODERATOR] = Translator.translate("MODERATOR", props.lang);
+    roles[CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT] = Translator.translate("PARTICIPANT", props.lang);
 
     let name = props.member.name;
     let scope = roles[props.member.scope];
-    let unBan = (<img src={unban} alt="Unban" onClick={() => {props.actionGenerated("unban", props.member)}} />);
+    let unBan = (<img src={unban} alt={Translator.translate("UNBAN", props.lang)} onClick={() => {props.actionGenerated("unban", props.member)}} />);
 
     //if the loggedin user is moderator, don't allow unban of banned moderators or administrators
     if(props.item.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR 
@@ -57,25 +60,19 @@ const memberview = (props) => {
         } else {
           nameContainer.removeAttribute("title");
         }
-      }
+    }
 
     return (
         <tr css={tableRowStyle(props)}>
             <td 
             onMouseEnter={event => toggleTooltip(event, true)}
             onMouseLeave={event => toggleTooltip(event, false)}>
                 <div css={avatarStyle()} className="avatar">
-                    <Avatar 
-                    image={props.member.avatar} 
-                    cornerRadius="18px" 
-                    borderColor={props.theme.borderColor.primary}
-                    borderWidth="1px" />
+                    <Avatar image={props.member.avatar} borderColor={props.theme.borderColor.primary} />
                     <StatusIndicator
                     widgetsettings={props.widgetsettings}
                     status={props.member.status}
-                    cornerRadius="50%" 
-                    borderColor={props.theme.borderColor.primary}
-                    borderWidth="1px" />
+                    borderColor={props.theme.borderColor.primary} />
                 </div>
                 <div css={nameStyle()} className="name">{name}</div>
             </td>
@@ -85,4 +82,15 @@ const memberview = (props) => {
     );
 }
 
+// Specifies the default values for props:
+memberview.defaultProps = {
+    lang: Translator.getDefaultLanguage(),
+    theme: theme
+};
+
+memberview.propTypes = {
+    lang: PropTypes.string,
+    theme: PropTypes.object
+}
+
 export default memberview;
diff --git a/CometChat/components/BanMemberView/style.js b/CometChat/components/BanMemberView/style.js
@@ -8,11 +8,6 @@ export const tableRowStyle = (props) => {
         fontSize: "14px",
         "td": {
             padding: ".625em",
-            "img": {
-                width: "36px",
-                height: "36px",
-                float: "left",
-            }
         }
     }
 }
@@ -22,10 +17,9 @@ export const avatarStyle = () => {
     return {
         display: "inline-block",
         float: "left",
-        "span": {
-            top: "26px",
-            left: "-8px",
-        }
+        width: "36px",
+        height: "36px",
+        marginRight: "8px",
     }
 }
 

diff --git a/CometChat/components/CallAlert/index.js b/CometChat/components/CallAlert/index.js
@@ -2,14 +2,17 @@ import React from "react";
 
 /** @jsx jsx */
 import { jsx, keyframes } from "@emotion/core";
+import PropTypes from 'prop-types';
+
 import { CometChat } from "@cometchat-pro/chat";
 
 import { CometChatManager } from "../../util/controller";
 import * as enums from '../../util/enums.js';
-
+import { validateWidgetSettings } from "../../util/common";
+import Translator from "../../resources/localization/translator";
 import Avatar from "../Avatar";
 import { SvgAvatar } from '../../util/svgavatar';
-import { validateWidgetSettings } from "../../util/common";
+
 import { CallAlertManager } from "./controller";
 
 import {
@@ -172,13 +175,13 @@ class CallAlert extends React.PureComponent {
 
             let callType = (
                 <React.Fragment>
-                    <img src={audioCallIcon} alt="Incoming audio call" /><span>Incoming audio call</span>
+                    <img src={audioCallIcon} alt={Translator.translate("INCOMING_AUDIO_CALL", this.props.lang)} /><span>{Translator.translate("INCOMING_AUDIO_CALL", this.props.lang)}</span>
                 </React.Fragment>
             );
             if (this.state.incomingCall.type === "video") {
                 callType = (
                     <React.Fragment>
-                        <img src={videoCallIcon} alt="Incoming video call" /><span>Incoming video call</span>
+                        <img src={videoCallIcon} alt={Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)} /><span>{Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}</span>
                     </React.Fragment>
                 );
             }
@@ -191,11 +194,13 @@ class CallAlert extends React.PureComponent {
                                 <div css={nameStyle()} className="name">{this.state.incomingCall.sender.name}</div>
                                 <div css={callTypeStyle(this.props)} className="calltype">{callType}</div>
                             </div>
-                            <div css={thumbnailStyle()} className="header__thumbnail"><Avatar cornerRadius="50%" image={this.state.incomingCall.sender.avatar} /></div>
+                            <div css={thumbnailStyle()} className="header__thumbnail">
+                                <Avatar cornerRadius="50%" image={this.state.incomingCall.sender.avatar} />
+                            </div>
                         </div>
                         <div css={headerButtonStyle()} className="callalert__buttons">
-                            <button css={ButtonStyle(this.props, 0)} className="button button__decline" onClick={this.rejectCall}>Decline</button>
-                            <button css={ButtonStyle(this.props, 1)} className="button button__accept" onClick={this.acceptCall}>Accept</button>
+                            <button css={ButtonStyle(this.props, 0)} className="button button__decline" onClick={this.rejectCall}>{Translator.translate("DECLINE", this.props.lang)}</button>
+                            <button css={ButtonStyle(this.props, 1)} className="button button__accept" onClick={this.acceptCall}>{Translator.translate("ACCEPT", this.props.lang)}</button>
                         </div>
                     </div>
                 </div>
@@ -206,4 +211,13 @@ class CallAlert extends React.PureComponent {
     }
 }
 
+// Specifies the default values for props:
+CallAlert.defaultProps = {
+    lang: Translator.getDefaultLanguage(),
+};
+
+CallAlert.propTypes = {
+    lang: PropTypes.string,
+}
+
 export default CallAlert;