From 8821690fd44ea68a871c5c8e38e406b927c20bad Mon Sep 17 00:00:00 2001 From: Przemek Date: Thu, 22 Feb 2024 16:17:10 +0100 Subject: [PATCH 1/4] course page component changes --- .../atoms/BreadCrumbs/BreadCrumbs.tsx | 9 +++--- src/components/atoms/IconText/IconText.tsx | 28 +++++++++++-------- .../atoms/PricingCard/PricingCard.tsx | 3 +- src/components/atoms/Typography/Text.tsx | 5 +++- src/components/molecules/Tutor/Tutor.tsx | 8 +++--- .../organisms/CourseProgram/CourseProgram.tsx | 14 ++-------- .../CourseProgram/_components/styles.ts | 8 ++++-- 7 files changed, 39 insertions(+), 36 deletions(-) diff --git a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx index 580b07f1..fe97d2d0 100644 --- a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx +++ b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx @@ -21,7 +21,7 @@ const HyphenIcon = () => ( > ); @@ -32,8 +32,9 @@ const StyledNav = styled("nav")` font-family: ${(props) => getFontFromTheme(props.theme).fontFamily}; color: ${({ theme }) => getStylesBasedOnTheme(theme.mode, theme.gray3, theme.gray2)}; - font-size: 12px; + font-size: 13px; line-height: 1em; + font-weight: 400; i svg { fill: ${({ theme }) => theme.gray2}; @@ -49,12 +50,12 @@ const StyledNav = styled("nav")` justify-content: flex-start; align-items: center; align-content: center; - gap: 2px; + gap: 10px; li { &, & > a, & > button { - font-size: 12px; + font-size: 13px; } } } diff --git a/src/components/atoms/IconText/IconText.tsx b/src/components/atoms/IconText/IconText.tsx index ca1e6f36..a29c27f2 100644 --- a/src/components/atoms/IconText/IconText.tsx +++ b/src/components/atoms/IconText/IconText.tsx @@ -13,7 +13,7 @@ interface Styles { export interface IconTextProps extends React.HTMLAttributes, ExtendableStyledComponent { - icon: ReactNode; + icon?: ReactNode; text: string | JSX.Element; styles?: Styles; noMargin?: boolean; @@ -43,6 +43,9 @@ const StyledText = styled("p")` getStylesBasedOnTheme(theme.mode, theme.white, theme.black)}; } } + .text { + width: 100%; + } `; export const IconText: React.FC = (props) => { @@ -50,17 +53,20 @@ export const IconText: React.FC = (props) => { return ( - - {icon} - - + {icon && ( + + {icon} + + )} + +
{text} - +
); }; diff --git a/src/components/atoms/PricingCard/PricingCard.tsx b/src/components/atoms/PricingCard/PricingCard.tsx index 1ab523b6..ab61c11b 100644 --- a/src/components/atoms/PricingCard/PricingCard.tsx +++ b/src/components/atoms/PricingCard/PricingCard.tsx @@ -15,7 +15,7 @@ export interface PricingCardProps extends StyledPricingCardProps { } const StyledPricingCard = styled("div")` - padding: ${(props) => (props.mobile ? "10px 16px" : "40px")}; + padding: ${(props) => (props.mobile ? "10px 16px" : "20px 13px")}; box-shadow: ${(props) => props.mobile ? "0px -2px 15px 0px rgba(0, 0, 0, .1);" : "none"}; border-radius: ${({ theme }) => theme.cardRadius}px; @@ -25,6 +25,7 @@ const StyledPricingCard = styled("div")` theme.dm__cardBackgroundColor, theme.cardBackgroundColor )}; + text-align: center; .pricing-card-price { margin-top: 10px; margin-bottom: 16px; diff --git a/src/components/atoms/Typography/Text.tsx b/src/components/atoms/Typography/Text.tsx index 495eb060..39965e17 100644 --- a/src/components/atoms/Typography/Text.tsx +++ b/src/components/atoms/Typography/Text.tsx @@ -6,12 +6,15 @@ import { ExtendableStyledComponent } from "types/component"; import { getFontFromTheme } from "../../../theme/provider"; +const textSizes = ["24", "18", "16", "14", "13", "12", "11"] as const; +export type TextSize = typeof textSizes[number]; + export interface TextProps extends React.HTMLAttributes, ExtendableStyledComponent { noMargin?: boolean; bold?: boolean; - size?: "18" | "16" | "14" | "13" | "12" | "11"; + size?: TextSize; type?: "primary" | "secondary" | "warning" | "danger"; className?: string; } diff --git a/src/components/molecules/Tutor/Tutor.tsx b/src/components/molecules/Tutor/Tutor.tsx index edf6e7fd..f5e4a802 100644 --- a/src/components/molecules/Tutor/Tutor.tsx +++ b/src/components/molecules/Tutor/Tutor.tsx @@ -12,11 +12,11 @@ interface StyledTourProps { mobile?: boolean; } export interface TutorProps extends StyledTourProps, ExtendableStyledComponent { - title: ReactNode; + title?: ReactNode; fullName: ReactNode | string; avatar: AvatarProps; - rating: RatingProps; - description: ReactNode | string; + rating?: RatingProps; + description?: ReactNode | string; coursesInfo?: ReactNode | string; } @@ -94,7 +94,7 @@ export const Tutor: React.FC = (props) => { {fullName}
- + {rating && } {coursesInfo && {coursesInfo}}
{!mobile && {description}} diff --git a/src/components/organisms/CourseProgram/CourseProgram.tsx b/src/components/organisms/CourseProgram/CourseProgram.tsx index 7fb248dc..ef742186 100644 --- a/src/components/organisms/CourseProgram/CourseProgram.tsx +++ b/src/components/organisms/CourseProgram/CourseProgram.tsx @@ -2,9 +2,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; import styled, { withTheme } from "styled-components"; import type { API } from "@escolalms/sdk/lib"; - import type { ExtendableStyledComponent } from "types/component"; -import { IconTitle, Icon } from "../../../index"; +import { Text } from "../../../index"; import { RecursiveLessons } from "./_components/RecursiveLessons"; import { StyledSection } from "./_components/styles"; import type { SharedComponentProps } from "./_components/types"; @@ -23,16 +22,7 @@ export const CourseProgram: React.FC = ({ return ( - {!mobile && ( -
- } - title={t("Course.Agenda")} - /> -
- )} + {t("Course.Agenda")}
    ` width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - + > p { + margin-bottom: 0px; + font-weight: 700; + } & > header { display: flex; flex-direction: row; @@ -54,7 +57,6 @@ export const StyledSection = styled("section")<{ $mobile: boolean }>` padding: 10px; margin: 10px 0; overflow: hidden; - border-radius: ${(props) => props.theme.cardRadius}px; .duration { margin: 1px 0; @@ -95,7 +97,7 @@ export const StyledSection = styled("section")<{ $mobile: boolean }>` } .lesson__title { - font-size: 14px; + font-size: 16px; color: ${(props) => props.theme.gray1}; margin: 0; font-weight: bold; From 707fa541fd3f9e3e96cdcd6d3b9139e0bb96d685 Mon Sep 17 00:00:00 2001 From: Przemek Date: Thu, 22 Feb 2024 19:45:25 +0100 Subject: [PATCH 2/4] stars small size --- src/components/atoms/Rating/Rating.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/atoms/Rating/Rating.tsx b/src/components/atoms/Rating/Rating.tsx index 46768b0e..3c1cefda 100644 --- a/src/components/atoms/Rating/Rating.tsx +++ b/src/components/atoms/Rating/Rating.tsx @@ -15,8 +15,8 @@ const RatingIconEmpty: React.FC = (props) => { const { onClick, onMouseEnter, onMouseLeave, rate } = props; return ( (onClick ? onClick(rate) : undefined)} @@ -35,8 +35,8 @@ const RatingIconFull: React.FC = (props) => { const { onClick, onMouseEnter, onMouseLeave, rate } = props; return ( ` .label { min-width: 48px; margin-left: 5px; - font-size: 16px; + font-size: 13px; font-weight: 700; } } From f8774c3fede928b6775aed1bbdb35d66eadf4377 Mon Sep 17 00:00:00 2001 From: Przemek Date: Fri, 23 Feb 2024 00:26:15 +0100 Subject: [PATCH 3/4] course page changes --- src/components/atoms/BreadCrumbs/BreadCrumbs.tsx | 2 +- src/components/atoms/Rating/Rating.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx index fe97d2d0..59edc420 100644 --- a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx +++ b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx @@ -50,7 +50,7 @@ const StyledNav = styled("nav")` justify-content: flex-start; align-items: center; align-content: center; - gap: 10px; + gap: 5px; li { &, & > a, diff --git a/src/components/atoms/Rating/Rating.tsx b/src/components/atoms/Rating/Rating.tsx index 3c1cefda..98cad8ef 100644 --- a/src/components/atoms/Rating/Rating.tsx +++ b/src/components/atoms/Rating/Rating.tsx @@ -90,8 +90,7 @@ const StyledRating = styled.span` getStylesBasedOnTheme(theme.mode, theme.white, theme.gray1)}; } .label { - min-width: 48px; - margin-left: 5px; + margin: 0px 5px; font-size: 13px; font-weight: 700; } From c648d4aa3e7b0ea8022b852d9e5db7249a684bf8 Mon Sep 17 00:00:00 2001 From: Przemek Date: Fri, 23 Feb 2024 18:07:53 +0100 Subject: [PATCH 4/4] course page and small fixies in components --- package.json | 1 - .../molecules/NewCourseCard/NewCourseCard.tsx | 21 +++++-- src/components/skeletons/Banner/index.tsx | 33 ----------- .../skeletons/CourseCard/CourseCard.tsx | 59 ------------------- src/index.ts | 3 - 5 files changed, 15 insertions(+), 102 deletions(-) delete mode 100644 src/components/skeletons/Banner/index.tsx delete mode 100644 src/components/skeletons/CourseCard/CourseCard.tsx diff --git a/package.json b/package.json index 810cf320..c361ff4e 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,6 @@ "react-grid-system": "^8.1.9", "react-i18next": "^12.2.0", "react-icons": "^4.8.0", - "react-loading-skeleton": "^3.4.0", "react-markdown": "^8.0.7", "react-pdf": "^5.7.2", "react-photoswipe-gallery": "^2.2.7", diff --git a/src/components/molecules/NewCourseCard/NewCourseCard.tsx b/src/components/molecules/NewCourseCard/NewCourseCard.tsx index 10662e54..f682b976 100644 --- a/src/components/molecules/NewCourseCard/NewCourseCard.tsx +++ b/src/components/molecules/NewCourseCard/NewCourseCard.tsx @@ -45,7 +45,7 @@ export interface CourseCardProps categories?: Categories | ReactChild; onImageClick?: () => void; progress?: ProgressBarProps; - price?: string; + price?: ReactNode; } const StyledCourseCard = styled("div")` @@ -141,8 +141,21 @@ const StyledCourseCard = styled("div")` transition: transform 0.3s ease-in-out; transform: ${(props) => props.mobile ? "translateY(0px)" : "translateY(+120px)"}; + color: ${({ theme }) => theme.primaryColor}; + font-weight: 700; + font-family: ${({ theme }) => theme.font}; p { color: ${({ theme }) => theme.primaryColor}; + font-weight: 700; + margin: 0px; + } + .pricing-card-discount { + text-decoration: line-through; + } + > div { + flex-direction: row; + align-items: center; + gap: 10px; } } &:hover { @@ -262,11 +275,7 @@ export const NewCourseCard: React.FC = (props) => { ) )}
    {title}
    -
    - - {price} - -
    +
    {price}
    ); diff --git a/src/components/skeletons/Banner/index.tsx b/src/components/skeletons/Banner/index.tsx deleted file mode 100644 index f947ba24..00000000 --- a/src/components/skeletons/Banner/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Skeleton from "react-loading-skeleton"; -import "react-loading-skeleton/dist/skeleton.css"; -import styled from "styled-components"; - -const SkeletonWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - .banner-skeleton__content { - width: 40%; - } - .banner-skeleton__image { - width: 50%; - } -`; - -export const BannerSkeleton = () => { - return ( - -
    - - -
    - -     - ); -}; diff --git a/src/components/skeletons/CourseCard/CourseCard.tsx b/src/components/skeletons/CourseCard/CourseCard.tsx deleted file mode 100644 index da03136c..00000000 --- a/src/components/skeletons/CourseCard/CourseCard.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import Skeleton from "react-loading-skeleton"; -import styled from "styled-components"; -import "react-loading-skeleton/dist/skeleton.css"; -import { useId } from "react"; -import { Col, ScreenClass } from "react-grid-system"; - -const CardSkeleton = styled.div` - max-width: 278px; - min-height: 414px; - - @media (max-width: 768px) { - max-width: 100%; - min-height: auto; - } -`; - -type ColProps = React.ComponentProps; - -type Props = { - count?: number; - colProps?: Partial>; -}; - -export const CourseCardSkeleton: React.FC = ({ - count = 1, - colProps, -}) => { - return ( - <> - {Array.from({ length: count }).map(() => - colProps ? ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - - - - - - - ) : ( - - - - - - ) - )} - - ); -}; diff --git a/src/index.ts b/src/index.ts index 968fa869..213a93cc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -71,6 +71,3 @@ export { default as BookmarkNotes } from "./components/organisms/BookmarkNotes"; export { default as ModalNote } from "./components/organisms/ModalNote"; //ADVANCED - -//SKELETONS -export { CourseCardSkeleton } from "./components/skeletons/CourseCard/CourseCard";