From 015e9d72d7aacdbe6e93b78b8ef46a82ae9ae139 Mon Sep 17 00:00:00 2001
From: Przemek <przemek.wiktorski@escola.pl>
Date: Mon, 19 Feb 2024 13:17:58 +0100
Subject: [PATCH] home page

---
 .../molecules/Navigation/Navigation.tsx       |  6 +++++-
 .../molecules/NewCourseCard/index.tsx         | 21 ++++++++++++++-----
 .../organisms/SearchCourses/SearchCourses.tsx |  2 ++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/Navigation/Navigation.tsx b/src/components/molecules/Navigation/Navigation.tsx
index 9eb609e0..a7c2fe4f 100644
--- a/src/components/molecules/Navigation/Navigation.tsx
+++ b/src/components/molecules/Navigation/Navigation.tsx
@@ -103,7 +103,11 @@ export interface NavigationProps extends ExtendableStyledComponent {
 }
 
 const GlobalStyle = createGlobalStyle`
-
+.rc-drawer-content-wrapper {
+  @media (max-width: 530px) {
+    width: 90% !important;
+  }
+}
   svg {
     transition: opacity 0.2s ease-in-out;
   
diff --git a/src/components/molecules/NewCourseCard/index.tsx b/src/components/molecules/NewCourseCard/index.tsx
index e3601958..b786102c 100644
--- a/src/components/molecules/NewCourseCard/index.tsx
+++ b/src/components/molecules/NewCourseCard/index.tsx
@@ -84,9 +84,17 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
   }
   .course-card__content {
     padding: 0px 15px;
+
+    @media (max-width: 768px) {
+      min-height: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
   }
   .course-title {
     margin-bottom: 46px;
+    margin-bottom: ${(props) => (props.mobile ? "0px" : `45px`)};
   }
   .title {
     margin-top: 12px;
@@ -94,7 +102,7 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    margin-bottom: 45px;
+    margin-bottom: ${(props) => (props.mobile ? "10px" : `45px`)};
   }
 
   .categories {
@@ -133,15 +141,18 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
   }
   .course-price {
     transition: transform 0.3s ease-in-out;
-    transform: translateY(+120px);
+    transform: ${(props) =>
+      props.mobile ? "translateY(0px)" : "translateY(+120px)"};
     p {
       color: ${({ theme }) => theme.primaryColor};
     }
   }
   &:hover {
-    border: 1px solid ${({ theme }) => theme.gray3};
-    box-shadow: 0px 5px 15px #00000012;
-    transform: translateY(-7px);
+    border: ${(props) =>
+      props.mobile ? "none" : `1px solid ${props.theme.gray3}`};
+    box-shadow: ${(props) =>
+      props.mobile ? "none" : `0px 5px 15px #00000012`};
+    transform: ${(props) => (props.mobile ? "none" : "translateY(-7px)")};
 
     .image-section {
       img {
diff --git a/src/components/organisms/SearchCourses/SearchCourses.tsx b/src/components/organisms/SearchCourses/SearchCourses.tsx
index b8ecd370..b24b5a3a 100644
--- a/src/components/organisms/SearchCourses/SearchCourses.tsx
+++ b/src/components/organisms/SearchCourses/SearchCourses.tsx
@@ -8,6 +8,7 @@ import styled from "styled-components";
 
 const SearchWrapper = styled.div`
   min-width: 300px;
+
   input {
     border-radius: 21px !important;
     background-color: ${({ theme }) => theme.gray4} !important;
@@ -29,6 +30,7 @@ const ItemButton = styled(Button)`
 export const SearchCourses: React.FC<{
   onItemSelected: (item: API.Course) => void;
   onInputSubmitted: (phrase: string) => void;
+  mobile?: boolean;
 }> = ({ onItemSelected, onInputSubmitted }) => {
   const abortController = useRef<AbortController>();
   const [fetching, setFetching] = useState(false);