finished auth page

2021-06-14 15:56:10 +03:00
parent 2002bcc3d5
commit 732cb7a2bc
10 changed files with 406 additions and 221 deletions
--- a/src/components/Candidate/Candidate.js
+++ b/src/components/Candidate/Candidate.js
@ -16,18 +16,13 @@ const Candidate = () => {
  const history = useHistory();

  const { id: candidateId } = useParams();
-  console.log('candidateId', candidateId);

  const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));

  const { name, img, header } = currentCandidate;

-  console.log(currentCandidate);
-
  let classes;

-  console.log(classes);
-
  if (name === 'Backend') {
    classes = style.back;
    console.log(classes);
@ -95,10 +90,6 @@ const Candidate = () => {
          </div>
        </div>
      </div>
-
-      {/* <h1>
-        Candidate name: <span>{currentCandidate.name}</span>
-      </h1> */}
    </section>
  );
 };
--- a/src/components/Candidate/Candidate.module.css
+++ b/src/components/Candidate/Candidate.module.css
@ -154,7 +154,7 @@

@media (max-width: 375.98px) {
  .candidate__main__description > h2 {
-    font-size: 2.8em;
+    font-size: 3em;
  }
 }

--- a/src/components/Candidate/sections/Section.module.css
+++ b/src/components/Candidate/sections/Section.module.css
@ -1,120 +1,157 @@
+.SectionOne > h3 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.2em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+}

-  .SectionOne > h3 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.2em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
+.SectionOne > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 28px;
+  text-align: left;
+}
+
+.SectionOne > h4 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+}
+
+.SectionTwo > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 28px;
+  text-align: left;
+}
+
+.SectionThree > h3 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.2em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+}
+
+.SectionThree > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 28px;
+  text-align: left;
+}
+
+.SectionThree > h4 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+}
+
+.SectionFour > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 18px;
+  text-align: left;
+}
+
+.SectionFive > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16px;
+  text-align: left;
+}
+
+@media (min-width: 576.98px) {
+  .SectionFive__btn {
+    display: none;
  }
+}

-  .SectionOne > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 100;
-    font-style: normal;
+@media (max-width: 575.98px) {
+  .SectionFive__btn {
+    display: block;
+    width: 221px;
+    height: 49px;
+    box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
+    border-radius: 24px;
+    background-color: #ffffff;
+    background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
+      linear-gradient(
+        36deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.16) 47%,
+        rgba(255, 255, 255, 0.17) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    color: #ffffff;
+    font-family: 'Muller';
+    font-size: 1.3em;
    letter-spacing: normal;
-    line-height: 28px;
+    line-height: 56.7px;
    text-align: left;
-
+    border: none;
+    text-align: center;
+    margin: 28px auto;
  }
+}

-  .SectionOne > h4 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-
-  .SectionTwo > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-  }
-
-  .SectionThree > h3 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.2em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-
-  .SectionThree > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 100;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-  }
-
-  .SectionThree > h4 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-
-  .SectionFour > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 18px;
-    text-align: left;
-  }
-
-  .SectionFive > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 16px;
-    text-align: left;
-  }
+.SectionSkills {
+  border: 1px solid #69bf2c;
+  padding: 28px 40px 16px 30px;
+  margin-top: 60px;
+  border-radius: 10px;
+  margin-bottom: 60px;
+}

+@media (max-width: 575.98px) {
  .SectionSkills {
-    border: 1px solid #69bf2c;
-    padding: 28px 40px 16px 30px;
-    margin-top: 60px;
-    border-radius: 10px;
-    margin-bottom: 60px;
-    
+    display: none;
  }
-  
-  .SectionSkills > h3 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-  }
-  
-  .SectionSkills > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 100;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-  }
+}
+
+.SectionSkills > h3 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 28px;
+  text-align: left;
+}
+
+.SectionSkills > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 28px;
+  text-align: left;
+}
--- a/src/components/Candidate/sections/SectionFive.js
+++ b/src/components/Candidate/sections/SectionFive.js
@ -3,15 +3,20 @@ import style from './Section.module.css';

 const SectionFive = () => {
  return (
-    <div className={style.SectionFive}>
-      <p>Регистрации/авторизации;</p>
-      <p>Управления правами менеджеров отеля, назначение поставщиков</p>
-      <p>Управления описанием и профилем отелей;</p>
-      <p>Управления финансами, ценообразованием, квотами;</p>
-      <p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
-      <p>Управления новостями отеля;</p>
-      <p>Просмотра расширенной статистики по заявкам и людям;</p>
-    </div>
+    <>
+      <div className={style.SectionFive}>
+        <p>Регистрации/авторизации;</p>
+        <p>Управления правами менеджеров отеля, назначение поставщиков</p>
+        <p>Управления описанием и профилем отелей;</p>
+        <p>Управления финансами, ценообразованием, квотами;</p>
+        <p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
+        <p>Управления новостями отеля;</p>
+        <p>Просмотра расширенной статистики по заявкам и людям;</p>
+      </div>
+      <button type="submit" className={style.SectionFive__btn}>
+        Выбрать к собеседованию
+      </button>
+    </>
  );
 };