From 22e5f01d1b93765bfd2bf1de393c04a097a3ac11 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Tue, 9 Aug 2022 14:43:07 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=81=D0=B5=D1=80=D1=8B=D0=B9=20=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BB=D1=8C=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/connectWindow/popup/popup.tsx |  2 +-
 src/components/mainPart/pinkButton.css       | 12 ++++++++++++
 src/components/mainPart/pinkButton.tsx       |  5 +++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/connectWindow/popup/popup.tsx b/src/components/connectWindow/popup/popup.tsx
index 630b5bd..d2c2820 100644
--- a/src/components/connectWindow/popup/popup.tsx
+++ b/src/components/connectWindow/popup/popup.tsx
@@ -32,7 +32,7 @@ export const Popup:React.FC<TProps> = React.memo((props) => {
                 <span className="popup-line"></span>
                 <div className="popup-title-button-container">
                     <span className="popup-title-button-title">{LangDict.connectToExist[lang]}</span>
-                    <PinkButton textButton={LangDict.connectToDemoButton[lang]} onClick={props.onClickSecond} width='100%' />
+                    <PinkButton textButton={LangDict.connectToDemoButton[lang]} onClick={props.onClickSecond} width='100%' variant="gray" />
                 </div>
             </div>
             : <div className="popup-title-input-container">
diff --git a/src/components/mainPart/pinkButton.css b/src/components/mainPart/pinkButton.css
index aa25900..beb59d3 100644
--- a/src/components/mainPart/pinkButton.css
+++ b/src/components/mainPart/pinkButton.css
@@ -15,6 +15,11 @@
     cursor: pointer;
 }
 
+.main-part-text-button.gray {
+    background: #4F4F4F;
+    color: #FFFFFF;
+}
+
 .main-part-text-button:hover,
 .main-part-text-button:active {
     background-color: #FFFFFF;
@@ -23,6 +28,13 @@
     transition: .3s;
 }
 
+.main-part-text-button.gray:hover,
+.main-part-text-button.gray:active {
+    background: #828282;
+    color: #FFFFFF;
+    border: none;
+}
+
 @media screen and (min-width: 2000px) {
     .main-part-text-button {
         width: 50%;
diff --git a/src/components/mainPart/pinkButton.tsx b/src/components/mainPart/pinkButton.tsx
index 5d4c13f..45d66d5 100644
--- a/src/components/mainPart/pinkButton.tsx
+++ b/src/components/mainPart/pinkButton.tsx
@@ -6,7 +6,8 @@ type TProps = {
     textButton: string
     onClick?: () => void
     type?: 'submit' | 'button'
-    width?: '100%' | string
+    width?: '100%' | string,
+    variant?: 'gray' | 'default'
 }
 
 export const PinkButton:React.FC<TProps> = React.memo((props) => {
@@ -18,7 +19,7 @@ export const PinkButton:React.FC<TProps> = React.memo((props) => {
     }, [])
     return <button        
         style={{width: props.width ? props.width : '', ...styles}}
-        className="main-part-text-button"
+        className={`main-part-text-button ${props.variant === "gray" ? 'gray' : ''}`}
         onClick={() => {
             return props?.onClick ? props.onClick() : null;
         }}