From 1da2e85738d8808808975658d7b0ecdc0dfd771d Mon Sep 17 00:00:00 2001
From: Przemek <przemek.wiktorski@escola.pl>
Date: Sun, 18 Feb 2024 20:34:31 +0100
Subject: [PATCH] homepage

---
 .../molecules/CategoryCard/CategoryCard.tsx   | 49 +++++++------
 .../molecules/DropdownMenu/DropdownMenu.tsx   |  5 +-
 .../molecules/Navigation/Navigation.tsx       | 70 +++++++++++--------
 .../molecules/NewCourseCard/index.tsx         |  8 +--
 .../organisms/LoginForm/LoginForm.tsx         |  3 +-
 src/components/skeletons/Banner/index.tsx     | 33 +++++++++
 src/components/skeletons/CourseCard/index.tsx | 14 ++--
 src/index.ts                                  |  1 +
 8 files changed, 121 insertions(+), 62 deletions(-)
 create mode 100644 src/components/skeletons/Banner/index.tsx

diff --git a/src/components/molecules/CategoryCard/CategoryCard.tsx b/src/components/molecules/CategoryCard/CategoryCard.tsx
index 255f2c17..22006280 100644
--- a/src/components/molecules/CategoryCard/CategoryCard.tsx
+++ b/src/components/molecules/CategoryCard/CategoryCard.tsx
@@ -11,7 +11,7 @@ interface StyledCategoryCardProps {
   variant: "solid" | "gradient";
 }
 
-const StyledCategoryCard = styled("div")<StyledCategoryCardProps>`
+const StyledCategoryCard = styled.div<StyledCategoryCardProps>`
   text-align: center;
   padding: ${({ variant, mobile }) =>
     variant === "solid"
@@ -28,17 +28,23 @@ const StyledCategoryCard = styled("div")<StyledCategoryCardProps>`
           theme.dm__cardBackgroundColor,
           theme.cardBackgroundColor
         )};
+  min-height: 229px;
 
-  .category-card-title {
-    margin-top: 34px;
-    margin-bottom: 26px;
-    font-size: 20px;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .category-card-icon {
+    margin-top: 15px;
     svg path {
       fill: ${({ theme }) =>
-        getStylesBasedOnTheme(theme.mode, theme.white, theme.gray1)};
+        getStylesBasedOnTheme(theme.mode, theme.white, theme.gray2)};
+    }
+  }
+  .category-content {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 22px;
     }
   }
   button {
@@ -63,6 +69,7 @@ const StyledCategoryCard = styled("div")<StyledCategoryCardProps>`
     }
   }
 `;
+
 export interface CategoryCardProps
   extends StyledCategoryCardProps,
     ExtendableStyledComponent {
@@ -78,7 +85,6 @@ export const CategoryCard: React.FC<CategoryCardProps> = (props) => {
     icon,
     title,
     subtitle,
-
     onButtonClick,
     variant,
     mobile = false,
@@ -91,19 +97,20 @@ export const CategoryCard: React.FC<CategoryCardProps> = (props) => {
       variant={variant}
     >
       <div className={"category-card-icon"}>{icon}</div>
-      <Title as={"h4"} level={3} className={"category-card-title"}>
-        {title}
-      </Title>
-
-      <Button
-        mode={"secondary"}
-        onClick={onButtonClick}
-        style={{
-          marginTop: "6px",
-        }}
-      >
-        {subtitle}
-      </Button>
+      <div className="category-content">
+        <Title as={"h4"} level={2} className={"category-card-title"}>
+          {title}
+        </Title>
+        <Button
+          mode={"secondary"}
+          onClick={onButtonClick}
+          style={{
+            marginTop: "6px",
+          }}
+        >
+          {subtitle}
+        </Button>
+      </div>
     </StyledCategoryCard>
   );
 };
diff --git a/src/components/molecules/DropdownMenu/DropdownMenu.tsx b/src/components/molecules/DropdownMenu/DropdownMenu.tsx
index 3185639a..67852be9 100644
--- a/src/components/molecules/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/molecules/DropdownMenu/DropdownMenu.tsx
@@ -87,7 +87,7 @@ const DropdownMenu: FC<Props> = ({
   onClick,
   onChange,
 }) => {
-  const [currID, setCurrID] = useState(0);
+  // const [currID, setCurrID] = useState(0);
   const dropdownMenuRef = useRef<HTMLUListElement | null>(null);
   const [isOpen, setIsOpen] = useState(isInitiallyOpen);
   const closeMenu = () => setIsOpen(false);
@@ -95,13 +95,12 @@ const DropdownMenu: FC<Props> = ({
 
   const onListItemClick = useCallback(
     (ind: number) => {
-      setCurrID(ind);
+      // setCurrID(ind);
       onChange?.(menuItems[ind]);
       closeMenu();
     },
     [menuItems, onChange]
   );
-  console.log({ currID });
 
   return (
     <Wrapper onClick={onClick}>
diff --git a/src/components/molecules/Navigation/Navigation.tsx b/src/components/molecules/Navigation/Navigation.tsx
index 76e5dd4d..9eb609e0 100644
--- a/src/components/molecules/Navigation/Navigation.tsx
+++ b/src/components/molecules/Navigation/Navigation.tsx
@@ -6,7 +6,6 @@ import Drawer from "rc-drawer";
 import "rc-drawer/assets/index.css";
 import { Col, Row } from "react-grid-system";
 import { Text } from "../../../";
-import chroma from "chroma-js";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
 import { t } from "i18next";
 import { ExtendableStyledComponent } from "types/component";
@@ -98,6 +97,9 @@ export interface NavigationProps extends ExtendableStyledComponent {
   logo: LogoProps;
   menuItems: MenuItem[];
   search?: ReactNode;
+  notification?: ReactNode;
+  cart?: ReactNode;
+  profile?: ReactNode;
 }
 
 const GlobalStyle = createGlobalStyle`
