home page

EscolaLMS · Feb 19, 2024 · 015e9d7 · 015e9d7
1 parent 77c503a
commit 015e9d7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git 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
@@ -84,17 +84,25 @@ 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;
     display: -webkit-box;
     -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
@@ -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);