diff --git a/dev-data/courseTitles.data.ts b/dev-data/courseTitles.data.ts index 8b99f8627..7bed3feef 100644 --- a/dev-data/courseTitles.data.ts +++ b/dev-data/courseTitles.data.ts @@ -1,4 +1,4 @@ -import { Course } from '@/widgets/required/required.types'; +import { Course } from '@/widgets/required/types'; export const COURSE_TITLES = { JS_PRESCHOOL_RU: 'JS / Front-end Pre-school RU', diff --git a/src/app/docs/components/search/search.module.scss b/src/app/docs/components/search/search.module.scss index 547241bd9..1e55f591b 100644 --- a/src/app/docs/components/search/search.module.scss +++ b/src/app/docs/components/search/search.module.scss @@ -8,9 +8,9 @@ width: 100%; height: 35px; padding: 5px 10px; - border: 1px solid $color-gray-400; border-radius: 5px; + outline-offset: -2px; &:focus { diff --git a/src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss b/src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss index 882b29ab8..bc6d181f8 100644 --- a/src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss +++ b/src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss @@ -16,11 +16,11 @@ max-width: calc(100vw - var(--page-padding)); height: max-content; padding: 32px; + border-radius: 20px; visibility: hidden; opacity: 0; background-color: $color-white; - border-radius: 20px; box-shadow: 0 1px 8px 0 rgb(0 0 0 / 25%); &.open { diff --git a/src/core/base-layout/components/header/nav-item/nav-item.module.scss b/src/core/base-layout/components/header/nav-item/nav-item.module.scss index 412c1114d..9322feb14 100644 --- a/src/core/base-layout/components/header/nav-item/nav-item.module.scss +++ b/src/core/base-layout/components/header/nav-item/nav-item.module.scss @@ -51,8 +51,8 @@ margin-left: 10px; padding: 0; - background-color: transparent; border: none; + background-color: transparent; &:focus { outline-offset: 3px; diff --git a/src/core/styles/_mixins.scss b/src/core/styles/_mixins.scss index 0420e083e..51d9443b5 100644 --- a/src/core/styles/_mixins.scss +++ b/src/core/styles/_mixins.scss @@ -54,11 +54,11 @@ width: 256px; height: 248px; + border-radius: 100%; opacity: 0.5; background-color: $bg-color; filter: blur(32px); - border-radius: 100%; @if $isHovered { right: -130px; diff --git a/src/core/styles/normalize.scss b/src/core/styles/normalize.scss index 677bed312..ed5a59130 100644 --- a/src/core/styles/normalize.scss +++ b/src/core/styles/normalize.scss @@ -74,9 +74,9 @@ a { */ abbr[title] { + border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ - border-bottom: none; /* 1 */ } /** diff --git a/src/entities/course/ui/course-card/course-card.module.scss b/src/entities/course/ui/course-card/course-card.module.scss index e09ae1519..c5ef51863 100644 --- a/src/entities/course/ui/course-card/course-card.module.scss +++ b/src/entities/course/ui/course-card/course-card.module.scss @@ -9,7 +9,6 @@ width: 380px; min-width: 100px; height: 100%; - border-radius: 12px; .card-header { @@ -23,12 +22,12 @@ height: 100%; min-height: 112px; padding: 0 24px; - - background-color: $color-purple-50; border: solid $color-gray-200; border-width: 1px 1px 0 1px; border-radius: 12px 12px 0 0; + background-color: $color-purple-50; + &::after { @extend %transition-all; @@ -49,11 +48,11 @@ justify-content: space-between; padding: 24px; - - background-color: hsla(from $color-gray-100 h s l/ $opacity-20); border: solid $color-gray-200; border-width: 0 1px 1px 1px; border-radius: 0 0 12px 12px; + + background-color: hsla(from $color-gray-100 h s l/ $opacity-20); } @include media-hover { diff --git a/src/entities/event/ui/event-card/event-card.module.scss b/src/entities/event/ui/event-card/event-card.module.scss index c9c2ee22b..002acef17 100644 --- a/src/entities/event/ui/event-card/event-card.module.scss +++ b/src/entities/event/ui/event-card/event-card.module.scss @@ -14,12 +14,12 @@ height: 304px; padding: 32px 24px 24px 24px; - - background-color: $color-purple-50; border: solid $color-gray-200; border-width: 1px 1px 0 1px; border-radius: 12px 12px 0 0; + background-color: $color-purple-50; + &::after { @extend %transition-all; @@ -35,13 +35,12 @@ min-width: 124px; height: 36px; margin-top: 0; + border: 4px solid $color-purple-100; + border-radius: 36px; font-size: 16px; line-height: 1.2; color: $color-gray-600; - - border: 4px solid $color-purple-100; - border-radius: 36px; } .about-organization { @@ -100,12 +99,12 @@ height: 192px; padding: 24px; - - background-color: hsla(from $color-gray-100 h s l/ $opacity-20); border: solid $color-gray-200; border-width: 0 1px 1px 1px; border-radius: 0 0 12px 12px; + background-color: hsla(from $color-gray-100 h s l/ $opacity-20); + .event-date { display: flex; flex-flow: row nowrap; diff --git a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss index 7eac779d0..76c624ab8 100644 --- a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss +++ b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss @@ -6,8 +6,8 @@ max-width: 700px; padding: 40px 32px 40px 32px; - border-radius: 16px; + box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%); .card-picture { diff --git a/src/shared/types.ts b/src/shared/types.ts index 71316c4fe..951287853 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -1,4 +1,4 @@ -import { LinkList } from '@/widgets/required/required.types'; +import { LinkList } from '@/widgets/required/types'; export type ListData = (string | LinkList)[] | []; export type ListType = 'marked' | 'unmarked'; diff --git a/src/shared/ui/social-media-item/social-media-item.module.scss b/src/shared/ui/social-media-item/social-media-item.module.scss index a0e6fea44..41b7eed4d 100644 --- a/src/shared/ui/social-media-item/social-media-item.module.scss +++ b/src/shared/ui/social-media-item/social-media-item.module.scss @@ -19,8 +19,8 @@ figure { display: flex; - background-color: $color-gray-200; border-radius: 50%; + background-color: $color-gray-200; transition: $transition-social; > img { diff --git a/src/shared/ui/text-with-link/text-with-link.tsx b/src/shared/ui/text-with-link/text-with-link.tsx index e9401e88f..6045ff4d5 100644 --- a/src/shared/ui/text-with-link/text-with-link.tsx +++ b/src/shared/ui/text-with-link/text-with-link.tsx @@ -1,7 +1,7 @@ import { Fragment } from 'react/jsx-runtime'; import { LinkCustom } from '../link-custom'; -import { LinkList } from '@/widgets/required/required.types'; +import { LinkList } from '@/widgets/required/types'; interface TextWithLinkProps { data: LinkList; @@ -11,7 +11,11 @@ export const TextWithLink = ({ data }: TextWithLinkProps) => { return data.map(({ id, text, link, title }) => ( {text && {text}} - {link && {title}} + {link && ( + + {title} + + )} )); }; diff --git a/src/views/angular.tsx b/src/views/angular.tsx index 8524be996..8bef7b293 100644 --- a/src/views/angular.tsx +++ b/src/views/angular.tsx @@ -28,7 +28,7 @@ export const Angular = async ({ courseName }: AngularProps) => { - + diff --git a/src/views/aws-developer.tsx b/src/views/aws-developer.tsx index 88c8119a0..50f580bc7 100644 --- a/src/views/aws-developer.tsx +++ b/src/views/aws-developer.tsx @@ -25,7 +25,7 @@ export const AwsDeveloper = async ({ courseName }: AwsDeveloperProps) => { - + diff --git a/src/views/aws-devops.tsx b/src/views/aws-devops.tsx index abb7fd4b9..eebad2f1a 100644 --- a/src/views/aws-devops.tsx +++ b/src/views/aws-devops.tsx @@ -21,7 +21,7 @@ export const AwsDevOps = ({ courseName }: AwsDevOpsProps) => { - + ); diff --git a/src/views/aws-fundamentals.tsx b/src/views/aws-fundamentals.tsx index 5806708a6..1e2ae5e18 100644 --- a/src/views/aws-fundamentals.tsx +++ b/src/views/aws-fundamentals.tsx @@ -20,7 +20,7 @@ export const AwsFundamentals = ({ courseName }: AwsFundamentalsProps) => { - + diff --git a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss index f7cd1087e..a356554c7 100644 --- a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss +++ b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss @@ -15,11 +15,11 @@ width: 100%; padding: 24px; - - background-color: $color-yellow-50; border: 1px solid hsla(from $color-yellow h s l/ $opacity-8); border-radius: 12px; + background-color: $color-yellow-50; + .item-title { display: flex; gap: 16px; diff --git a/src/widgets/benefits/ui/benefits/benefits.module.scss b/src/widgets/benefits/ui/benefits/benefits.module.scss index 605408de7..bf36ac8fe 100644 --- a/src/widgets/benefits/ui/benefits/benefits.module.scss +++ b/src/widgets/benefits/ui/benefits/benefits.module.scss @@ -10,14 +10,14 @@ .grid-item { padding: 24px; + border: 1px solid $color-yellow-100; + border-radius: 12px; font-size: 18px; line-height: 28px; color: $color-gray-600; background-color: $color-yellow-50; - border: 1px solid $color-yellow-100; - border-radius: 12px; &:nth-child(1) { grid-area: top-left; @@ -64,6 +64,8 @@ width: 100%; padding: 24px; + border: 1px solid $color-yellow-100; + border-radius: 12px; font-size: 18px; line-height: 28px; @@ -71,8 +73,6 @@ letter-spacing: 0; background-color: $color-yellow-50; - border: 1px solid $color-yellow-100; - border-radius: 12px; } .item-short { diff --git a/src/widgets/communication/ui/communication.module.scss b/src/widgets/communication/ui/communication.module.scss index 9fbb8f45e..789f5f7f4 100644 --- a/src/widgets/communication/ui/communication.module.scss +++ b/src/widgets/communication/ui/communication.module.scss @@ -26,9 +26,9 @@ width: 250px; padding: 30px; + border-radius: 30px; background-color: hsl(234.9deg 85.6% 64.7%); - border-radius: 30px; img { width: 100%; diff --git a/src/widgets/member-activity/ui/stage-card/step/step.scss b/src/widgets/member-activity/ui/stage-card/step/step.scss index 9b02bc656..0bf028716 100644 --- a/src/widgets/member-activity/ui/stage-card/step/step.scss +++ b/src/widgets/member-activity/ui/stage-card/step/step.scss @@ -14,13 +14,13 @@ width: 80px; height: 80px; + border: 1px solid #fff2d9; + border-radius: 50%; font-size: 24px; line-height: 32px; background-color: #fffaf0; - border: 1px solid #fff2d9; - border-radius: 50%; @include media-tablet { width: 40px; diff --git a/src/widgets/places/ui/places/places.module.scss b/src/widgets/places/ui/places/places.module.scss index cc8e6d372..41e9a27b1 100644 --- a/src/widgets/places/ui/places/places.module.scss +++ b/src/widgets/places/ui/places/places.module.scss @@ -6,7 +6,6 @@ display: flex; padding: 5px 20px; - border-color: $color-gray-600; border-style: solid; border-width: 1px 0 1px 0; diff --git a/src/widgets/principles/ui/principle-card/principle-card.module.scss b/src/widgets/principles/ui/principle-card/principle-card.module.scss index c9ef78360..2938f875c 100644 --- a/src/widgets/principles/ui/principle-card/principle-card.module.scss +++ b/src/widgets/principles/ui/principle-card/principle-card.module.scss @@ -10,12 +10,12 @@ width: 100%; padding: 24px; + border: 1px solid rgb(255 219 32 / 8%); + border-radius: 12px; color: $color-gray-600; background-color: $color-yellow-50; - border: 1px solid rgb(255 219 32 / 8%); - border-radius: 12px; &::after { content: ''; @@ -26,10 +26,10 @@ width: 310px; height: 300px; + border-radius: 100%; background-color: rgb(255 219 32 / 20%); filter: blur(32px); - border-radius: 100%; } .card-header { @@ -74,10 +74,10 @@ width: 20px; height: 20px; + border-radius: 100%; background-color: rgba($color-yellow, $opacity-80); filter: blur(8px); - border-radius: 100%; } } diff --git a/src/widgets/required/index.ts b/src/widgets/required/index.ts index ea126bd05..6302cb59d 100644 --- a/src/widgets/required/index.ts +++ b/src/widgets/required/index.ts @@ -1 +1 @@ -export { Required } from './ui/required'; +export { Required } from './ui/required/required'; diff --git a/src/widgets/required/required.types.ts b/src/widgets/required/types.ts similarity index 86% rename from src/widgets/required/required.types.ts rename to src/widgets/required/types.ts index 8513b4fdf..7a35920e1 100644 --- a/src/widgets/required/required.types.ts +++ b/src/widgets/required/types.ts @@ -7,7 +7,7 @@ type ItemWithLink = { export type LinkList = ItemWithLink[]; -export type Description = (string | LinkList)[]; +type Description = (string | LinkList)[]; export type CourseModule = { title: string; diff --git a/src/widgets/required/ui/course-module/course-module.module.scss b/src/widgets/required/ui/course-module/course-module.module.scss new file mode 100644 index 000000000..718b18f39 --- /dev/null +++ b/src/widgets/required/ui/course-module/course-module.module.scss @@ -0,0 +1,11 @@ +.course-module-element { + margin-top: 20px; + + &:first-child { + margin-top: 0; + } + + .course-module-title { + margin-bottom: 8px; + } +} diff --git a/src/widgets/required/ui/course-module/course-module.tsx b/src/widgets/required/ui/course-module/course-module.tsx new file mode 100644 index 000000000..2dd6884d7 --- /dev/null +++ b/src/widgets/required/ui/course-module/course-module.tsx @@ -0,0 +1,26 @@ +import classNames from 'classnames/bind'; + +import { CourseModule } from '../../types'; +import { List } from '@/shared/ui/list'; +import { Subtitle } from '@/shared/ui/subtitle'; + +import styles from './course-module.module.scss'; + +export const cx = classNames.bind(styles); + +type CourseModuleElementProps = { + courseModule: CourseModule; +}; + +export function CourseModuleElement({ courseModule }: CourseModuleElementProps) { + const { title, description } = courseModule; + + return ( +
+ + {title} + + +
+ ); +} diff --git a/src/widgets/required/ui/required.scss b/src/widgets/required/ui/required.scss deleted file mode 100644 index dda061f83..000000000 --- a/src/widgets/required/ui/required.scss +++ /dev/null @@ -1,57 +0,0 @@ -.required { - & .content { - &.info-wrapper { - display: flex; - flex-direction: column; - - .column-2 { - flex-direction: row; - gap: 8rem; - align-items: flex-start; - justify-content: flex-start; - - .will-learn { - & article { - margin-top: 20px; - } - - & article:first-child { - margin-top: 0; - } - } - - & > * { - flex: 1; - } - - @include media-laptop { - gap: 5rem; - } - - @include media-laptop-medium { - flex-direction: column; - gap: 32px; - align-items: flex-start; - - & > * { - max-width: 80%; - } - - & div > .stage-actions { - font-size: 18px; - } - } - - @include media-tablet { - & > * { - max-width: 100%; - } - } - } - } - - & > .title { - margin-bottom: 8px; - } - } -} diff --git a/src/widgets/required/ui/required.tsx b/src/widgets/required/ui/required.tsx deleted file mode 100644 index c0c33db63..000000000 --- a/src/widgets/required/ui/required.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { List } from '@/shared/ui/list'; -import { Subtitle } from '@/shared/ui/subtitle'; -import { WidgetTitle } from '@/shared/ui/widget-title'; -import { CoursesWithRequirementsNames, courseDataMap } from 'data'; - -import './required.scss'; - -type RequiredProps = { - courseName: CoursesWithRequirementsNames; - marked1?: boolean; - marked2?: boolean; -}; - -export const Required = ({ courseName }: RequiredProps) => { - const requiredKnowledge = courseDataMap[courseName]; - const { knowBefore, willLearn, title } = requiredKnowledge; - - const isKnowBeforeExist = - knowBefore && 'description' in knowBefore && knowBefore.description.length !== 0; - - const isWillLearnExist = - willLearn - && willLearn.length !== 0 - && willLearn[0].description.length !== 0 - && (willLearn.length === 2 ? willLearn[1].description.length !== 0 : true); - - return ( -
-
- - {title} - - -
- {isKnowBeforeExist && ( -
- {knowBefore.title} - -
- )} -
- {isWillLearnExist - ? willLearn.map((willLearn, index) => { - return ( -
- {willLearn.title} - -
- ); - }) - : ''} -
-
-
-
- ); -}; diff --git a/src/widgets/required/ui/required/required.module.scss b/src/widgets/required/ui/required/required.module.scss new file mode 100644 index 000000000..0b72380ce --- /dev/null +++ b/src/widgets/required/ui/required/required.module.scss @@ -0,0 +1,26 @@ +.info-wrapper { + display: flex; + flex-direction: column; + + .course-module-columns-layout { + display: flex; + gap: 8rem; + + .course-module-elements-column { + flex: 1; + + @include media-tablet { + max-width: 100%; + } + } + + @include media-laptop { + gap: 5rem; + } + + @include media-laptop-medium { + flex-direction: column; + gap: 32px; + } + } +} diff --git a/src/widgets/required/required.test.tsx b/src/widgets/required/ui/required/required.test.tsx similarity index 97% rename from src/widgets/required/required.test.tsx rename to src/widgets/required/ui/required/required.test.tsx index 1cb389eba..710fd113f 100644 --- a/src/widgets/required/required.test.tsx +++ b/src/widgets/required/ui/required/required.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import { Required } from './ui/required'; +import { Required } from './required'; describe('Required', () => { it('renders the title and subtitle correctly', () => { @@ -57,7 +57,6 @@ describe('Required', () => { 'No AWS Cloud experience is necessary.', 'We will use the AWS Free Tier', 'No IT prerequisites required', - // willLearn part 'Networking Fundamentals', 'Cloud Technical Fundamentals', 'AWS Cloud Essentials', diff --git a/src/widgets/required/ui/required/required.tsx b/src/widgets/required/ui/required/required.tsx new file mode 100644 index 000000000..f534b53f7 --- /dev/null +++ b/src/widgets/required/ui/required/required.tsx @@ -0,0 +1,50 @@ +import classNames from 'classnames/bind'; + +import { CourseModuleElement } from '../course-module/course-module'; +import { WidgetTitle } from '@/shared/ui/widget-title'; +import { CoursesWithRequirementsNames, courseDataMap } from 'data'; + +import styles from './required.module.scss'; + +export const cx = classNames.bind(styles); + +type RequiredProps = { + courseName: CoursesWithRequirementsNames; +}; + +export const Required = ({ courseName }: RequiredProps) => { + const requiredKnowledge = courseDataMap[courseName]; + const { knowBefore, willLearn, title } = requiredKnowledge; + + const isKnowBeforeExist = knowBefore && Boolean(knowBefore.description.length); + const isWillLearnExist = willLearn && Boolean(willLearn.length); + + return ( +
+
+ + {title} + + +
+ {isKnowBeforeExist && ( +
+ +
+ )} + {isWillLearnExist && ( +
+ {willLearn.map((willLearn, index) => ( + + ))} +
+ )} +
+
+
+ ); +};