Merge pull request #138 from frontendcafe/main-feature/135-create-stu…

…dysession-page [MAIN][FIX] General and StudyCard styles #135
frontendcafe · Sep 12, 2022 · 9f7f7fe · 9f7f7fe
2 parents 048fe3a + d00fd65
commit 9f7f7fe
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 18 deletions.
diff --git a/modules/StudySession/components/StudySessionCard.tsx b/modules/StudySession/components/StudySessionCard.tsx
@@ -15,6 +15,7 @@ import {
 } from "@chakra-ui/react";
 
 import Trash from "../../shared/components/Icons/Trash";
+import InfoIcon from "@/modules/shared/components/Icons/Info";
 
 interface StudySessionCardProps {
   id: string;
@@ -84,7 +85,12 @@ const StudySessionCard = ({
             <Box onClick={onOpen}>
               <Trash color="#0D378D" height={24} width={24} />
             </Box>
-            <Box fontWeight="600">{percentage}%</Box>
+            <Box display="flex" alignItems="center">
+              <Text fontWeight="500" fontSize="16px" m="0px 3px">
+                {percentage}%
+              </Text>
+              <InfoIcon width={14} height={14} />
+            </Box>
           </Flex>
         </Flex>
       </Box>

diff --git a/modules/shared/components/Icons/Info.tsx b/modules/shared/components/Icons/Info.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+interface IconProps {
+  width: number;
+  height: number;
+}
+
+export default function InfoIcon({ height, width }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path
+        d="M7 4.33333H7.00667M6.33333 7H7V9.66667H7.66667M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z"
+        stroke="#BBC2CC"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/pages/study-sessions/index.tsx b/pages/study-sessions/index.tsx
@@ -5,11 +5,11 @@ import { useRouter } from "next/router";
 import AddIcon from "@/modules/shared/components/Icons/Add";
 import Menu from "@/modules/shared/components/Menu/Menu";
 import StudySessionCard from "@/modules/StudySession/components/StudySessionCard";
-import { Center, Container, Flex, Grid, GridItem, Select, Text } from "@chakra-ui/react";
+import { Center, Container, Grid, GridItem, Select, Text } from "@chakra-ui/react";
 
 const StudySessions: NextPage = () => {
   const router = useRouter();
-  const deleteFunction = (id: string) => {
+  const handleDelete = (id: string) => {
     console.log(id);
   };
 
@@ -45,41 +45,51 @@ const StudySessions: NextPage = () => {
             desktop: "repeat(3, 1fr)",
           }}
           gap={{ base: "25", lg: "10" }}
-          justifyContent="center"
+          justifyContent="space-between"
         >
           <GridItem
-            w="100%"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
+            w={{ desktop: "340px" }}
             cursor="pointer"
             onClick={handleCreate}
+            display="flex"
+            justifyContent="center"
           >
-            <Flex flexDirection="column">
-              <Center flexDirection="column">
-                <AddIcon width={25} height={25} />
-                <Text>Crear nueva sesión</Text>
-              </Center>
-            </Flex>
+
+            <Center
+              flexDirection={{ mobile: "row", desktop: "column" }}
+              border={{ base: "0", desktop: "2px" }}
+              borderColor={{ base: "white", desktop: "gray.50" }}
+              width={{ base: "auto", desktop: "320px" }}
+              borderRadius="lg"
+            >
+              <AddIcon width={25} height={25} />
+              <Text color="primary.200" fontWeight="400" fontSize="19px" m="10px 6px">
+                Crear nueva sesión
+              </Text>
+            </Center>
+
           </GridItem>
+          {/* ------------MAP con las respectivas props-----------------*/}
           <GridItem w="100%">
             <StudySessionCard
               id="asd123"
               name="hola"
               cardsAmount={30}
               collection="Medicina"
               percentage={50}
-              deleteFunction={deleteFunction}
+              deleteFunction={handleDelete}
             />
           </GridItem>
+          {/* -----------------MAP-------------------- */}
+          {/* ------------DELETE -------------  */}
           <GridItem w="100%">
             <StudySessionCard
               id="asd123"
               name="hola"
               cardsAmount={30}
               collection="Medicina"
               percentage={50}
-              deleteFunction={deleteFunction}
+              deleteFunction={handleDelete}
             />
           </GridItem>
           <GridItem w="100%">
@@ -89,7 +99,7 @@ const StudySessions: NextPage = () => {
               cardsAmount={30}
               collection="Medicina"
               percentage={50}
-              deleteFunction={deleteFunction}
+              deleteFunction={handleDelete}
             />
           </GridItem>
           <GridItem w="100%">
@@ -99,9 +109,10 @@ const StudySessions: NextPage = () => {
               cardsAmount={30}
               collection="Medicina"
               percentage={50}
-              deleteFunction={deleteFunction}
+              deleteFunction={handleDelete}
             />
           </GridItem>
+          {/* ------------DELETE ------------- */}
         </Grid>
       </Container>
     </>