From 51ae926a2f066b4e973107de8950c667c628ce56 Mon Sep 17 00:00:00 2001 From: Victor Batischev Date: Thu, 8 Feb 2024 16:39:22 +0300 Subject: [PATCH] quiz styles --- .../ProfileCalendarComponent.jsx | 8 +- src/components/ReportForm/ReportForm.jsx | 2 +- src/components/StarRating/StarRating.js | 2 +- src/components/features/quiz/AlertResult.jsx | 6 +- src/components/features/quiz/QuizReport.jsx | 2 +- src/components/features/quiz/quiz.scss | 91 ++++++++----------- src/pages/Quiz/quiz-page.scss | 6 +- src/pages/Tracker/Tracker.jsx | 2 +- 8 files changed, 50 insertions(+), 69 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 8cab6dd5..a68d7c15 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -284,15 +284,15 @@ export const ProfileCalendarComponent = React.memo( ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : activePeriod - ? "Выберите диапазон на календаре" - : "Выбрать диапазон"} + ? "Выберите диапазон на календаре" + : "Выбрать диапазон"} {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : endDate - ? "0 часов" - : ""} + ? "0 часов" + : ""} {endDate && ( { className="report-form__footer-btn" onClick={() => handler()} > - Отпаравить + Отправить )}

diff --git a/src/components/StarRating/StarRating.js b/src/components/StarRating/StarRating.js index 446336e4..913ae7bf 100644 --- a/src/components/StarRating/StarRating.js +++ b/src/components/StarRating/StarRating.js @@ -6,7 +6,7 @@ const StarRating = ({ countStars = 1, countActiveStars = 1, color = "#52B709", - size = 61 + size = 40 }) => { const [shadedStars, setShadedStars] = useState([]); const [noShadedStars, setNoShadedStars] = useState([]); diff --git a/src/components/features/quiz/AlertResult.jsx b/src/components/features/quiz/AlertResult.jsx index dcac3961..71eda511 100644 --- a/src/components/features/quiz/AlertResult.jsx +++ b/src/components/features/quiz/AlertResult.jsx @@ -17,14 +17,14 @@ export const AlertResult = ({ info }) => { className="alert-result__text" style={{ color: successTest ? "#52B709" : "#5B6871" }} > - Благодарим Вас за прохождение теста "{info.questionnaire_title}". Ваши - результаты проверены, готовы пригласить Вас в команду + Благодарим Вас за прохождение теста "{info.questionnaire_title}". + Ваши результаты проверены, готовы пригласить Вас в команду {!successTest && (

)} diff --git a/src/components/features/quiz/QuizReport.jsx b/src/components/features/quiz/QuizReport.jsx index 0e05ccce..ec9b3423 100644 --- a/src/components/features/quiz/QuizReport.jsx +++ b/src/components/features/quiz/QuizReport.jsx @@ -35,7 +35,7 @@ export const QuizReport = ({ info }) => {
Статус:
-
Пройдено!
+
Пройден!
diff --git a/src/components/features/quiz/quiz.scss b/src/components/features/quiz/quiz.scss index 2112f703..12e02b8d 100644 --- a/src/components/features/quiz/quiz.scss +++ b/src/components/features/quiz/quiz.scss @@ -425,10 +425,10 @@ $maxWidthContainer: 1123; &__container { display: block; - @include adaptiv-value("padding-top", 30, 20, 1); - @include adaptiv-value("padding-bottom", 30, 20, 1); - @include adaptiv-value("padding-right", 28, 18, 1); - @include adaptiv-value("padding-left", 28, 18, 1); + @include adaptiv-value("padding-top", 15, 15, 1); + @include adaptiv-value("padding-bottom", 15, 15, 1); + @include adaptiv-value("padding-right", 15, 15, 1); + @include adaptiv-value("padding-left", 15, 15, 1); } &:hover { @@ -440,8 +440,8 @@ $maxWidthContainer: 1123; &__top-head { display: flex; align-items: center; - gap: 19px; - margin: 0 0 24px 0; + gap: 10px; + margin-bottom: 15px; } &__title { font-weight: 500; @@ -459,9 +459,8 @@ $maxWidthContainer: 1123; p { flex: 0 1 66%; - font-weight: 700; - font-size: 12px; - line-height: 20px; + font-weight: 500; + font-size: 13px; color: #000000; margin-bottom: 0; @@ -485,7 +484,7 @@ $maxWidthContainer: 1123; border-radius: 12px; padding: 13px 16px; position: absolute; - bottom: 20px; + bottom: 0px; left: 0; display: flex; align-items: center; @@ -494,8 +493,7 @@ $maxWidthContainer: 1123; gap: 10px; p { font-weight: 500; - font-size: 14px; - line-height: 129%; + font-size: 13px; color: #000000; } a { @@ -554,27 +552,20 @@ $maxWidthContainer: 1123; color: #52b709; } - // .block-completed-test__text - &__text { max-width: 386px; margin: 0 26px 0 0; - font-weight: 400; - font-size: 12px; - line-height: 200%; + font-weight: 500; + font-size: 13px; color: #000000; } - // .block-completed-test__button - &__button { display: block; } } .report { - // .report__row - &__row { display: flex; align-items: center; @@ -586,36 +577,37 @@ $maxWidthContainer: 1123; } } - // .report__column - &__column { &:first-child { background: #ffffff; flex: 0 1 22%; - border-radius: 12px; + border-radius: 12px 0 0 12px; @media (max-width: 1000px) { flex: 0 1 50%; } + @media (max-width: 600px) { + border-radius: 12px 12px 0 0; + } } - height: 128px; - border-radius: 0px 12px 0px 0px; + height: 90px; flex: 0 1 26%; display: flex; justify-content: center; align-items: center; background: #e1fccf; - gap: 21px; + gap: 10px; &:last-child { - flex-direction: column; - gap: 0; - } - @media (max-width: 1000px) { - flex: 0 1 50%; + border-radius: 0 12px 12px 0; + gap: 10px; + @media (max-width: 1000px) { + flex: 0 1 50%; + } + @media (max-width: 600px) { + border-radius: 0 0 12px 12px; + } } } - // .report__job-title - &__job-title { font-weight: 500; font-size: 18px; @@ -623,22 +615,17 @@ $maxWidthContainer: 1123; color: #000000; } - // .report__value - &__value { font-weight: 700; font-size: 52px; line-height: 56%; color: #52b709; - // .report__value_false &_false { color: #5b6871; } } - // .report__text - &__text { font-weight: 400; font-size: 16px; @@ -646,26 +633,20 @@ $maxWidthContainer: 1123; color: #000000; } - // .report__status-text - &__status-text { - font-weight: 400; - font-size: 12px; - line-height: 200%; + font-weight: 500; + font-size: 15px; color: #000000; - width: 50%; } - // .report__status - &__status { background: #1458dd; - border-radius: 44px; + border-radius: 5px; font-weight: 500; font-size: 16px; line-height: 200%; color: #ffffff; - padding: 7px 34px; + padding: 7px 14px; max-width: 154px; } } @@ -673,19 +654,19 @@ $maxWidthContainer: 1123; .alert-result { display: flex; align-items: center; - @include adaptiv-value("padding-top", 39, 20, 1); - @include adaptiv-value("padding-bottom", 39, 20, 1); - @include adaptiv-value("padding-right", 61, 20, 1); - @include adaptiv-value("padding-left", 61, 20, 1); + @include adaptiv-value("padding-top", 20, 20, 1); + @include adaptiv-value("padding-bottom", 20, 20, 1); + @include adaptiv-value("padding-right", 20, 20, 1); + @include adaptiv-value("padding-left", 20, 20, 1); background: #fff; - gap: 30px; + gap: 10px; border-radius: 10px; @media (max-width: 900px) { flex-wrap: wrap; } &__column { display: flex; - @include adaptiv-value("gap", 44, 14, 1); + @include adaptiv-value("gap", 20, 20, 1); align-items: center; @media (max-width: 900px) { flex: 1 1 auto; diff --git a/src/pages/Quiz/quiz-page.scss b/src/pages/Quiz/quiz-page.scss index 7b34b243..9c98c911 100644 --- a/src/pages/Quiz/quiz-page.scss +++ b/src/pages/Quiz/quiz-page.scss @@ -17,12 +17,12 @@ } &__block { background: #e1fccf; - border-radius: 12px 12px 0px 0px; + border-radius: 12px; font-weight: 400; - font-size: 18px; + font-size: 23px; line-height: 178%; color: #000000; - padding: 20px 51px; + padding: 20px; margin: 0 0 16px 0; } &__cards-test { diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index 2bc379dd..0f2c2c34 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -306,7 +306,7 @@ export const Tracker = () => {
# -

Скачать Excel отчет

+

Скачать Excel-отчет