Contacts: Fix height for name, fix color for contact (#4371)

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;

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);

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} />