Merge pull request #1577 from ever-co/bug/profile-avatar-when-no-image

Bug/profile avatar when no image

apps/mobile/app/components/ProfileImage.tsx

@@ -3,9 +3,9 @@
 import React, { FC, useMemo } from "react"
 import { View, StyleSheet } from "react-native"
 import { Avatar, Badge } from "react-native-paper"
-import { imgTitle } from "../helpers/img-title"
 import { IUser } from "../services/interfaces/IUserData"
-import { useAppTheme } from "../theme"
+import { typography, useAppTheme } from "../theme"
+import { imgTitleProfileAvatar } from "../helpers/img-title-profile-avatar"
 
 interface Props {
 	user: IUser
@@ -32,9 +32,10 @@ const ProfileImage: FC<Props> = ({ user, size }) => {
 					/>
 				) : (
 					<Avatar.Text
-						label={imgTitle(user?.name)}
+						label={imgTitleProfileAvatar(user?.name)}
 						size={size - 6}
 						style={{ ...styles.profileImage, width: size, height: size }}
+						labelStyle={styles.prefix}
 					/>
 				)}
 				<Badge size={25} style={[styles.onlineIcon, { borderColor: colors.background }]} />
@@ -56,6 +57,11 @@ const styles = StyleSheet.create({
 		position: "absolute",
 		right: 0,
 	},
+	prefix: {
+		fontFamily: typography.fonts.PlusJakartaSans.light,
+		fontSize: 42,
+		fontWeight: "200",
+	},
 	profileImage: {
 		borderColor: "#86DAA9",
 		borderRadius: 200,

apps/mobile/app/helpers/img-title-profile-avatar.ts

@@ -0,0 +1,3 @@
+export const imgTitleProfileAvatar = (memberName: string): string => {
+	return memberName.substring(0, 1).toUpperCase()
+}

apps/mobile/app/screens/Authenticated/SettingScreen/Personal/UserAvatar.tsx

@@ -3,14 +3,14 @@
 import React, { FC, useCallback, useMemo, useState } from "react"
 import { Ionicons } from "@expo/vector-icons"
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native"
-import { imgTitle } from "../../../../helpers/img-title"
 import { useStores } from "../../../../models"
 import { typography, useAppTheme } from "../../../../theme"
 import { Avatar } from "react-native-paper"
 import { observer } from "mobx-react-lite"
 import { useSettings } from "../../../../services/hooks/features/useSettings"
 import ConfirmationModal from "../../../../components/ConfirmationModal"
 import { translate } from "../../../../i18n"
+import { imgTitleProfileAvatar } from "../../../../helpers/img-title-profile-avatar"
 
 interface Props {
 	buttonLabel: string
@@ -48,7 +48,11 @@ const UserAvatar: FC<Props> = observer(({ buttonLabel, onChange }) => {
 			{imageUrl ? (
 				<Avatar.Image size={70} source={{ uri: imageUrl }} />
 			) : (
-				<Avatar.Text size={70} label={imgTitle(user?.name)} labelStyle={styles.prefix} />
+				<Avatar.Text
+					size={70}
+					label={imgTitleProfileAvatar(user?.name)}
+					labelStyle={styles.prefix}
+				/>
 			)}
 			<TouchableOpacity
 				style={[styles.changeAvatarBtn, { borderColor: colors.secondary }]}
@@ -113,13 +117,12 @@ const styles = StyleSheet.create({
 		width: 70,
 	},
 	prefix: {
-		fontFamily: typography.fonts.PlusJakartaSans.semiBold,
-		fontSize: 24,
-		fontWeight: "600",
+		fontFamily: typography.fonts.PlusJakartaSans.light,
+		fontSize: 42,
 	},
 	teamImage: {
 		alignItems: "center",
-		backgroundColor: "#C1E0EA",
+		backgroundColor: "#82c9e0",
 		borderRadius: 35,
 		elevation: 2,
 		height: 70,

apps/mobile/app/screens/Authenticated/TeamScreen/components/InviteCardItem.tsx

@@ -21,8 +21,8 @@ import { observer } from "mobx-react-lite"
 import { useOrganizationTeam } from "../../../../services/hooks/useOrganization"
 import { translate } from "../../../../i18n"
 import { AnimatedCircularProgress } from "react-native-circular-progress"
-import { imgTitle } from "../../../../helpers/img-title"
 import { useTeamInvitations } from "../../../../services/hooks/useTeamInvitation"
+import { imgTitleProfileAvatar } from "../../../../helpers/img-title-profile-avatar"
 
 export type ListItemProps = {
 	invite: any
@@ -51,7 +51,11 @@ export const ListItemContent: React.FC<ListItemProps> = observer(({ invite, onPr
 			>
 				<View style={styles.firstContainer}>
 					<View style={styles.wrapProfileImg}>
-						<Avatar.Text style={{ opacity: 0.2 }} size={40} label={imgTitle(invite.fullName)} />
+						<Avatar.Text
+							style={{ opacity: 0.2 }}
+							size={40}
+							label={imgTitleProfileAvatar(invite.fullName)}
+						/>
 						<Avatar.Image
 							style={styles.statusIcon}
 							size={20}

apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx

@@ -4,11 +4,11 @@ import { StyleSheet, View, Text } from "react-native"
 import React, { FC } from "react"
 import { IUser } from "../../../../services/interfaces/IUserData"
 import { Avatar } from "react-native-paper"
-import { imgTitle } from "../../../../helpers/img-title"
 import { typography, useAppTheme } from "../../../../theme"
 import { OT_Member } from "../../../../services/interfaces/IOrganizationTeam"
 import { useTimer } from "../../../../services/hooks/useTimer"
 import moment from "moment-timezone"
+import { imgTitleProfileAvatar } from "../../../../helpers/img-title-profile-avatar"
 
 interface ITimerStatus {
 	status: "running" | "online" | "idle" | "suspended" | "pause"
@@ -84,7 +84,7 @@ const UserHeaderCard = ({ member, user }: { member: OT_Member; user: IUser }) =>
 				<Avatar.Text
 					style={styles.teamImage}
 					size={40}
-					label={imgTitle(user.name)}
+					label={imgTitleProfileAvatar(user.name)}
 					labelStyle={styles.prefix}
 				/>
 			)}
@@ -126,16 +126,17 @@ const styles = StyleSheet.create({
 		maxWidth: "70%",
 	},
 	prefix: {
-		fontFamily: typography.fonts.PlusJakartaSans.semiBold,
-		fontSize: 14,
-		fontWeight: "600",
+		color: "#FFFFFF",
+		fontFamily: typography.fonts.PlusJakartaSans.light,
+		fontSize: 26,
+		fontWeight: "200",
 	},
 	statusIcon: {
 		marginLeft: -13,
 		top: 10,
 	},
 	teamImage: {
-		backgroundColor: "#C1E0EA",
+		backgroundColor: "#82c9e0",
 	},
 	wrapProfileImg: {
 		alignItems: "center",