fix: breadcrumb background colour

chaynHQ · May 9, 2024 · a76aadc · a76aadc
1 parent 4d7ff0c
commit a76aadc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/components/course/CourseHeader.tsx b/components/course/CourseHeader.tsx
@@ -2,6 +2,7 @@ import { Button } from '@mui/material';
 import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import { PROGRESS_STATUS } from '../../constants/enums';
+import theme from '../../styles/theme';
 import Link from '../common/Link';
 import Header from '../layout/Header';
 
@@ -27,7 +28,13 @@ const CourseHeader = (props: CourseHeaderProps) => {
 
  return (
  <Header {...headerProps}>
- <Button variant="outlined" href="/courses" size="small" component={Link}>
+ <Button
+ variant="outlined"
+ sx={{ background: theme.palette.background.default }}
+ href="/courses"
+ size="small"
+ component={Link}
+ >
  {t('backToCourses')}
  </Button>
  </Header>

diff --git a/components/storyblok/StoryblokSessionIbaPage.tsx b/components/storyblok/StoryblokSessionIbaPage.tsx
@@ -22,6 +22,7 @@ import {
 import { useTypedSelector } from '../../hooks/store';
 import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
 import { columnStyle } from '../../styles/common';
+import theme from '../../styles/theme';
 import hasAccessToPage from '../../utils/hasAccessToPage';
 import logEvent, { getEventUserData } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
@@ -257,13 +258,25 @@ const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
  imageAlt={headerProps.imageAlt}
  progressStatus={sessionProgress}
  >
- <Button variant="outlined" href="/courses" size="small" component={Link}>
+ <Button
+ variant="outlined"
+ href="/courses"
+ sx={{ background: theme.palette.background.default }}
+ size="small"
+ component={Link}
+ >
  Courses
  </Button>
 
  <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
 
- <Button variant="outlined" href={`/${course.full_slug}`} size="small" component={Link}>
+ <Button
+ variant="outlined"
+ sx={{ background: theme.palette.background.default }}
+ href={`/${course.full_slug}`}
+ size="small"
+ component={Link}
+ >
  {course.name}
  </Button>
  <Typography sx={sessionSubtitleStyle} variant="body2">