Merge pull request #178 from Studio-Yandex-Practicum/bug-176-fix-butt…

…on-contact-us #176 bugfix: исправление бага недоступности воздействия на область под скрытым меню контактов
Studio-Yandex-Practicum · Jan 13, 2024 · 73a1210 · 73a1210
2 parents 1ec0120 + 0ee23f4
commit 73a1210
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/src/entities/ContactCard/ContactCard.tsx b/src/entities/ContactCard/ContactCard.tsx
@@ -23,7 +23,7 @@ const ContactCard: FC<PropsContactCard> = ({ messenger, Icon }) => {
         <div className={styles.icon}>
           <Icon />
         </div>
-        <Paragraph className={styles.text}>{messenger.title}</Paragraph>
+        <Paragraph>{messenger.title}</Paragraph>
       </Link>
     </li>
   )

diff --git a/src/entities/ContactCard/contactCard.module.scss b/src/entities/ContactCard/contactCard.module.scss
@@ -19,10 +19,4 @@
   width: 60px;
   height: 60px;
   margin-bottom: 12px;
-}
-
-.text {
-  color: var.$body-color;
-  font-size: 15px;
-  text-align: center;
-}
+}
diff --git a/src/features/Contacts/Contacts.tsx b/src/features/Contacts/Contacts.tsx
@@ -1,4 +1,5 @@
 import { type FC, useState } from 'react'
+import classNames from 'classnames'
 import { TMessenger } from '@/models/MessengerModel'
 import styles from './contacts.module.scss'
 import { Button, ButtonTheme, ButtonDesign } from '@/shared/ui/Button/Button'
@@ -24,7 +25,7 @@ const Contacts: FC<PropsContacts> = ({ messenger }) => {
 
   return (
     <div className={styles.contacts}>
-      <div className={messageMenuActive ? styles.contactsMenu : styles.contactsMenuHidden}>
+      <div className={classNames(styles.contactsMenu, { [styles.contactsMenuHidden]: !messageMenuActive })}>
         <ul className={styles.contactList}>
           {messenger.map(item => (
             <ContactCard messenger={item} key={item.id} Icon={item.icon} />

diff --git a/src/features/Contacts/contacts.module.scss b/src/features/Contacts/contacts.module.scss
@@ -2,27 +2,25 @@
 
 .contacts {
   position: fixed;
-  z-index: 999;
   right: 20px;
   bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: end;
+  z-index: 999;
 }
 
 .contactsMenu {
   visibility: visible;
   opacity: 1;
   margin: 0 0 17px;
-  max-width: 501px;
+  width: 500px;
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
 }
 
 .contactsMenuHidden {
-  margin: 0 0 17px;
-  max-width: 501px;
   visibility: hidden;
   opacity: 0;
-  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
 }
 
 .contactList {
@@ -33,6 +31,7 @@
 
 .button {
   transition: transform 0.25s, background-color 0.25s;
+  border: none;
 }
 
 .button:hover {