From 7a32075b372e5db214419873808f17ec8a217b04 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 22 Mar 2024 13:05:54 +0100
Subject: [PATCH] Contacts: Fix height for name, fix color for contact (#4371)

---
 .../middle/message/Contact.module.scss        |  3 +-
 src/components/middle/message/Contact.tsx     | 55 ++++++++++++-------
 src/components/middle/message/Message.tsx     |  2 +-
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/components/middle/message/Contact.module.scss b/src/components/middle/message/Contact.module.scss
index e3c67136a..420ad9979 100644
--- a/src/components/middle/message/Contact.module.scss
+++ b/src/components/middle/message/Contact.module.scss
@@ -33,18 +33,17 @@
 
 .name {
   font-size: 1rem;
-  margin-bottom: 0.25rem;
   font-weight: 500;
   max-width: 12.5rem;
 }
 
 .phone {
   color: var(--color-text);
+  line-height: 1rem;
 }
 
 .name,
 .phone {
-  line-height: 1rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/src/components/middle/message/Contact.tsx b/src/components/middle/message/Contact.tsx
index cdd617af4..d8fe5a46a 100644
--- a/src/components/middle/message/Contact.tsx
+++ b/src/components/middle/message/Contact.tsx
@@ -20,6 +20,7 @@ import styles from './Contact.module.scss';
 
 type OwnProps = {
   contact: ApiContact;
+  noUserColors?: boolean;
 };
 
 type StateProps = {
@@ -30,17 +31,14 @@ type StateProps = {
 const UNREGISTERED_CONTACT_ID = '0';
 
 const Contact: FC<OwnProps & StateProps> = ({
-  contact, user, phoneCodeList,
+  contact, user, phoneCodeList, noUserColors,
 }) => {
   const lang = useLang();
   const {
     openChat, openAddContactDialog, showNotification, openChatWithInfo,
   } = getActions();
 
-  const {
-    phoneNumber,
-    userId,
-  } = contact;
+  const { phoneNumber, userId } = contact;
   const isRegistered = userId !== UNREGISTERED_CONTACT_ID;
   const canAddContact = isRegistered && user && getCanAddContact(user);
 
@@ -62,25 +60,44 @@ const Contact: FC<OwnProps & StateProps> = ({
   });
 
   return (
-    <PeerColorWrapper peer={user} emojiIconClassName={styles.emojiIconBackground} className={styles.root}>
+    <PeerColorWrapper
+      noUserColors={noUserColors}
+      peer={user}
+      emojiIconClassName={styles.emojiIconBackground}
+      className={styles.root}
+    >
       <div className={styles.infoContainer} onClick={handleClick}>
         <Avatar size="large" peer={user} text={getContactName(contact)} />
         <div className={styles.info}>
           <div className={styles.name}>
             {user ? getUserFullName(user) : getContactName(contact)}
           </div>
-          <div className={styles.phone}>{formatPhoneNumberWithCode(phoneCodeList, phoneNumber)}</div>
+          <div className={styles.phone}>
+            {formatPhoneNumberWithCode(phoneCodeList, phoneNumber)}
+          </div>
         </div>
       </div>
       {isRegistered && (
         <>
           <div className={styles.divider} />
           <div className={styles.buttons}>
-            <Button isText color="translucent" ripple onClick={handleOpenChat} className={styles.button}>
+            <Button
+              isText
+              color="translucent"
+              ripple
+              onClick={handleOpenChat}
+              className={styles.button}
+            >
               {lang('SharedContactMessage')}
             </Button>
             {canAddContact && (
-              <Button isText color="translucent" ripple onClick={handleAddContact} className={styles.button}>
+              <Button
+                isText
+                color="translucent"
+                ripple
+                onClick={handleAddContact}
+                className={styles.button}
+              >
                 {lang('SharedContactAdd')}
               </Button>
             )}
@@ -107,14 +124,14 @@ function getContactName(contact: ApiContact) {
   return '';
 }
 
-export default withGlobal<OwnProps>(
-  (global, { contact }): StateProps => {
-    const { countryList: { phoneCodes: phoneCodeList } } = global;
-    const user = selectUser(global, contact.userId);
+export default withGlobal<OwnProps>((global, { contact }): StateProps => {
+  const {
+    countryList: { phoneCodes: phoneCodeList },
+  } = global;
+  const user = selectUser(global, contact.userId);
 
-    return {
-      user,
-      phoneCodeList,
-    };
-  },
-)(Contact);
+  return {
+    user,
+    phoneCodeList,
+  };
+})(Contact);
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 6e9776f35..8a139ee4a 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -1163,7 +1163,7 @@ const Message: FC<OwnProps & StateProps> = ({
         )}
         {isStoryMention && <StoryMention message={message} />}
         {contact && (
-          <Contact contact={contact} />
+          <Contact contact={contact} noUserColors={isOwn} />
         )}
         {poll && (
           <Poll message={message} poll={poll} onSendVote={handleVoteSend} />