From 7799b042cfbbd42ec778b90ab23f40156dbb65fc Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Mon, 14 Feb 2022 15:08:45 +0545 Subject: [PATCH 1/4] Add avatar background color --- src/components/Avatar.js | 8 +++++++- src/styles/styles.js | 14 ++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 228ed6fb23a4..d0409cd946ca 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -44,10 +44,16 @@ class Avatar extends PureComponent { this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, ...this.props.imageStyles, ]; + + const roomAvatarStyle = [ + this.props.size === 'small' ? styles.roomAvatarSmall : styles.roomAvatarNormal, + ...this.props.imageStyles, + ]; + return ( {this.props.isChatRoom - ? + ? : } ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 683af72f3c28..a6da34c93131 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1531,12 +1531,26 @@ const styles = { height: variables.componentSizeNormal, width: variables.componentSizeNormal, borderRadius: variables.componentSizeNormal, + backgroundColor: themeColors.icon, }, avatarSmall: { height: variables.avatarSizeSmall, width: variables.avatarSizeSmall, borderRadius: variables.avatarSizeSmall, + backgroundColor: themeColors.icon, + }, + + roomAvatarNormal: { + height: variables.componentSizeNormal, + width: variables.componentSizeNormal, + borderRadius: variables.componentSizeNormal, + }, + + roomAvatarSmall: { + height: variables.avatarSizeSmall, + width: variables.avatarSizeSmall, + borderRadius: variables.avatarSizeSmall, }, avatarInnerText: { From 74d63350e96e7c4acd2fb2d67c467589e81d0305 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Wed, 16 Feb 2022 10:05:57 +0545 Subject: [PATCH 2/4] Refactor avatar background color --- src/components/Avatar.js | 9 +++------ src/styles/styles.js | 14 -------------- 2 files changed, 3 insertions(+), 20 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index d0409cd946ca..86aa5c8e3b59 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react'; import {Image, View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; import RoomAvatar from './RoomAvatar'; import stylePropTypes from '../styles/stylePropTypes'; @@ -42,18 +43,14 @@ class Avatar extends PureComponent { const imageStyle = [ this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, - ...this.props.imageStyles, - ]; - - const roomAvatarStyle = [ - this.props.size === 'small' ? styles.roomAvatarSmall : styles.roomAvatarNormal, + !this.props.isChatRoom && {backgroundColor: themeColors.icon}, // Adding background to roomAvatar makes roomAvatar rectangular ...this.props.imageStyles, ]; return ( {this.props.isChatRoom - ? + ? : } ); diff --git a/src/styles/styles.js b/src/styles/styles.js index a6da34c93131..683af72f3c28 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1531,26 +1531,12 @@ const styles = { height: variables.componentSizeNormal, width: variables.componentSizeNormal, borderRadius: variables.componentSizeNormal, - backgroundColor: themeColors.icon, }, avatarSmall: { height: variables.avatarSizeSmall, width: variables.avatarSizeSmall, borderRadius: variables.avatarSizeSmall, - backgroundColor: themeColors.icon, - }, - - roomAvatarNormal: { - height: variables.componentSizeNormal, - width: variables.componentSizeNormal, - borderRadius: variables.componentSizeNormal, - }, - - roomAvatarSmall: { - height: variables.avatarSizeSmall, - width: variables.avatarSizeSmall, - borderRadius: variables.avatarSizeSmall, }, avatarInnerText: { From 6f9c5d80ea932b82f866b5f29ec1a20f7157d499 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Wed, 16 Feb 2022 14:42:14 +0545 Subject: [PATCH 3/4] Relocate comment --- src/components/Avatar.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 86aa5c8e3b59..14b2df7c8592 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -43,7 +43,9 @@ class Avatar extends PureComponent { const imageStyle = [ this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, - !this.props.isChatRoom && {backgroundColor: themeColors.icon}, // Adding background to roomAvatar makes roomAvatar rectangular + + // Adding background makes RoomAvatar rectangular so adding background only if not chatRoom + !this.props.isChatRoom && {backgroundColor: themeColors.icon}, ...this.props.imageStyles, ]; From 756ad8a90fa28df8de42bd3253a1a49fe9816406 Mon Sep 17 00:00:00 2001 From: Sobit Neupane <073bct543.sobit@pcampus.edu.np> Date: Fri, 18 Feb 2022 20:58:51 +0545 Subject: [PATCH 4/4] Change comment Co-authored-by: Rushat Gabhane --- src/components/Avatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 14b2df7c8592..51764ee80e28 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -44,7 +44,7 @@ class Avatar extends PureComponent { const imageStyle = [ this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, - // Adding background makes RoomAvatar rectangular so adding background only if not chatRoom + // Background color isn't added for room avatar because it changes it's shape to a square !this.props.isChatRoom && {backgroundColor: themeColors.icon}, ...this.props.imageStyles, ];