From 64f174fedaed132b0c6abb69b4d2370d2b55c878 Mon Sep 17 00:00:00 2001
From: Audrey Kadjar <audreykadjar@gmail.com>
Date: Tue, 14 Jun 2022 09:57:59 +0200
Subject: [PATCH] [#3246] fix contacts details view on third column (#3280)

* contact column collapse and highlight selected

* fixes

* small fixes

* small type fix
---
 .../ContactDetails/ContactIcon.tsx            |  0
 .../ContactDetails/ContactInfoPoint.tsx       |  0
 .../ConversationsForContact.tsx               |  2 +-
 .../ContactDetails/Expandable.tsx             |  0
 .../ContactDetails/index.module.scss          |  0
 .../ContactDetails/index.tsx                  |  4 ++--
 .../ContactDetails/util/fillContactInfo.ts    |  0
 .../util/getInfoDetailPayload.ts              |  0
 .../ContactDetails/util/index.ts              |  0
 .../ContactDetails/util/infoPointUtil.ts      |  0
 .../ContactInformation/index.module.scss      | 18 +++++++++++++++
 .../Contacts/ContactInformation/index.tsx     | 15 ++++++++++--
 .../ContactListItem/index.module.scss         |  4 ++++
 .../pages/Contacts/ContactListItem/index.tsx  | 23 +++++++++++++++----
 .../src/pages/Contacts/index.module.scss      | 10 +++++++-
 frontend/inbox/src/pages/Contacts/index.tsx   | 16 +++++++++++--
 .../Messenger/ConversationMetadata/index.tsx  |  2 +-
 .../images/icons/collapseRightArrows.svg      |  3 +++
 .../assets/images/icons/googleLogo.svg        |  2 +-
 lib/typescript/assets/scss/animations.scss    | 13 +++++++++++
 20 files changed, 98 insertions(+), 14 deletions(-)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/ContactIcon.tsx (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/ContactInfoPoint.tsx (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/ConversationsForContact.tsx (96%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/Expandable.tsx (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/index.module.scss (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/index.tsx (98%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/util/fillContactInfo.ts (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/util/getInfoDetailPayload.ts (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/util/index.ts (100%)
 rename frontend/inbox/src/{pages/Inbox/Messenger/ConversationMetadata => components}/ContactDetails/util/infoPointUtil.ts (100%)
 create mode 100644 lib/typescript/assets/images/icons/collapseRightArrows.svg

diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactIcon.tsx b/frontend/inbox/src/components/ContactDetails/ContactIcon.tsx
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactIcon.tsx
rename to frontend/inbox/src/components/ContactDetails/ContactIcon.tsx
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactInfoPoint.tsx b/frontend/inbox/src/components/ContactDetails/ContactInfoPoint.tsx
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactInfoPoint.tsx
rename to frontend/inbox/src/components/ContactDetails/ContactInfoPoint.tsx
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ConversationsForContact.tsx b/frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx
similarity index 96%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ConversationsForContact.tsx
rename to frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx
index 7e36c1ee19..d842731b5e 100644
--- a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ConversationsForContact.tsx
+++ b/frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
-import {INBOX_CONVERSATIONS_ROUTE} from '../../../../../routes/routes';
+import {INBOX_CONVERSATIONS_ROUTE} from '../../routes/routes';
 import {Source} from 'model';
 import {ConnectorAvatar} from 'components';
 import {useTranslation} from 'react-i18next';
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/Expandable.tsx b/frontend/inbox/src/components/ContactDetails/Expandable.tsx
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/Expandable.tsx
rename to frontend/inbox/src/components/ContactDetails/Expandable.tsx
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.module.scss b/frontend/inbox/src/components/ContactDetails/index.module.scss
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.module.scss
rename to frontend/inbox/src/components/ContactDetails/index.module.scss
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx b/frontend/inbox/src/components/ContactDetails/index.tsx
similarity index 98%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx
rename to frontend/inbox/src/components/ContactDetails/index.tsx
index 25276e1b4a..4cc407cdf1 100644
--- a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx
+++ b/frontend/inbox/src/components/ContactDetails/index.tsx
@@ -1,7 +1,7 @@
 import React, {useState, useEffect, SetStateAction} from 'react';
 import _, {connect, ConnectedProps} from 'react-redux';
-import {getContactDetails, updateContactDetails} from '../../../../../actions';
-import {StateModel} from '../../../../../reducers';
+import {getContactDetails, updateContactDetails} from '../../actions';
+import {StateModel} from '../../reducers';
 import {getInfoDetailsPayload, fillContactInfo} from './util';
 import {UpdateContactDetailsRequestPayload} from 'httpclient/src';
 import {Contact} from 'model';
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/fillContactInfo.ts b/frontend/inbox/src/components/ContactDetails/util/fillContactInfo.ts
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/fillContactInfo.ts
rename to frontend/inbox/src/components/ContactDetails/util/fillContactInfo.ts
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/getInfoDetailPayload.ts b/frontend/inbox/src/components/ContactDetails/util/getInfoDetailPayload.ts
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/getInfoDetailPayload.ts
rename to frontend/inbox/src/components/ContactDetails/util/getInfoDetailPayload.ts
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/index.ts b/frontend/inbox/src/components/ContactDetails/util/index.ts
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/index.ts
rename to frontend/inbox/src/components/ContactDetails/util/index.ts
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/infoPointUtil.ts b/frontend/inbox/src/components/ContactDetails/util/infoPointUtil.ts
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/util/infoPointUtil.ts
rename to frontend/inbox/src/components/ContactDetails/util/infoPointUtil.ts
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss b/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
index eb1b32662b..7a2aa603c5 100644
--- a/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
+++ b/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
@@ -199,3 +199,21 @@
     fill: var(--color-text-gray);
   }
 }
+
+.contactsDetailsCollapseIcon {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  width: 20px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  svg {
+    fill: var(--color-airy-blue);
+  }
+}
+
+.contactsDetailsCollapseIcon:hover {
+  opacity: 0.5;
+}
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
index df8b31ac5f..c1034e4d06 100644
--- a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
+++ b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
@@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {connect, ConnectedProps} from 'react-redux';
 import styles from './index.module.scss';
-import ContactDetails from '../../Inbox/Messenger/ConversationMetadata/ContactDetails';
+import ContactDetails from '../../../components/ContactDetails';
 import {useAnimation} from 'render';
 import {Contact} from 'model';
 import {Avatar} from 'components/message/Avatar';
@@ -13,6 +13,7 @@ import {ReactComponent as CloseIcon} from 'assets/images/icons/close.svg';
 import {ReactComponent as CheckmarkCircleIcon} from 'assets/images/icons/checkmark.svg';
 import {ReactComponent as EditIcon} from 'assets/images/icons/pen.svg';
 import {ReactComponent as CancelIcon} from 'assets/images/icons/cancelCross.svg';
+import {ReactComponent as CollapseRightArrowsIcon} from 'assets/images/icons/collapseRightArrows.svg';
 import {StateModel} from '../../../reducers';
 import {
   cyCancelEditContactIcon,
@@ -40,6 +41,8 @@ type ContactInformationProps = {
   editModeOn: boolean;
   cancelEdit: boolean;
   setEditModeOn: (editing: boolean) => void;
+  setContactInformationVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  contactInformationVisible: boolean;
 } & ConnectedProps<typeof connector>;
 
 const ContactInformation = (props: ContactInformationProps) => {
@@ -52,6 +55,8 @@ const ContactInformation = (props: ContactInformationProps) => {
     editModeOn,
     cancelEdit,
     setEditModeOn,
+    setContactInformationVisible,
+    contactInformationVisible,
   } = props;
   const {t} = useTranslation();
   const [showEditDisplayName, setShowEditDisplayName] = useState(false);
@@ -119,8 +124,14 @@ const ContactInformation = (props: ContactInformationProps) => {
 
   return (
     <>
-      {(contact || conversationId) && (
+      {(contact || conversationId) && contactInformationVisible && (
         <div className={styles.content}>
+          <button
+            className={styles.contactsDetailsCollapseIcon}
+            onClick={() => setContactInformationVisible(!contactInformationVisible)}
+          >
+            <CollapseRightArrowsIcon />
+          </button>
           {!isEditing ? (
             <button
               className={`${styles.editIcon} ${isContactDetailsExpanded ? styles.iconBlue : styles.iconGrey}`}
diff --git a/frontend/inbox/src/pages/Contacts/ContactListItem/index.module.scss b/frontend/inbox/src/pages/Contacts/ContactListItem/index.module.scss
index 42670bf777..38a8592263 100644
--- a/frontend/inbox/src/pages/Contacts/ContactListItem/index.module.scss
+++ b/frontend/inbox/src/pages/Contacts/ContactListItem/index.module.scss
@@ -13,6 +13,10 @@
   }
 }
 
+.itemSelected {
+  background: var(--color-background-blue);
+}
+
 .avatarDisplayName {
   display: flex;
   align-items: center;
diff --git a/frontend/inbox/src/pages/Contacts/ContactListItem/index.tsx b/frontend/inbox/src/pages/Contacts/ContactListItem/index.tsx
index e8f6ecca7d..07b25b948d 100644
--- a/frontend/inbox/src/pages/Contacts/ContactListItem/index.tsx
+++ b/frontend/inbox/src/pages/Contacts/ContactListItem/index.tsx
@@ -14,7 +14,7 @@ import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
 import {INBOX_CONVERSATIONS_ROUTE} from '../../../routes/routes';
 import DeleteContactModal from '../DeleteContactModal';
-import {ConversationInfoForContact} from '../../Inbox/Messenger/ConversationMetadata/ContactDetails';
+import {ConversationInfoForContact} from '../../../components/ContactDetails';
 import {StateModel} from '../../../reducers';
 import {connect, ConnectedProps} from 'react-redux';
 
@@ -30,10 +30,21 @@ type ContactListItemProps = {
   setContact: (contact: Contact) => void;
   setEditModeOn: (editOn: boolean) => void;
   setCancelEdit: (cancel: boolean) => void;
+  setCurrentVisibleContactId: React.Dispatch<React.SetStateAction<string>>;
+  currentVisibleContactId: string;
 } & ConnectedProps<typeof connector>;
 
 const ContactListItem = (props: ContactListItemProps) => {
-  const {contacts, contact, setConversationId, setContact, setEditModeOn, setCancelEdit} = props;
+  const {
+    contacts,
+    contact,
+    setConversationId,
+    setContact,
+    setEditModeOn,
+    setCancelEdit,
+    setCurrentVisibleContactId,
+    currentVisibleContactId,
+  } = props;
   const {t} = useTranslation();
   const conversationId = contact.conversations && Object.keys(contact?.conversations)[0];
   const [showDeleteContactModal, setShowDeleteContactModal] = useState(false);
@@ -77,20 +88,24 @@ const ContactListItem = (props: ContactListItemProps) => {
     setContact(contact);
     setCancelEdit(true);
     setEditModeOn(false);
+    setCurrentVisibleContactId(contact.id);
   };
 
   const handleShowModal = (show: boolean) => {
     setShowDeleteContactModal(show);
   };
 
-  const handleEditMode = (event: any) => {
+  const handleEditMode = (event: React.MouseEvent<HTMLDivElement>) => {
     setContact(contact);
     setEditModeOn(true);
     event.stopPropagation();
   };
 
   return (
-    <div className={styles.container} onClick={handleOnClick}>
+    <div
+      className={`${styles.container} ${contact.id === currentVisibleContactId ? styles.itemSelected : ''}`}
+      onClick={handleOnClick}
+    >
       <div className={styles.avatarDisplayName}>
         <Avatar contact={contact} />
         <span>{currentContactDisplayName}</span>
diff --git a/frontend/inbox/src/pages/Contacts/index.module.scss b/frontend/inbox/src/pages/Contacts/index.module.scss
index 6c6a2174f1..7b39e2f589 100644
--- a/frontend/inbox/src/pages/Contacts/index.module.scss
+++ b/frontend/inbox/src/pages/Contacts/index.module.scss
@@ -71,6 +71,14 @@
   flex-direction: column;
 }
 
-.animateIn {
+.paginationContainer {
+  margin: 0 32px 32px 32px;
+}
+
+.contactColumnAnimateIn {
   animation: contactsInformationIn 300ms ease;
 }
+
+.contactColumnAnimateOut {
+  animation: contactsInformationOut 300ms ease;
+}
diff --git a/frontend/inbox/src/pages/Contacts/index.tsx b/frontend/inbox/src/pages/Contacts/index.tsx
index 86a59d5b09..822a292f06 100644
--- a/frontend/inbox/src/pages/Contacts/index.tsx
+++ b/frontend/inbox/src/pages/Contacts/index.tsx
@@ -31,6 +31,7 @@ const Contacts = (props: ContactsProps) => {
   const [editModeOn, setEditModeOn] = useState(false);
   const [cancelEdit, setCancelEdit] = useState(false);
   const [contactInformationVisible, setContactInformationVisible] = useState(false);
+  const [currentVisibleContactId, setCurrentVisibleContactId] = useState('');
   const listPageSize = 9;
   const fetchNextPage = 5;
 
@@ -51,6 +52,13 @@ const Contacts = (props: ContactsProps) => {
     return contacts.sort(contactSorter).slice(firstPageIndex, lastPageIndex);
   }, [currentPage, pageSize, contacts.length]);
 
+  useEffect(() => {
+    if (currentTableData?.[0]?.id) {
+      setCurrentVisibleContactId(currentTableData[0].id);
+      setCurrentContact(currentTableData[0]);
+    }
+  }, [currentTableData]);
+
   useEffect(() => {
     lastPage % fetchNextPage == 0 && listContacts();
   }, [currentPage]);
@@ -99,11 +107,13 @@ const Contacts = (props: ContactsProps) => {
                   setConversationId={handleConversationId}
                   setEditModeOn={handleEditMode}
                   setCancelEdit={handleCancelEditing}
+                  setCurrentVisibleContactId={setCurrentVisibleContactId}
+                  currentVisibleContactId={currentVisibleContactId}
                 />
               ))}
             </div>
           </div>
-          <div style={{marginLeft: '32px', marginRight: '32px', marginBottom: '32px'}}>
+          <div className={styles.paginationContainer}>
             <Pagination
               totalCount={paginationData?.total}
               pageSize={listPageSize}
@@ -114,13 +124,15 @@ const Contacts = (props: ContactsProps) => {
           </div>
         </div>
       </div>
-      <div className={contactInformationVisible ? styles.animateIn : ''}>
+      <div className={contactInformationVisible ? styles.contactColumnAnimateIn : styles.contactColumnAnimateOut}>
         <ContactInformation
           conversationId={conversationId}
           contact={currentContact}
           editModeOn={editModeOn}
           setEditModeOn={handleEditMode}
           cancelEdit={cancelEdit}
+          setContactInformationVisible={setContactInformationVisible}
+          contactInformationVisible={contactInformationVisible}
         />
       </div>
     </>
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
index 84e3803272..128271a113 100644
--- a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
+++ b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
@@ -9,7 +9,7 @@ import ColorSelector from '../../../../components/ColorSelector';
 import Dialog from '../../../../components/Dialog';
 import {StateModel, isComponentHealthy} from '../../../../reducers';
 import {useAnimation} from 'render';
-import ContactDetails from './ContactDetails';
+import ContactDetails from '../../../../components/ContactDetails';
 
 import styles from './index.module.scss';
 import Tag from '../../../../components/Tag';
diff --git a/lib/typescript/assets/images/icons/collapseRightArrows.svg b/lib/typescript/assets/images/icons/collapseRightArrows.svg
new file mode 100644
index 0000000000..10ea3b6a3e
--- /dev/null
+++ b/lib/typescript/assets/images/icons/collapseRightArrows.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.225714 1.54761C-0.111244 1.1545 -0.0657174 0.562653 0.327401 0.225695C0.720518 -0.111263 1.31236 -0.065737 1.64932 0.327381L7.27431 6.88987C7.57524 7.24096 7.57524 7.75902 7.27431 8.11011L1.64932 14.6726C1.31236 15.0657 0.720516 15.1112 0.327399 14.7743C-0.0657186 14.4373 -0.111245 13.8455 0.225713 13.4524L5.32775 7.50001L0.225714 1.54761ZM7.72571 1.54761C7.38875 1.1545 7.43428 0.562654 7.82739 0.225696C8.22051 -0.111262 8.81235 -0.0657364 9.14931 0.327382L14.7743 6.88988C15.0752 7.24096 15.0752 7.75902 14.7743 8.11011L9.14931 14.6726C8.81235 15.0657 8.22051 15.1112 7.82739 14.7743C7.43427 14.4373 7.38875 13.8455 7.72571 13.4524L12.8277 7.50001L7.72571 1.54761Z" fill="#1578D4"/>
+</svg>
diff --git a/lib/typescript/assets/images/icons/googleLogo.svg b/lib/typescript/assets/images/icons/googleLogo.svg
index 27ced177b7..98e868454d 100644
--- a/lib/typescript/assets/images/icons/googleLogo.svg
+++ b/lib/typescript/assets/images/icons/googleLogo.svg
@@ -1,3 +1,3 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2041 0C12.927 0 15.2181 0.971228 16.9784 2.55633L17.0315 2.60455L14.1048 5.47274C13.0473 4.48185 11.7022 3.97727 10.2041 3.97727C7.57294 3.97727 5.34182 5.70136 4.51895 8.02926L4.49444 8.09998C4.29032 8.7 4.17435 9.34091 4.17435 9.99997C4.17435 10.6591 4.29032 11.3 4.49444 11.9C5.29679 14.2636 7.54636 16.0227 10.2041 16.0227C11.5594 16.0227 12.7158 15.6772 13.6243 15.0911L13.6596 15.0682L13.6936 15.0457C14.744 14.3444 15.4466 13.3091 15.6881 12.0894L15.6958 12.05H10.2041V8.18183H19.8144C19.9351 8.83634 20 9.51821 20 10.2273C20 13.2727 18.8869 15.8363 16.9573 17.5773C15.269 19.1046 12.9592 20 10.2041 20C6.25504 20 2.83346 17.8037 1.13625 14.5887L1.08535 14.4909C0.394244 13.1409 0 11.6136 0 9.99997C0 8.4076 0.383958 6.89931 1.05822 5.56252L1.08535 5.50914C2.76439 2.24092 6.21516 0 10.2041 0Z" fill="#5298F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2041 0C12.927 0 15.2181 0.971228 16.9784 2.55633L17.0315 2.60455L14.1048 5.47274C13.0473 4.48185 11.7022 3.97727 10.2041 3.97727C7.57294 3.97727 5.34182 5.70136 4.51895 8.02926L4.49444 8.09998C4.29032 8.7 4.17435 9.34091 4.17435 9.99997C4.17435 10.6591 4.29032 11.3 4.49444 11.9C5.29679 14.2636 7.54636 16.0227 10.2041 16.0227C11.5594 16.0227 12.7158 15.6772 13.6243 15.0911L13.6596 15.0682L13.6936 15.0457C14.744 14.3444 15.4466 13.3091 15.6881 12.0894L15.6958 12.05H10.2041V8.18183H19.8144C19.9351 8.83634 20 9.51821 20 10.2273C20 13.2727 18.8869 15.8363 16.9573 17.5773C15.269 19.1046 12.9592 20 10.2041 20C6.25504 20 2.83346 17.8037 1.13625 14.5887L1.08535 14.4909C0.394244 13.1409 0 11.6136 0 9.99997C0 8.4076 0.383958 6.89931 1.05822 5.56252L1.08535 5.50914C2.76439 2.24092 6.21516 0 10.2041 0Z" fill="#29a979"/>
 </svg>
diff --git a/lib/typescript/assets/scss/animations.scss b/lib/typescript/assets/scss/animations.scss
index 4d906f43c2..70f4c59bda 100644
--- a/lib/typescript/assets/scss/animations.scss
+++ b/lib/typescript/assets/scss/animations.scss
@@ -99,3 +99,16 @@
     transform: translateX(0px);
   }
 }
+
+@keyframes contactsInformationOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0px);
+    width: 290px;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(300px);
+    width: 0;
+  }
+}