course page component changes

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",

src/components/atoms/BreadCrumbs/BreadCrumbs.tsx

@@ -21,7 +21,7 @@ const HyphenIcon = () => (
   >
     <path
       d="M0.872039 6.29471C0.70932 6.13199 0.70932 5.86817 0.872039 5.70545L3.07741 3.50008L0.872039 1.29471C0.70932 1.13199 0.70932 0.868172 0.872039 0.705454C1.03476 0.542735 1.29858 0.542735 1.46129 0.705454L3.96129 3.20545C4.12401 3.36817 4.12401 3.63199 3.96129 3.79471L1.46129 6.29471C1.29858 6.45743 1.03476 6.45743 0.872039 6.29471Z"
-      fill="#BDBDBD"
+      fill="#AFAFAF"
     />
   </svg>
 );
@@ -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: 5px;
     li {
       &,
       & > a,
       & > button {
-        font-size: 12px;
+        font-size: 13px;
       }
     }
   }

src/components/atoms/IconText/IconText.tsx

@@ -13,7 +13,7 @@ interface Styles {
 export interface IconTextProps
   extends React.HTMLAttributes<HTMLParagraphElement>,
     ExtendableStyledComponent {
-  icon: ReactNode;
+  icon?: ReactNode;
   text: string | JSX.Element;
   styles?: Styles;
   noMargin?: boolean;
@@ -43,24 +43,30 @@ const StyledText = styled("p")<IconTextProps>`
         getStylesBasedOnTheme(theme.mode, theme.white, theme.black)};
     }
   }
+  .text {
+    width: 100%;
+  }
 `;
 
 export const IconText: React.FC<IconTextProps> = (props) => {
   const { text, icon, styles, className = "" } = props;
 
   return (
     <StyledText className={`wellms-component ${className}`} {...props}>
-      <span
-        className="icon"
-        style={styles?.icon}
-        role="button"
-        aria-label={typeof text === "string" ? text : text?.props?.children}
-      >
-        {icon}
-      </span>
-      <span className="text" style={styles?.text}>
+      {icon && (
+        <span
+          className="icon"
+          style={styles?.icon}
+          role="button"
+          aria-label={typeof text === "string" ? text : text?.props?.children}
+        >
+          {icon}
+        </span>
+      )}
+
+      <div className="text" style={styles?.text}>
         {text}
-      </span>
+      </div>
     </StyledText>
   );
 };

src/components/atoms/PricingCard/PricingCard.tsx

@@ -15,7 +15,7 @@ export interface PricingCardProps extends StyledPricingCardProps {
 }
 
 const StyledPricingCard = styled("div")<StyledPricingCardProps>`
-  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")<StyledPricingCardProps>`
       theme.dm__cardBackgroundColor,
       theme.cardBackgroundColor
     )};
+  text-align: center;
   .pricing-card-price {
     margin-top: 10px;
     margin-bottom: 16px;

src/components/atoms/Rating/Rating.tsx

@@ -15,8 +15,8 @@ const RatingIconEmpty: React.FC<IconProps> = (props) => {
   const { onClick, onMouseEnter, onMouseLeave, rate } = props;
   return (
     <svg
-      width="1em"
-      height="1em"
+      width="10px"
+      height="10px"
       viewBox="0 0 15 15"
       xmlns="http://www.w3.org/2000/svg"
       onClick={() => (onClick ? onClick(rate) : undefined)}
@@ -35,8 +35,8 @@ const RatingIconFull: React.FC<IconProps> = (props) => {
   const { onClick, onMouseEnter, onMouseLeave, rate } = props;
   return (
     <svg
-      width="1em"
-      height="1em"
+      width="10px"
+      height="10px"
       viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -90,9 +90,8 @@ const StyledRating = styled.span<RatingProps>`
         getStylesBasedOnTheme(theme.mode, theme.white, theme.gray1)};
     }
     .label {
-      min-width: 48px;
-      margin-left: 5px;
-      font-size: 16px;
+      margin: 0px 5px;
+      font-size: 13px;
       font-weight: 700;
     }
   }

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<HTMLParagraphElement>,
     ExtendableStyledComponent {
   noMargin?: boolean;
   bold?: boolean;
-  size?: "18" | "16" | "14" | "13" | "12" | "11";
+  size?: TextSize;
   type?: "primary" | "secondary" | "warning" | "danger";
   className?: string;
 }

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")<StyledCourseCardProps>`
@@ -141,8 +141,21 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
     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<CourseCardProps> = (props) => {
           )
         )}
         <div className="course-title">{title}</div>
-        <div className="course-price">
-          <Text size="16" bold>
-            {price}
-          </Text>
-        </div>
+        <div className="course-price">{price}</div>
       </div>
     </StyledCourseCard>
   );

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<TutorProps> = (props) => {
             {fullName}
           </Title>
           <div className="ranking-row">
-            <Rating {...rating} label={rating.ratingValue} />
+            {rating && <Rating {...rating} label={rating?.ratingValue} />}
             {coursesInfo && <Text className="course-info">{coursesInfo}</Text>}
           </div>
           {!mobile && <Text className="description">{description}</Text>}

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<Props> = ({
 
   return (
     <StyledSection $mobile={mobile} className={`wellms-component ${className}`}>
-      {!mobile && (
-        <header>
-          <IconTitle
-            level={5}
-            as="h1"
-            icon={<Icon name="program" />}
-            title={t<string>("Course.Agenda")}
-          />
-        </header>
-      )}
+      <Text>{t("Course.Agenda")}</Text>
       <ul className="lessons__list">
         <RecursiveLessons
           lessons={lessons}

src/components/organisms/CourseProgram/_components/styles.ts

@@ -7,7 +7,10 @@ export const StyledSection = styled("section")<{ $mobile: boolean }>`
   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;

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";