apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring allStyles styleStyle -> style-style

Browse Source
This commit is contained in:
Никита Губарь
2024-02-09 18:17:15 +03:00
parent 81d2ee4098
commit af07631abe
93 changed files with 751 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/RegistrationSetting/RegistrationSetting.js
View File

@ -71,33 +71,33 @@ export const RegistrationSetting = () => {
const [step, setStep] = useState(1);
return (
<div className="registrationSetting">
<div className="registration-setting">
<AuthHeader />
<SideBar />
<div className="registrationSetting__content">
<div className="registration-setting__content">
<div className="container">
<h1 className="registrationSetting__title">
<h1 className="registration-setting__title">
Добро пожаловать{" "}
<span>
в ITGuild
<img src={arrowInfo} alt="arrow" />
</span>
</h1>
<div className="registrationSetting__question questionBlock">
<div className="questionBlock__head">
<span className="questionBlock__suptitle">
<div className="registration-setting__question question-block">
<div className="question-block__head">
<span className="question-block__suptitle">
Эти ответы помогут сформировать кабинет
</span>
<div className="questionBlock__steps">
<div className="question-block__steps">
<span className="active" />
<span className={step >= 2 ? "active" : ""} />
<span className={step >= 3 ? "active" : ""} />
</div>
</div>
<h3 className="questionBlock__question">
<h3 className="question-block__question">
Со сколькими людьми ты будешь работать?
</h3>
<div className="questionBlock__answers">
<div className="question-block__answers">
{questions.countPeople.map((item, index) => {
return (
<button
@ -118,15 +118,15 @@ export const RegistrationSetting = () => {
})}
</div>
<img
className="registrationSetting__question__img"
className="registration-setting__question__img"
src={registrationImg}
alt="img"
/>
</div>
{step >= 2 && (
<div className="registrationSetting__question questionBlock">
<h3 className="questionBlock__question">Какая у тебя роль?</h3>
<div className="questionBlock__answers">
<div className="registration-setting__question question-block">
<h3 className="question-block__question">Какая у тебя роль?</h3>
<div className="question-block__answers">
{questions.role.map((item, index) => {
return (
<button
@ -147,7 +147,7 @@ export const RegistrationSetting = () => {
</div>
)}
{step >= 3 && (
<div className="registrationSetting__environment environment">
<div className="registration-setting__environment environment">
<span className="environment__suptitle">
Организуй комфортную среду для продуктивности
</span>
@ -191,7 +191,7 @@ export const RegistrationSetting = () => {
);
})}
</div>
<button className="registrationSetting__continue registrationSetting__done">
<button className="registration-setting__continue registration-setting__done">
Готово
</button>
</div>
@ -206,7 +206,7 @@ export const RegistrationSetting = () => {
setStep((prevState) => prevState + 1);
}
}}
className="registrationSetting__continue"
className="registration-setting__continue"
>
Продолжить
</button>

31
src/pages/RegistrationSetting/registrationSetting.scss
View File

@ -1,4 +1,4 @@
.registrationSetting {
.registration-setting {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1;
@ -21,7 +21,7 @@
margin-bottom: 46px;
color: #000000;
span {
color: #52B709;
color: #52b709;
position: relative;
img {
position: absolute;
@ -48,7 +48,7 @@
}
&__question {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 46.5px 75.5px 38px;
position: relative;
@ -60,17 +60,18 @@
}
}
.questionBlock {
.question-block {
display: flex;
flex-direction: column;
margin-bottom: 18px;
&__head {
display: flex;
margin-bottom: 33px;
}
&__suptitle {
color: #6F6F6F;
color: #6f6f6f;
font-size: 14px;
margin-right: 70px;
}
@ -83,12 +84,12 @@
span {
width: 75px;
height: 6.5px;
background: #B0BABF;
background: #b0babf;
border-radius: 77px;
}
.active {
background: #6F6F6F;
background: #6f6f6f;
}
}
@ -105,14 +106,14 @@
button {
border-radius: 12px;
border: 1px solid #8DC63F;
border: 1px solid #8dc63f;
padding: 4px 30px;
line-height: 32px;
font-size: 15px;
}
.active {
background: #1458DD;
background: #1458dd;
color: whitesmoke;
font-weight: 500;
border: none;
@ -123,13 +124,13 @@
&__environment {
margin-top: 13px;
padding: 32px 20px 42px 44px;
background: #E2EBEF;
background: #e2ebef;
border-radius: 12px;
.environment {
&__suptitle {
font-size: 14px;
color: #6F6F6F;
color: #6f6f6f;
margin-left: 31px;
}
@ -181,7 +182,7 @@
column-gap: 22.4px;
p {
color: #6F6F6F;
color: #6f6f6f;
font-size: 12px;
max-width: 189px;
}
@ -190,7 +191,7 @@
width: 48px;
height: 48px;
border-radius: 50px;
background: #DDEEC6;
background: #ddeec6;
margin-left: auto;
display: flex;
align-items: center;
@ -204,12 +205,12 @@
.item--active {
opacity: 1;
border: 2px solid #1458DD;
border: 2px solid #1458dd;
}
&__continue {
margin: 6px 0 0 75.5px;
background-color: #52B709;
background-color: #52b709;
width: 174px;
height: 46px;
color: white;