From 415b41ff2ab629f61ac620ac871bef7dd701028e Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Mon, 8 May 2023 15:02:43 +1000
Subject: [PATCH] refactor styles in questions

---
 .../src/components/Questions/index.jsx        | 63 ++++++++++++++++---
 1 file changed, 55 insertions(+), 8 deletions(-)

diff --git a/pairent_frontend_react/src/components/Questions/index.jsx b/pairent_frontend_react/src/components/Questions/index.jsx
index 17a46a9..109ec0d 100644
--- a/pairent_frontend_react/src/components/Questions/index.jsx
+++ b/pairent_frontend_react/src/components/Questions/index.jsx
@@ -1,23 +1,70 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import './styles/Questions.css';
 
+const MainSection = styled.section`
+    display: flex;
+    justify-content: space-between;
+    margin-top: 55px;
+`;
+
+const Button = styled.button`
+    width: 323px;
+    height: fit-content;
+    padding: 2% 5% 2% 3%;
+    border-radius: 12px;
+    text-align: left;
+
+    & h3 {
+        font-size: 18px;
+        color: #fff;
+    }
+    & p {
+        margin-top: 16px;
+        font-size: 16px;
+        line-height: 19px;
+        color: #fff;
+    }
+`;
+
+const OrangeButton = styled(Button)`
+    background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
+    &:active {
+        background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
+    }
+`;
+
+const GreenButton = styled(Button)`
+    background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
+    &:active {
+        background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
+    }
+`;
+
+const BlueButton = styled(Button)`
+    background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
+    &:active {
+        background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
+    }
+`;
+
 const Questions = function () {
     return (
-        <section className="questionBtnSection">
-            <button className="questionBtn orangeBtn">
+        <MainSection>
+            <OrangeButton>
                 <h3>Рестик или кафешка?</h3>
                 <p>Какой общепит предпочтительнее для вас возле жилища?</p>
-            </button>
-            <button className="questionBtn greenBtn">
+            </OrangeButton>
+            <GreenButton>
                 <h3>Двушка или однушка?</h3>
                 <p>Как выбрать квартиру под себя, чтобы не переплачивать?</p>
-            </button>
-            <button className="questionBtn blueBtn">
+            </GreenButton>
+            <BlueButton>
                 <h3>Совмещенный или отдельно?</h3>
                 <p>Какой санузел будет для вас лучшим вариантом?</p>
-            </button>
-        </section>  
+            </BlueButton>
+        </MainSection>  
     );
 }