Skip to content

Commit a2f1735

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request #1371 from breatheco-de/development
Merge Development in Main
2 parents 677cc7a + 7608003 commit a2f1735

File tree

5 files changed

+118
-68
lines changed

5 files changed

+118
-68
lines changed

‎src/common/components/Feedback.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ function Feedback({ storyConfig }) {
8686

8787
return (isAuthenticated || isStorybookView) && (
8888
<Box width="100%" maxWidth="400px" zIndex={10} borderRadius="17px" padding="0 2px 2px 2px" background={featuredColor}>
89-
<Heading size="14px" textAlign="center" p="12px 8px" width="100%" background={featuredColor} borderTopLeftRadius="13px" borderTopRightRadius="13px">
89+
<Heading size="16px" textAlign="center" p="12px 8px" width="100%" background={featuredColor} borderTopLeftRadius="13px" borderTopRightRadius="13px">
9090
{translationChooseProgram?.feedback?.title || t('feedback.title')}
9191
</Heading>
9292
<Flex flexDirection="column" background={backgroundColor} padding="0 8px" borderRadius="0 0 17px 17px">

‎src/common/components/MktSideRecommendedCourses.jsx

+114-65
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ function Container({ course, courses, borderRadius, children, ...rest }) {
4646

4747
function MktSideRecommendedCourses({ title, endpoint, technologies, containerPadding, ...rest }) {
4848
const { t, lang } = useTranslation('common');
49+
const { hexColor } = useStyle();
4950
const [isLoading, setIsLoading] = useState(true);
5051
const BREATHECODE_HOST = modifyEnv({ queryString: 'host', env: process.env.BREATHECODE_HOST });
5152
const [courses, setCourses] = useState([]);
@@ -94,73 +95,121 @@ function MktSideRecommendedCourses({ title, endpoint, technologies, containerPad
9495
}, []);
9596

9697
return courses?.length > 0 && (
97-
<Box as="aside" minWidth={{ base: '100%', md: '214px' }} width="auto" margin="0 auto" {...rest}>
98-
{title && (
99-
<Heading size="18px" lineHeight="21px" m="10px 0 20px 0">
100-
{title || t('continue-learning-course')}
101-
</Heading>
102-
)}
103-
{!isLoading && courses?.length > 0 ? (
104-
<Box display="flex" flexDirection={{ base: 'row', md: 'column' }} overflow="auto" gridGap="14px">
105-
{courses.map((course) => {
106-
const courseLink = course?.course_translation?.landing_url;
107-
const link = courseLink || `${ORIGIN_HOST}${langConnector}/${course?.slug}`;
108-
// const tags = course?.technologies?.length > 0 && typeof course?.technologies === 'string'
109-
// ? course?.technologies?.split(',').map((tag) => toCapitalize(tag?.trim()))
110-
// : [];
111-
const tags = [];
112-
// const tags = ['Free course'];
113-
114-
return (
115-
<Container border="1px solid" borderColor={{ base: 'default', md: 'success' }} key={course?.slug} course={course} courses={courses} borderRadius={rest.borderRadius} padding={containerPadding}>
116-
<TagCapsule tags={tags} background="green.light" color="green.500" fontWeight={700} fontSize="13px" marginY="0" paddingX="0" variant="rounded" gap="10px" display={{ base: 'none', md: 'inherit' }} />
117-
<Box display="flex" flexDirection={{ base: 'column', md: 'row' }} gridGap="8px">
118-
<TagCapsule tags={tags} background="green.light" color="green.500" fontWeight={700} fontSize="13px" marginY="0" paddingX="0" variant="rounded" gap="10px" display={{ base: 'inherit', md: 'none' }} />
119-
120-
<Image display={{ base: 'none', md: 'inherit' }} src={course?.icon_url} width="46px" height="46px" borderRadius="8px" background="green.400" />
121-
<Heading size="18px">
122-
{course?.course_translation?.title}
123-
</Heading>
98+
<>
99+
<Box color="white" zIndex="10" borderRadius="11px 11px 0 0" background={hexColor.greenLight} padding="10px 20px" bottom="0" position="sticky" marginBottom="20px" display={{ base: 'block', md: 'none' }} textAlign="left">
100+
{courses.map((course) => {
101+
const courseLink = course?.course_translation?.landing_url;
102+
const link = courseLink || `${ORIGIN_HOST}${langConnector}/${course?.slug}`;
103+
104+
return (
105+
<>
106+
<Box display="flex" alignItems="center" gap="10px">
107+
<Image src={course?.icon_url} width="46px" height="46px" borderRadius="8px" background="green.400" />
108+
<Heading size="18px">
109+
{course?.course_translation?.title}
110+
</Heading>
111+
</Box>
112+
<Link
113+
variant="buttonDefault"
114+
onClick={() => {
115+
setStorageItem('redirected-from', link);
116+
reportDatalayer({
117+
dataLayer: {
118+
event: 'ad_interaction',
119+
course_slug: course.slug,
120+
course_title: course.title,
121+
ad_position: 'top-left',
122+
ad_type: 'course',
123+
},
124+
});
125+
}}
126+
href={`${link}?internal_cta_placement=mktsiderecommendedcourses&internal_cta_content=${course?.slug}&internal_cta_campaign=null`}
127+
alignItems="center"
128+
display="flex"
129+
justifyContent="center"
130+
colorScheme="success"
131+
color="success"
132+
background="white"
133+
gridGap="10px"
134+
width="100%"
135+
>
136+
<Box as="span" display="flex">
137+
{t('learn-more')}
124138
</Box>
125-
<Text display={{ base: 'none', md: 'inherit' }} fontSize="12px" lineHeight="14px" padding="0 20px">
126-
{course?.course_translation?.short_description || course?.course_translation?.description}
127-
</Text>
128-
<Link
129-
variant={{ base: '', md: 'buttonDefault' }}
130-
onClick={() => {
131-
setStorageItem('redirected-from', link);
132-
reportDatalayer({
133-
dataLayer: {
134-
event: 'ad_interaction',
135-
course_slug: course.slug,
136-
course_title: course.title,
137-
ad_position: 'top-left',
138-
ad_type: 'course',
139-
},
140-
});
141-
}}
142-
href={`${link}?internal_cta_placement=mktsiderecommendedcourses&internal_cta_content=${course?.slug}&internal_cta_campaign=null`}
143-
alignItems="center"
144-
display="flex"
145-
colorScheme={{ base: 'default', md: 'success' }}
146-
width="auto"
147-
color={{ base: 'green.light', md: 'white' }}
148-
gridGap="10px"
149-
margin="0 20px"
150-
>
151-
<Box as="span" display={{ base: 'none', md: 'flex' }}>
152-
{t('learn-more')}
139+
<Icon icon="longArrowRight" width="24px" height="10px" color="currentColor" />
140+
</Link>
141+
</>
142+
);
143+
})}
144+
</Box>
145+
<Box display={{ base: 'none', md: 'block' }} as="aside" minWidth={{ base: '100%', md: '214px' }} width="auto" margin="0 auto" {...rest}>
146+
{title && (
147+
<Heading size="18px" lineHeight="21px" m="10px 0 20px 0">
148+
{title || t('continue-learning-course')}
149+
</Heading>
150+
)}
151+
{!isLoading && courses?.length > 0 ? (
152+
<Box display="flex" flexDirection={{ base: 'row', md: 'column' }} overflow="auto" gridGap="14px">
153+
{courses.map((course) => {
154+
const courseLink = course?.course_translation?.landing_url;
155+
const link = courseLink || `${ORIGIN_HOST}${langConnector}/${course?.slug}`;
156+
// const tags = course?.technologies?.length > 0 && typeof course?.technologies === 'string'
157+
// ? course?.technologies?.split(',').map((tag) => toCapitalize(tag?.trim()))
158+
// : [];
159+
const tags = [];
160+
// const tags = ['Free course'];
161+
162+
return (
163+
<Container border="1px solid" borderColor={{ base: 'default', md: 'success' }} key={course?.slug} course={course} courses={courses} borderRadius={rest.borderRadius} padding={containerPadding}>
164+
<TagCapsule tags={tags} background="green.light" color="green.500" fontWeight={700} fontSize="13px" marginY="0" paddingX="0" variant="rounded" gap="10px" display={{ base: 'none', md: 'inherit' }} />
165+
<Box display="flex" flexDirection={{ base: 'column', md: 'row' }} gridGap="8px">
166+
<TagCapsule tags={tags} background="green.light" color="green.500" fontWeight={700} fontSize="13px" marginY="0" paddingX="0" variant="rounded" gap="10px" display={{ base: 'inherit', md: 'none' }} />
167+
168+
<Image display={{ base: 'none', md: 'inherit' }} src={course?.icon_url} width="46px" height="46px" borderRadius="8px" background="green.400" />
169+
<Heading size="18px">
170+
{course?.course_translation?.title}
171+
</Heading>
153172
</Box>
154-
<Icon icon="longArrowRight" width="24px" height="10px" color="currentColor" />
155-
</Link>
156-
</Container>
157-
);
158-
})}
159-
</Box>
160-
) : (
161-
<CardSkeleton withoutContainer quantity={1} height={rest.skeletonHeight} borderRadius={rest.skeletonBorderRadius} />
162-
)}
163-
</Box>
173+
<Text display={{ base: 'none', md: 'inherit' }} fontSize="12px" lineHeight="14px" padding="0 20px">
174+
{course?.course_translation?.short_description || course?.course_translation?.description}
175+
</Text>
176+
<Link
177+
variant={{ base: '', md: 'buttonDefault' }}
178+
onClick={() => {
179+
setStorageItem('redirected-from', link);
180+
reportDatalayer({
181+
dataLayer: {
182+
event: 'ad_interaction',
183+
course_slug: course.slug,
184+
course_title: course.title,
185+
ad_position: 'top-left',
186+
ad_type: 'course',
187+
},
188+
});
189+
}}
190+
href={`${link}?internal_cta_placement=mktsiderecommendedcourses&internal_cta_content=${course?.slug}&internal_cta_campaign=null`}
191+
alignItems="center"
192+
display="flex"
193+
colorScheme={{ base: 'default', md: 'success' }}
194+
width="auto"
195+
color={{ base: 'green.light', md: 'white' }}
196+
gridGap="10px"
197+
margin="0 20px"
198+
>
199+
<Box as="span" display={{ base: 'none', md: 'flex' }}>
200+
{t('learn-more')}
201+
</Box>
202+
<Icon icon="longArrowRight" width="24px" height="10px" color="currentColor" />
203+
</Link>
204+
</Container>
205+
);
206+
})}
207+
</Box>
208+
) : (
209+
<CardSkeleton withoutContainer quantity={1} height={rest.skeletonHeight} borderRadius={rest.skeletonBorderRadius} />
210+
)}
211+
</Box>
212+
</>
164213
);
165214
}
166215

‎src/pages/how-to/[slug]/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ export default function HowToSlug({ data, markdown }) {
305305
/>
306306
</Box>
307307
</Box>
308-
<Box position={{ base: 'fixed', md: 'inherit' }} display={{ base: 'initial', md: 'none' }} width="100%" bottom={0} left={0} height="auto">
308+
<Box display={{ base: 'initial', md: 'none' }} width="100%" height="auto">
309309
<MktSideRecommendedCourses technologies={data.technologies} title={false} padding="0" containerPadding="16px 14px" borderRadius="0px" skeletonHeight="80px" skeletonBorderRadius="0" />
310310
</Box>
311311
<RelatedContent

‎src/pages/lesson/[slug].jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ function LessonSlug({ lesson, markdown, ipynbHtml }) {
320320
)}
321321
</>
322322
)}
323-
<Box position={{ base: 'fixed', md: 'inherit' }} display={{ base: 'initial', md: 'none' }} width="100%" bottom={0} left={0} height="auto">
323+
<Box display={{ base: 'initial', md: 'none' }}>
324324
<MktSideRecommendedCourses technologies={lesson?.technologies} title={false} padding="0" containerPadding="16px 14px" borderRadius="0px" skeletonHeight="80px" skeletonBorderRadius="0" />
325325
</Box>
326326

‎styles/globals.css

+1
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,7 @@ featured {
464464
-webkit-text-stroke-color: rgb(169 169 169);
465465
}
466466

467+
.intro-video,
467468
.intro-video iframe {
468469
border-bottom-left-radius: 17px;
469470
border-bottom-right-radius: 17px;

0 commit comments

Comments
 (0)