confirm buttons

src/components/ConfirmButton.js

@@ -5,19 +5,13 @@ class ConfirmButton extends Component {
         const {yes,no,text} = this.props;
         return(
             <>
-                <div style={{
-                    position:'fixed',
-                    backgroundColor: 'tomato',
-                    left:'0',
-                    right:'0',
-                    width: '300px',
-                    height: '150px',
-                    margin: 'auto',
-                    zIndex:'2'
-                }}>
-                    <div>{text}</div>
-                    <button onClick={() => yes()}>Yes</button>
-                    <button onClick={() => no()}>No</button>
+                <div  className = "confirm-button" >
+                    <h3 >{text}</h3>
+                    <div className="btns">
+                        <button className = "btn confirm yes" onClick={() => yes()}>Да</button>
+                        <button className = "btn confirm no" onClick={() => no()}>Нет</button>                        
+                    </div>
+
                 </div>
                 <div className = "wrap-check-off"  onClick={no}/>
             </>

src/style/all.scss

@@ -1122,6 +1122,36 @@ h2 {
 
 }
 
+// __________confirm-button_________
+.confirm-button {
+	position: fixed;
+	left: 0;
+	right: 0;
+	width: 300px;
+	height: 150px;
+	margin: auto;
+	padding: 10px;
+	background-color: $main-color;
+	z-index: 99;
+	h3 {
+		margin: 10px;
+	}
+	.btns{
+		display: flex;
+		justify-content: space-evenly;
+	}
+	.confirm {
+		width: 30%;
+		font-size: 0.7em;
+		min-height: 25px;
+		margin: 5px;
+	}
+	.no {
+		background-color: rgb(255, 151, 116);
+	}
+}
+
+
 
 	// _______________ACCORDION___________
 	#accordion {