From ac5a8b6c763ccccfbe63c0a096bf316c599eb3d1 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Wed, 27 Jul 2022 16:04:48 +0500
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=D1=8B,=20=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D1=81=D1=8B?=
 =?UTF-8?q?=D0=BB=D0=BA=D0=B8=20=D0=B2=20=D1=84=D1=83=D1=82=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/footer/contactsContainer.tsx | 22 ++++++++++++++++++---
 src/components/footer/footer.css            | 10 +++++++++-
 src/components/mainPart/mainPart.css        | 19 +++++++++++++++---
 src/components/mainPart/pinkButton.tsx      | 14 ++++++++++---
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/components/footer/contactsContainer.tsx b/src/components/footer/contactsContainer.tsx
index d1ecd5f..ceb2daf 100644
--- a/src/components/footer/contactsContainer.tsx
+++ b/src/components/footer/contactsContainer.tsx
@@ -28,7 +28,7 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
         </div>
         {
             props.href 
-            ? <a href={props.href} className='contact-href'>{props.href}</a>
+            ? <a href={`https://${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
             : null
         }
         <div className="contact-data-container">
@@ -36,14 +36,30 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
                 return <div key={typeof(pair.value1) === 'string' ? pair.value1 : pair.value1[lang]} className="contact-data-row">
                     <div className="contact-data-value-container">
                         <span className="contact-data-value">
-                            {typeof(pair.value1) === 'string' ? pair.value1 : pair.value1[lang]}
+                            {
+                                typeof(pair.value1) === 'string' 
+                                ? pair.value1[0] === '+' 
+                                    ? <a href={`tel:${pair.value1}`}>{pair.value1}</a>
+                                    : pair.value1
+                                : pair.value1[lang][0] === '+'
+                                    ? <a href={`tel:${pair.value1[lang]}`}>{pair.value1[lang]}</a>
+                                    : pair.value1[lang]
+                            }
                         </span>
                     </div>
                     {
                         pair?.value2
                         ? <div className="contact-data-value-container">
                             <span className="contact-data-value">
-                                {typeof(pair?.value2) === 'string' ? pair?.value2 : pair?.value2[lang]}
+                            {
+                                typeof(pair.value2) === 'string' 
+                                ? pair.value2[0] === '+' 
+                                    ? <a href={`tel:${pair.value2}`}>{pair.value2}</a>
+                                    : pair.value2
+                                : pair.value2[lang][0] === '+'
+                                    ? <a href={`tel:${pair.value2[lang]}`}>{pair.value2[lang]}</a>
+                                    : pair.value2[lang]
+                            }
                             </span>    
                         </div>
                         : null
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index 4b2134b..f8589dd 100644
--- a/src/components/footer/footer.css
+++ b/src/components/footer/footer.css
@@ -63,8 +63,16 @@
     background-color: #979797;
 }
 
-.contact-href {
+.contact-href,
+a {
     color: #FFFFFF;
+    transition: .2s;
+}
+
+.contact-href:hover,
+a:hover {
+    color: #CE56C2;
+    transition: .2s;
 }
 
 .contact-container {
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index d0349db..7566337 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -114,7 +114,8 @@
     cursor: pointer;
 }
 
-.main-part-text-button:hover {
+.main-part-text-button:hover,
+.main-part-text-button:active {
     background-color: #FFFFFF;
     color: #CE56C2;
     border: 2px solid #CE56C2;
@@ -304,6 +305,20 @@
     .plan-content-container {
         width: 482px;
     }
+
+    .main-part-text-button:hover {
+        background-color: #CE56C2;
+        color: #FFFFFF;
+        border: none;
+        transition: 0;
+    }
+
+    .main-part-text-button:active {
+        background-color: #FFFFFF;
+        color: #CE56C2 ;
+        border: none;
+        transition: 0;
+    }
 }
 
 @media screen and (max-width: 1024px) {
@@ -387,6 +402,4 @@
         line-height: 17px;
        
     }
-    
-    
 }
\ No newline at end of file
diff --git a/src/components/mainPart/pinkButton.tsx b/src/components/mainPart/pinkButton.tsx
index 3b738ec..5419ece 100644
--- a/src/components/mainPart/pinkButton.tsx
+++ b/src/components/mainPart/pinkButton.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Style } from "util";
 
 type TProps = {
     textButton: string
@@ -8,8 +9,15 @@ type TProps = {
 }
 
 export const PinkButton:React.FC<TProps> = React.memo((props) => {
-    return <button
-        style={{width: props.width ? props.width : ''}}
+    const [styles, setStyles] = useState<React.CSSProperties>();
+    useEffect(() => {
+        setStyles({
+            // backgroundColor: '#CE56C2'
+        })
+    }, [])
+    return <button        
+        onMouseLeave={() => console.log('fuck')}
+        style={{width: props.width ? props.width : '', ...styles}}
         className="main-part-text-button"
         onClick={() => {
             return props?.onClick ? props.onClick() : null;