@@ -113,12 +115,6 @@ const GlobalStyle = createGlobalStyle`
   
   .drawer-search {
     padding: 24px 16px;
-     border-bottom: ${({ theme }) =>
-       `1px solid ${getStylesBasedOnTheme(
-         theme.mode,
-         chroma(theme.white).alpha(0.15).css(),
-         chroma(theme.background).darken(0.3).css()
-       )}`};
   }
 
   .drawer,
@@ -138,7 +134,7 @@ const GlobalStyle = createGlobalStyle`
     justify-content: space-between;
     padding: 15px 16px;
     box-sizing: border-box;
-    box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);
+    /* box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1); */
   }
 
   .drawer-content {
@@ -154,6 +150,9 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     list-style-type: none;
     padding: 0;
+    li {
+      padding: 10px 0px;
+    }
   }
   
   .drawer-menu-item {
@@ -164,12 +163,7 @@ const GlobalStyle = createGlobalStyle`
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    border-bottom: ${({ theme }) =>
-      `1px solid ${getStylesBasedOnTheme(
-        theme.mode,
-        chroma(theme.white).alpha(0.15).css(),
-        chroma(theme.background).darken(0.3).css()
-      )}`};
+   
       
     a {
       text-decoration: none;
@@ -224,13 +218,25 @@ const StyledNavigation = styled("div")`
   .menu-bar {
     width: 19px;
     height: 2px;
-    margin: 2px 0;
+    margin: 2.4px 0;
+    border-radius: 3px;
     background: ${({ theme }) =>
-      getStylesBasedOnTheme(theme.mode, theme.white, theme.gray2)};
+      getStylesBasedOnTheme(theme.mode, theme.white, theme.textColor)};
     cursor: pointer;
   }
 `;
 
+const IconsHeaderMobileWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  svg,
+  button {
+    width: 28px;
+    height: 28px;
+  }
+`;
+
 export const Navigation: React.FC<NavigationProps> = (props) => {
   const { mobile, logo, menuItems, search, className = "" } = props;
   const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
@@ -333,18 +339,26 @@ export const Navigation: React.FC<NavigationProps> = (props) => {
           <GlobalStyle />
           <div className="header">
             <Logo {...logo} />
-            <span
-              className="menu-button"
-              onClick={() => setMobileMenuOpen(true)}
-              onKeyUp={() => setMobileMenuOpen(true)}
-              role="button"
-              aria-label={t<string>("Navigation.ShowHideMenu")}
-              tabIndex={0}
-            >
-              <span className="menu-bar"></span>
-              <span className="menu-bar"></span>
-              <span className="menu-bar"></span>
-            </span>
+            <IconsHeaderMobileWrapper>
+              <IconsHeaderMobileWrapper>
+                {props.cart}
+                {props.notification}
+                {props.profile}
+              </IconsHeaderMobileWrapper>
+
+              <span
+                className="menu-button"
+                onClick={() => setMobileMenuOpen(true)}
+                onKeyUp={() => setMobileMenuOpen(true)}
+                role="button"
+                aria-label={t<string>("Navigation.ShowHideMenu")}
+                tabIndex={0}
+              >
+                <span className="menu-bar"></span>
+                <span className="menu-bar"></span>
+                <span className="menu-bar"></span>
+              </span>
+            </IconsHeaderMobileWrapper>
           </div>
 
           <Drawer
diff --git a/src/components/molecules/NewCourseCard/index.tsx b/src/components/molecules/NewCourseCard/index.tsx
index bd0a1500..e3601958 100644
--- a/src/components/molecules/NewCourseCard/index.tsx
+++ b/src/components/molecules/NewCourseCard/index.tsx
@@ -54,13 +54,13 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
   display: flex;
   flex-direction: column;
   width: 100%;
-
   border-radius: 14px;
   border: 1px solid transparent;
   transition: transform 0.3s ease-in-out, border 0.3s ease-in-out,
     box-shadow 0.3s ease-in-out;
   padding: 6px 6px 16px 6px;
   overflow: hidden;
+
   .image-section {
     position: relative;
     z-index: 0;
@@ -139,7 +139,7 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
     }
   }
   &:hover {
-    border: 1px solid #eaeaea;
+    border: 1px solid ${({ theme }) => theme.gray3};
     box-shadow: 0px 5px 15px #00000012;
     transform: translateY(-7px);
 
@@ -208,7 +208,7 @@ export const NewCourseCard: React.FC<CourseCardProps> = (props) => {
     >
       {!hideImage && (
         <div className="image-section">
-          <RatioBox ratio={mobile ? 66 / 100 : 1}>
+          <RatioBox ratio={mobile ? 75 / 100 : 1}>
             {React.isValidElement(image) ? (
               image
             ) : (
@@ -255,7 +255,7 @@ export const NewCourseCard: React.FC<CourseCardProps> = (props) => {
         )}
         <div className="course-title">
           <Link to={`/courses/${id}`}>
-            <Title level={mobile ? 5 : 3} as="h1" className="title">
+            <Title level={3} as="h3" className="title">
               {title}
             </Title>
           </Link>
diff --git a/src/components/organisms/LoginForm/LoginForm.tsx b/src/components/organisms/LoginForm/LoginForm.tsx
index a5d8537a..f8a135f9 100644
--- a/src/components/organisms/LoginForm/LoginForm.tsx
+++ b/src/components/organisms/LoginForm/LoginForm.tsx
@@ -41,8 +41,9 @@ const StyledDiv = styled.div<{ mobile: boolean }>`
   h2,
   h3,
   h4 {
-    font-size: ${(props) => (props.mobile ? "18px" : "28px")};
+    font-size: ${(props) => (props.mobile ? "20px" : "28px")};
   }
+
   form {
     width: 100%;
     max-width: 440px;
diff --git a/src/components/skeletons/Banner/index.tsx b/src/components/skeletons/Banner/index.tsx
new file mode 100644
index 00000000..f947ba24
--- /dev/null
+++ b/src/components/skeletons/Banner/index.tsx
@@ -0,0 +1,33 @@
+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 (
+    <SkeletonWrapper className="banner-skeleton">
+      <div className="banner-skeleton__content">
+        <Skeleton count={4} height={18} />
+        <Skeleton style={{ marginTop: "52px" }} height={46} width={210} />
+      </div>
+      <Skeleton
+        height="460px"
+        borderRadius={14}
+        style={{ marginBottom: "10px" }}
+        containerClassName="banner-skeleton__image"
+      />
+    </SkeletonWrapper>
+  );
+};
diff --git a/src/components/skeletons/CourseCard/index.tsx b/src/components/skeletons/CourseCard/index.tsx
index 9b3fad5e..1961831c 100644
--- a/src/components/skeletons/CourseCard/index.tsx
+++ b/src/components/skeletons/CourseCard/index.tsx
@@ -3,11 +3,11 @@ import styled from "styled-components";
 import "react-loading-skeleton/dist/skeleton.css";
 import { useId } from "react";
 import { Col, ScreenClass } from "react-grid-system";
+import { isMobile, isTablet } from "react-device-detect";
 
-const CardSkeleton = styled.div`
+const CardSkeleton = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
   max-width: 278px;
   min-height: 414px;
-  padding-top: 20px;
 `;
 
 type ColProps = React.ComponentProps<typeof Col>;
@@ -27,8 +27,8 @@ export const CourseCardSkeleton: React.FC<Props> = ({
         colProps ? (
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
-          <Col key={`card-skeleton-${useId}`} {...colProps}>
-            <CardSkeleton>
+          <Col key={`card-skeleton-${useId()}`} {...colProps}>
+            <CardSkeleton $isMobile={isMobile} $isTablet={isTablet}>
               <Skeleton
                 height="264px"
                 borderRadius={14}
@@ -39,7 +39,11 @@ export const CourseCardSkeleton: React.FC<Props> = ({
             </CardSkeleton>
           </Col>
         ) : (
-          <CardSkeleton key={`card-skeleton-${useId}`}>
+          <CardSkeleton
+            key={`card-skeleton-${useId()}`}
+            $isMobile={isMobile}
+            $isTablet={isTablet}
+          >
             <Skeleton
               height="264px"
               borderRadius={14}
diff --git a/src/index.ts b/src/index.ts
index 72ba7cd8..a2173f0e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -73,3 +73,4 @@ export { default as ModalNote } from "./components/organisms/ModalNote";
 
 //SKELETONS
 export { CourseCardSkeleton } from "./components/skeletons/CourseCard/index";
+export { BannerSkeleton } from "./components/skeletons/Banner/index";