From 4d0cb2620a8c82ed237c27b571674b97325e187c Mon Sep 17 00:00:00 2001
From: "Nikita.Zheleznov" <zheleznov.frontend@gmail.com>
Date: Fri, 9 Sep 2022 21:03:29 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9A=9B=20upd.=20ContactItem=20#65?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modals/wallets/components/atoms/Contact.tsx | 82 +++++++++++++++++++++
 modals/wallets/components/atoms/User.tsx    | 48 ------------
 modals/wallets/components/atoms/index.ts    |  8 +-
 3 files changed, 86 insertions(+), 52 deletions(-)
 create mode 100644 modals/wallets/components/atoms/Contact.tsx
 delete mode 100644 modals/wallets/components/atoms/User.tsx

diff --git a/modals/wallets/components/atoms/Contact.tsx b/modals/wallets/components/atoms/Contact.tsx
new file mode 100644
index 00000000..5f53f728
--- /dev/null
+++ b/modals/wallets/components/atoms/Contact.tsx
@@ -0,0 +1,82 @@
+import { useMemo } from "react"
+import { StyleSheet, Text, View, ViewStyle, StyleProp } from "react-native"
+import { Contact } from "stores/ContactsStore"
+import { COLOR } from "utils"
+import { useTheme } from "hooks"
+import { Icon2, ThemedGradient } from "components/atoms"
+
+type Props = {
+	user: Contact
+	style?: StyleProp<ViewStyle>
+	isActive?: boolean
+}
+
+export default function User({ user, style, isActive }: Props) {
+	const theme = useTheme()
+
+	const name = useMemo(
+		() => (user.name.length > 8 ? user.name.substring(0, 8) + "..." : user.name),
+		[user.name],
+	)
+
+	const Container = isActive ? ThemedGradient : View
+
+	return (
+		<View style={[styles.container, style]}>
+			<Container style={styles.avatarContainer}>
+				<View style={styles.placeholder} />
+				{true && (
+					<Icon2
+						style={styles.star}
+						name="star_2"
+						fill={isActive ? COLOR.White : COLOR.RoyalBlue}
+						size={24}
+					/>
+				)}
+			</Container>
+
+			<Container style={styles.nameContaner}>
+				<Text style={[styles.name, theme.text.primary]}>{name}</Text>
+			</Container>
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: "center",
+	},
+	avatarContainer: {
+		width: 74,
+		height: 74,
+		borderRadius: 74,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	placeholder: {
+		width: 62,
+		height: 62,
+		borderRadius: 62,
+		backgroundColor: "grey",
+	},
+
+	nameContaner: {
+		marginTop: 9,
+		paddingVertical: 2,
+		paddingHorizontal: 9,
+		borderRadius: 50,
+	},
+	name: {
+		fontFamily: "CircularStd",
+		fontStyle: "normal",
+		fontWeight: "500",
+		fontSize: 12,
+		lineHeight: 15,
+	},
+
+	star: {
+		position: "absolute",
+		bottom: 10,
+		right: 1,
+	},
+})
diff --git a/modals/wallets/components/atoms/User.tsx b/modals/wallets/components/atoms/User.tsx
deleted file mode 100644
index bdcca4c0..00000000
--- a/modals/wallets/components/atoms/User.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import { COLOR, hexAlpha } from "utils";
-import { useTheme } from "hooks";
-import { Contact } from "stores/ContactsStore";
-
-type Props = {
-  user: Contact;
-};
-
-export default function User({ user }: Props) {
-  const theme = useTheme();
-  return (
-    <View style={styles.container}>
-      <View style={styles.avatarContainer}>
-        <View style={styles.placeholder} />
-      </View>
-      <Text style={[styles.name, theme.text.primary]}>
-        {user.name}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { alignItems: "center" },
-  avatarContainer: {
-    width: 73,
-    height: 73,
-    borderRadius: 73,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: hexAlpha(COLOR.White, 5),
-  },
-  placeholder: {
-    width: 57,
-    height: 57,
-    borderRadius: 57,
-    backgroundColor: "grey",
-  },
-  name: {
-    fontFamily: "CircularStd",
-    fontStyle: "normal",
-    fontWeight: "500",
-    fontSize: 12,
-    lineHeight: 15,
-    marginTop: 9,
-  },
-});
diff --git a/modals/wallets/components/atoms/index.ts b/modals/wallets/components/atoms/index.ts
index 3b9e8aa9..6d9f69e6 100644
--- a/modals/wallets/components/atoms/index.ts
+++ b/modals/wallets/components/atoms/index.ts
@@ -1,4 +1,4 @@
-export { default as Message } from "./Message";
-export { default as User } from "./User";
-export { default as Header } from "./Header";
-export { default as Footer } from "./Footer";
+export { default as Message } from "./Message"
+export { default as Contact } from "./Contact"
+export { default as Header } from "./Header"
+export { default as Footer } from "./Footer"