diff --git a/src/components/CircullarProgressWithLabel.tsx b/src/components/CircullarProgressWithLabel.tsx
index 10e3ebc..e3a6c37 100644
--- a/src/components/CircullarProgressWithLabel.tsx
+++ b/src/components/CircullarProgressWithLabel.tsx
@@ -7,6 +7,7 @@ import Text from '../components/core/Text'
import styled from 'styled-components'
type Props = {
+ className?: string
value: number
// width and height (i.e: 50px)
size?: string
@@ -26,6 +27,7 @@ const CircullarProgressWithLabel = ({
sx={{position: 'relative', display: 'inline-flex'}}
size={size || '50px'}
accentColor={accentColor}
+ className={props.className}
>
type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
@@ -29,6 +30,7 @@ const Heading = ({
withAccentUnderline,
noWrap,
maxWidth,
+ uppercase,
...props
}: Props) => {
const headingProps: Props = {
@@ -41,6 +43,7 @@ const Heading = ({
withAccentUnderline,
noWrap,
maxWidth,
+ uppercase,
}
if (variant === 'h1') {
@@ -134,6 +137,7 @@ const headingStyle = css<{
withAccentUnderline?: boolean
noWrap?: boolean
maxWidth?: string
+ uppercase?: boolean
}>`
display: ${(props) => (props.inline ? 'inline' : 'block')};
@@ -145,6 +149,7 @@ const headingStyle = css<{
props.withAccentUnderline ? `4px solid var(--color-accent)` : 'unset'};
white-space: ${(props) => (props.noWrap ? 'nowrap' : 'unset')};
max-width: ${(props) => props.maxWidth && props.maxWidth};
+ text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'unset')};
@media ${device.XL} {
font-size: ${(props) =>
diff --git a/src/components/domain/course/CourseCard.tsx b/src/components/domain/course/CourseCard.tsx
index 48adfaa..bdf1836 100644
--- a/src/components/domain/course/CourseCard.tsx
+++ b/src/components/domain/course/CourseCard.tsx
@@ -57,12 +57,31 @@ const CourseCard = ({
justifyContent="space-between"
className={className}
>
+
+
+
+ ZADARMO
+
+
+
+
+
-
+
{course.name}
- {course.shortDescription}
+
+ {course.shortDescription}
+
@@ -73,7 +92,6 @@ const CourseCard = ({
priority
/>
-
@@ -86,93 +104,121 @@ const CourseCard = ({
>
- {course.difficulty?.name}
+ {course.difficulty?.name}
- {courseDuration}
+ {courseDuration}
+
+
-
+
{lecturesCount} {numOfLecturesText(lecturesCount)}
{quizzesCount > 0 && (
-
+
{quizzesCount} {numOfQuizzesText(quizzesCount)}
)}
-
-
-
- {course.author?.name}
-
- {progressValuePercent && (
-
- )}
- {!progressValuePercent && (
-
- zadarmo
-
- )}
-
+
+
+
+
+ {course.author?.name}
+
+ {progressValuePercent && (
+
+ )}
)
}
+const PriceTag = styled.div`
+ padding: 4px 12px;
+ border-top-right-radius: 16px;
+ border-bottom-right-radius: 16px;
+ background-color: var(--color-accent);
+ margin-left: -28px;
+
+ @media ${device.S} {
+ margin-left: -22px;
+ }
+`
+const RatingDesktopWrapper = styled(Rating)`
+ display: inline-flex;
+
+ @media ${device.S} {
+ display: none;
+ }
+`
+
+const RatingMobileWrapper = styled(Rating)`
+ display: none;
+
+ @media ${device.S} {
+ display: inline-flex;
+ }
+`
+
const WrapperFlex = styled(Flex)`
width: 300px;
- aspect-ratio: 1 / 1.5;
+ aspect-ratio: 1 / 1.55;
- padding: 1em 0.5em;
- border: var(--color-accent) 2px solid;
- border-radius: 22px;
+ padding: 32px 24px;
+ border-right: var(--color-accent) 4px solid;
+ border-left: var(--color-accent) 4px solid;
+ box-shadow: 0px 2px 2px var(--color-shadow), 0px -2px 2px var(--color-shadow);
+ border-radius: 16px;
transition: 250ms ease-in-out;
&:hover {
- transform: scale(1.1);
+ transform: scale(1.05);
transition: 250ms ease-in-out;
- box-shadow: 1px 8px 20px var(--color-shadow);
+ box-shadow: 0px 4px 10px var(--color-shadow),
+ 0px -4px 10px var(--color-shadow);
}
@media ${device.S} {
width: 250px;
- aspect-ratio: 1 / 1.6;
-
- &:hover {
- transform: unset;
- transition: unset;
- box-shadow: unset;
- }
+ padding: 26px 18px;
+ aspect-ratio: 1 / 1.65;
}
`
+const ProgressWrapper = styled(CircullarProgressWithLabel)`
+ margin-top: 4px;
+`
+
const CourseIconImageWrapper = styled.div`
position: relative;
- width: 100px;
+ width: 80px;
aspect-ratio: 1;
@media ${device.S} {
- width: 75px;
+ width: 60px;
}
`
@@ -182,15 +228,21 @@ const CourseInfoItemsWrapper = styled(Flex)`
}
`
-const CourseInfoItem = styled.div`
+const CourseInfoItem = styled.div<{authorItem?: boolean}>`
display: flex;
- gap: 12px;
+ gap: 8px;
align-items: center;
+ * {
+ color: ${(props) =>
+ props.authorItem
+ ? 'var(--color-secondary)'
+ : 'var(--color-course-info-icon)'};
+ }
+
svg {
- width: 25px;
- height: 25px;
- color: var(--color-secondary);
+ width: 28px;
+ height: 28px;
}
`
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
index 07c1072..bbb23c5 100644
--- a/src/hooks/useTheme.tsx
+++ b/src/hooks/useTheme.tsx
@@ -41,6 +41,7 @@ const updateCSSThemeVariables = (theme: ThemeType) => {
theme.footerBackgroundColor,
)
root.style.setProperty('--color-shadow', theme.shadowColor)
+ root.style.setProperty('--color-course-info-icon', theme.courseInfoIconColor)
}
const determineTheme = (
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 809e127..5b1b112 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -96,6 +96,7 @@ export default class MyDocument extends Document {
root.style.setProperty('--color-success', '#4CBF6B')
root.style.setProperty('--color-footer-background', '#212121')
root.style.setProperty('--color-shadow', 'rgba(0,0,0,0.2)')
+ root.style.setProperty('--color-course-info-icon', '#58595B')
} else {
root.style.setProperty('--initial-theme-type', theme)
root.style.setProperty('--color-primary', '#212121')
@@ -106,6 +107,7 @@ export default class MyDocument extends Document {
root.style.setProperty('--color-success', '#4CBF6B')
root.style.setProperty('--color-footer-background', '#efefef')
root.style.setProperty('--color-shadow', 'rgba(255,255,255,0.2)')
+ root.style.setProperty('--color-course-info-icon', '#BCBEC0')
}
})()
`
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 081d00a..ff6772d 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -12,6 +12,7 @@ export type ThemeType = {
successColor: string // i.e correct quiz question
footerBackgroundColor: string
shadowColor: string
+ courseInfoIconColor: string
}
export const lightTheme: ThemeType = {
@@ -24,6 +25,7 @@ export const lightTheme: ThemeType = {
successColor: '#4CBF6B',
footerBackgroundColor: '#212121',
shadowColor: 'rgba(0,0,0,0.2)',
+ courseInfoIconColor: '#58595B',
}
export const darkTheme: ThemeType = {
@@ -36,4 +38,5 @@ export const darkTheme: ThemeType = {
successColor: '#4CBF6B',
footerBackgroundColor: '#efefef',
shadowColor: 'rgba(255,255,255,0.2)',
+ courseInfoIconColor: '#BCBEC0',
}