diff --git a/public/uxcore_/assets/uxcat/information-icon.svg b/public/uxcore_/assets/uxcat/information-icon.svg new file mode 100644 index 0000000..75287f9 --- /dev/null +++ b/public/uxcore_/assets/uxcat/information-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Box/Box.module.scss b/src/components/Box/Box.module.scss index 1854570..aa891c2 100644 --- a/src/components/Box/Box.module.scss +++ b/src/components/Box/Box.module.scss @@ -7,7 +7,7 @@ width: 100%; max-width: 450px; background-color: #fff; - z-index: 2147483647; + z-index: 45; border-radius: 8px; box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.05), diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx index 5965ff2..2137c5e 100644 --- a/src/components/Box/Box.tsx +++ b/src/components/Box/Box.tsx @@ -1,5 +1,6 @@ import { FC } from 'react'; import { useRouter } from 'next/router'; +import cn from 'classnames'; import Button from '@components/Button'; @@ -8,7 +9,6 @@ import cookieData from '@data/cookies'; import { TRouter } from '@local-types/global'; import styles from './Box.module.scss'; -import cn from 'classnames'; interface CookiesBoxProps { setIsSeen?: () => void; diff --git a/src/components/ToolHeader/ToolHeader.module.scss b/src/components/ToolHeader/ToolHeader.module.scss index ef2c031..c31eb70 100644 --- a/src/components/ToolHeader/ToolHeader.module.scss +++ b/src/components/ToolHeader/ToolHeader.module.scss @@ -66,6 +66,10 @@ $headerHeight: 46px; --pill-w: 157px; } + .Links.is-uxcat-ru { + --pill-w: 187px; + } + .Links.is-uxcore .Indicator { transform: translateX(calc((96px + 8px) * 0)); color: #fff; diff --git a/src/components/ToolHeader/ToolHeader.tsx b/src/components/ToolHeader/ToolHeader.tsx index b63fce2..425f3b2 100644 --- a/src/components/ToolHeader/ToolHeader.tsx +++ b/src/components/ToolHeader/ToolHeader.tsx @@ -306,7 +306,11 @@ const ToolHeader: FC = ({ /> -
+
{navItems.map(({ label, href, page, icon }, index) => { return ( diff --git a/src/data/uxcat/ongoingTest/en.ts b/src/data/uxcat/ongoingTest/en.ts index d55e227..668a353 100644 --- a/src/data/uxcat/ongoingTest/en.ts +++ b/src/data/uxcat/ongoingTest/en.ts @@ -8,7 +8,6 @@ const en = { message: 'You are about to leave the page. Your test will continue until its time runs out', pickAnswer: 'Choose the answer', - questionLabel: 'Question: ', }; export default en; diff --git a/src/data/uxcat/ongoingTest/ru.ts b/src/data/uxcat/ongoingTest/ru.ts index e88e2b7..4e7048c 100644 --- a/src/data/uxcat/ongoingTest/ru.ts +++ b/src/data/uxcat/ongoingTest/ru.ts @@ -8,7 +8,6 @@ const ru = { message: 'Вы собираетесь покинуть страницу, тест продолжится до истечения времени.', pickAnswer: 'Выберите ответ', - questionLabel: 'Вопрос: ', }; export default ru; diff --git a/src/layouts/CoreViewLayout/CoreViewLayout.module.scss b/src/layouts/CoreViewLayout/CoreViewLayout.module.scss index 9f01ded..bbf6ce0 100644 --- a/src/layouts/CoreViewLayout/CoreViewLayout.module.scss +++ b/src/layouts/CoreViewLayout/CoreViewLayout.module.scss @@ -77,7 +77,7 @@ .description { width: 218px; - font-size: 12px; + font-size: 14px; color: #000000a6; line-height: 1.3; text-align: center; @@ -86,7 +86,7 @@ } .moto { - font-size: 12px; + font-size: 14px; color: #9e9e9e; line-height: 1; } diff --git a/src/layouts/OngoingLayout/OngoingLayout.module.scss b/src/layouts/OngoingLayout/OngoingLayout.module.scss index 31d1b54..87200d2 100644 --- a/src/layouts/OngoingLayout/OngoingLayout.module.scss +++ b/src/layouts/OngoingLayout/OngoingLayout.module.scss @@ -15,7 +15,7 @@ $white: #fafafa; } .questionWrapper { - min-height: 348px; + min-height: 223px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); background-color: #ffffff; @@ -37,8 +37,9 @@ $white: #fafafa; .questionTxt { font-size: 24px; font-weight: 800; - color: #c4c4c4; + color: #000; text-align: center; + margin: 18px 0; } .fadeInQuestionTxt { @@ -126,9 +127,36 @@ $white: #fafafa; } } - .answers { + .questionAnswers { padding-top: 24px; + .iconAndBias { + display: flex; + align-items: flex-start; + gap: 10px; + background: #f0f0f0; + padding: 10px; + border-radius: 4px; + } + + .biasTitle { + font-size: 14px; + margin: 0; + padding: 0; + } + + .description { + p { + margin: 0; + line-height: 1.6; + font-size: 14px; + + span { + background-color: unset !important; + } + } + } + .questionSkeleton { display: flex; justify-content: center; @@ -254,7 +282,7 @@ $white: #fafafa; } .question, - .answers, + .questionAnswers, .quizQuestion { width: 900px; max-width: 100%; @@ -264,32 +292,20 @@ $white: #fafafa; } .quizQuestion { - padding: 16px 24px; - font-weight: 700; - border: 1px solid #c4c4c4; - border-radius: 4px; - background-color: #ffffff; - width: 851px; - max-width: 100%; - min-height: 85px; - overflow: hidden; - margin-bottom: 10px; + display: flex; + justify-content: center; + align-items: center; + padding-bottom: 40px; + gap: 8px; - .questionLabel { - display: flex; - align-items: center; - gap: 12px; - font-size: 24px; + .quizQuestionTxt { + font-size: 18px; + margin: 0; font-weight: 700; - line-height: 1.6; - color: #000000d9; } - .questionTxt { - margin: 0; - padding-left: 44px; - padding-top: 4px; - font-size: 18px; + .questionMark { + padding-bottom: 5px; } } @@ -329,14 +345,15 @@ $white: #fafafa; .questionWrapper { width: unset; - padding: 15px 0 40px 15px; + padding: 15px 0 0 15px; height: unset; - min-height: 220px; + min-height: 183px; } - .answers { + .questionAnswers { .answerWrapper { -webkit-tap-highlight-color: transparent; + .input { width: -webkit-fill-available; } @@ -347,7 +364,13 @@ $white: #fafafa; @media (max-width: 800px) { .ongoing { - .answers { + .questionAnswers { + .iconAndBias { + flex-direction: column; + align-items: center; + margin: 8px; + } + .answerWrapper { margin-top: 8px; } @@ -364,19 +387,17 @@ $white: #fafafa; .questionTxt { padding-top: unset; + font-size: 16px; + margin: 16px 0 5px 0; } } } - .answers, + .questionAnswers, .question { width: unset; max-width: unset; - .question { - text-align: center; - } - .skeleton { border: unset; min-height: 62px; @@ -390,9 +411,9 @@ $white: #fafafa; } .quizQuestion { - padding: 8px; min-height: unset; - line-height: 1.4; + flex-direction: column; + padding: unset; .questionLabel { padding-bottom: 8px; diff --git a/src/layouts/OngoingLayout/OngoingLayout.tsx b/src/layouts/OngoingLayout/OngoingLayout.tsx index fbb2f09..b933e5c 100644 --- a/src/layouts/OngoingLayout/OngoingLayout.tsx +++ b/src/layouts/OngoingLayout/OngoingLayout.tsx @@ -28,7 +28,23 @@ import styles from './OngoingLayout.module.scss'; import 'react-loading-skeleton/dist/skeleton.css'; type OngoingProps = { - startTest?: any; // TODO Mary - change thiisss + startTest?: { + testId: number; + questions: { + id: number; + bodyEn: string; + bodyRu: string; + questionEn: string; + questionRu: string; + bias: number; + isEaster: boolean; + answers: { + id: number; + bodyEn: string; + bodyRu: string; + }[]; + }[]; + }; remainingTime?: { hours: number; minutes: number; seconds: number }; finalTestPermission?: boolean; accessToken?: string; @@ -82,7 +98,6 @@ const OngoingLayout: FC = ({ message, pickAnswer, skipQuestionTxt, - questionLabel, } = ongoingTestData[currentLocale]; const questionsLeft = startTest?.questions?.length; @@ -107,6 +122,27 @@ const OngoingLayout: FC = ({ ? `${startTest?.questions[currentQuestionIndex]?.questionRu}` : `${startTest?.questions[currentQuestionIndex]?.questionEn}`; + function underlineStandaloneNegation(text: string) { + const negationWordRegex = + locale === 'ru' + ? /(?{match[0]}); + cursor = startIndex + match[0].length; + } + + pieces.push(text.slice(cursor)); + return pieces; + } + const hasAchievement = startTest?.questions[currentQuestionIndex]?.isEaster; const prefixesEn = ['A ', 'B ', 'C ']; @@ -409,6 +445,7 @@ const OngoingLayout: FC = ({ width={20} height={20} alt={'Contains achievement'} + unoptimized />
= ({ )}
- -
{biasTitle ? ( -

- {biasTitle} -

- ) : ( - - )} - {biasDescription ? (
- -
- ) : ( - - )} -
- -
- {biasTitle ? ( -
- {'Question - {questionLabel} - -

{question}

+

+ {underlineStandaloneNegation(question)} +

+
+ ) : ( +
+ +
+ )} +
+ +
+
+
+ {'Information
- ) : ( -
- + +
+ {biasTitle ? ( +

+ {biasTitle} +

+ ) : ( + + )} + {biasDescription ? ( +
+ +
+ ) : ( + + )}
- )} +
{!!startTest ? ( startTest.questions[currentQuestionIndex]?.answers.map( (answer, index) => { diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts index 1ce1cd5..f8fb2b6 100644 --- a/src/lib/helpers.ts +++ b/src/lib/helpers.ts @@ -318,7 +318,7 @@ export const generateQuestionsSeo = ( export const mergeBiasesLocalization = (en: any[], ru: any[], hy?: any[]) => { const result: StrapiBiasType[] = []; - !!en && + if (Array.isArray(en)) { en?.forEach((item: any, index: number) => { result.push({ seoTitleEn: item?.attributes?.seoTitle || null, @@ -380,6 +380,7 @@ export const mergeBiasesLocalization = (en: any[], ru: any[], hy?: any[]) => { updatedAt: item?.attributes?.updatedAt || null, }); }); + } return result; }; diff --git a/src/pages/uxcat/index.tsx b/src/pages/uxcat/index.tsx index dc96ef3..cf98830 100644 --- a/src/pages/uxcat/index.tsx +++ b/src/pages/uxcat/index.tsx @@ -6,7 +6,6 @@ import UXCatLayout from '@layouts/UXCatLayout'; import SeoGenerator from '@components/SeoGenerator'; -import { getTags } from '@api/tags'; import { getLevels } from '@api/uxcat/get-levels'; import { getNotifications } from '@api/uxcat/get-notifications'; import { getAchievement } from '@api/uxcat/get-achievement'; @@ -14,7 +13,6 @@ import { getUXCatData } from '@api/uxcat/uxcat'; import { UXCatConfigs } from '@api/uxcat/configs'; import { getAllAchievements } from '@api/uxcat/get-all-achievements'; -import { TagType } from '@local-types/data'; import { AchievementsTypes, UserTypes, @@ -34,7 +32,6 @@ import { import { getUserInfo } from '@api/uxcat/users-me'; type UxcatProps = { - tags: TagType[]; uxCatLevels: uxCatLevels[]; allAchievements: AchievementsTypes[]; seriouslyAchievement: any; @@ -43,7 +40,6 @@ type UxcatProps = { }; const Uxcat: FC = ({ - tags, uxCatLevels, seriouslyAchievement, allAchievements, @@ -189,9 +185,9 @@ const Uxcat: FC = ({ = ({ export default Uxcat; export const getServerSideProps: GetServerSideProps = async context => { - const tags = getTags(); const achievementsEn = await getAllAchievements('en', 40); const achievementsRu = await getAllAchievements('ru', 40); const seriouslyAchievement = await getAchievement('SERIOUSLY', 'en'); @@ -243,7 +238,6 @@ export const getServerSideProps: GetServerSideProps = async context => { return { props: { - tags, uxCatLevels, seriouslyAchievement, allAchievements,