Avatar picture diamond issue fix

QUACK-INTEC · Jan 15, 2020 · a20c78e · a20c78e
1 parent 73b60a2
commit a20c78e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/App/Components/Common/Avatar/Avatar.js b/App/Components/Common/Avatar/Avatar.js
@@ -12,7 +12,7 @@ import Text from '../Text';
 
 class Avatar extends React.Component {
   renderAvatar = () => {
-    const { src, uri, initialsText, style, textStyle } = this.props;
+    const { src, uri, initialsText, style, textStyle, textBorderStyle } = this.props;
 
     if (src || uri) {
       return (
@@ -21,7 +21,10 @@ class Avatar extends React.Component {
     }
 
     return (
-      <View {...this.props} style={[styles.avatarStyle, style]}>
+      <View
+        {...this.props}
+        style={[styles.avatarStyle, styles.textBorderStyle, style, textBorderStyle]}
+      >
         <View style={[style, styles.textViewStyle]}>
           <Text.Medium text={initialsText} style={[styles.textStyle, textStyle]} />
         </View>
@@ -36,13 +39,18 @@ class Avatar extends React.Component {
 
 const styles = StyleSheet.create({
   avatarStyle: {
-    height: toBaseDesignPx(110),
-    width: toBaseDesignPx(110),
-    borderRadius: toBaseDesignPx(100),
+    height: toBaseDesignPx(94),
+    width: toBaseDesignPx(94),
+    borderRadius: toBaseDesignPx(47),
     backgroundColor: colors.GRAY_LIGHT,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  textBorderStyle: {
+    height: toBaseDesignPx(110),
+    width: toBaseDesignPx(110),
+    borderRadius: toBaseDesignPx(100),
+  },
   textViewStyle: {
     width: toBaseDesignPx(110),
     height: toBaseDesignPx(110),
@@ -72,6 +80,7 @@ Avatar.defaultProps = {
   initialsText: null,
   style: null,
   textStyle: null,
+  textBorderStyle: null,
 };
 
 Avatar.propTypes = {
@@ -80,6 +89,7 @@ Avatar.propTypes = {
   initialsText: PropTypes.string,
   style: ViewPropTypes.style,
   textStyle: PropTypes.shape({}),
+  textBorderStyle: PropTypes.shape({}),
 };
 
 export default Avatar;
diff --git a/App/Components/EventCalendar/EventCalendar.js b/App/Components/EventCalendar/EventCalendar.js
@@ -54,6 +54,7 @@ class EventCalendar extends React.Component {
             initialsText={initialsText}
             style={styles.avatarStyle}
             textStyle={styles.avatarTextStyle}
+            textBorderStyle={styles.textBorderStyle}
           />
           <Text.Medium
             text={author}
@@ -108,9 +109,14 @@ const styles = StyleSheet.create({
   avatarStyle: {
     height: toBaseDesignPx(32),
     width: toBaseDesignPx(32),
-    borderRadius: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(16),
     ...spacers.MR_1,
   },
+  textBorderStyle: {
+    height: toBaseDesignPx(32),
+    width: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(32),
+  },
   authorStyle: {
     ...fonts.SIZE_XS,
     color: colors.GRAY,

diff --git a/App/Components/ParticipantCard/ParticipantCard.js b/App/Components/ParticipantCard/ParticipantCard.js
@@ -41,6 +41,7 @@ class ParticipantCard extends React.Component {
             initialsText={initialsText}
             style={styles.avatarStyle}
             textStyle={styles.avatarTextStyle}
+            textBorderStyle={styles.textBorderStyle}
           />
           <Text.Medium
             text={participantName}
@@ -59,10 +60,13 @@ const styles = StyleSheet.create({
   avatarStyle: {
     height: toBaseDesignPx(32),
     width: toBaseDesignPx(32),
-    borderRadius: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(16),
     ...spacers.MR_8,
     ...spacers.ML_8,
   },
+  textBorderStyle: {
+    borderRadius: toBaseDesignPx(32),
+  },
   participantStyle: {
     ...fonts.SIZE_XS,
     color: colors.GRAY_LIGHT,

diff --git a/App/Components/PostComment/PostComment.js b/App/Components/PostComment/PostComment.js
@@ -102,6 +102,7 @@ class PostComment extends React.Component {
             initialsText={initialsText}
             style={styles.avatarStyle}
             textStyle={styles.avatarTextStyle}
+            textBorderStyle={styles.textBorderStyle}
           />
           <View style={styles.fullFlex}>
             <Text.SemiBold text={comment} style={[styles.commentStyle]} />
@@ -136,10 +137,13 @@ const styles = StyleSheet.create({
   avatarStyle: {
     height: toBaseDesignPx(32),
     width: toBaseDesignPx(32),
-    borderRadius: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(16),
     ...spacers.MR_8,
     ...spacers.ML_4,
   },
+  textBorderStyle: {
+    borderRadius: toBaseDesignPx(32),
+  },
   authorStyle: {
     ...fonts.SIZE_XXS,
     color: colors.GRAY_LIGHT,

diff --git a/App/Components/PostInfo/PostInfo.js b/App/Components/PostInfo/PostInfo.js
@@ -144,6 +144,7 @@ class PostInfo extends React.Component {
             initialsText={initialsText}
             style={styles.avatarStyle}
             textStyle={styles.avatarTextStyle}
+            textBorderStyle={styles.textBorderStyle}
           />
         </View>
       </InLineComponent>
@@ -365,6 +366,9 @@ const styles = StyleSheet.create({
   avatarStyle: {
     height: toBaseDesignPx(32),
     width: toBaseDesignPx(32),
+    borderRadius: toBaseDesignPx(16),
+  },
+  textBorderStyle: {
     borderRadius: toBaseDesignPx(32),
   },
   authorStyle: {