Merge pull request #74 from learnhouse/feat/modals-refactor

Modals refactor

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx

@@ -9,12 +9,11 @@ import { initialData, initialData2 } from "@components/Pages/CourseEdit/Draggabl
 import Chapter from "@components/Pages/CourseEdit/Draggables/Chapter";
 import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "@services/courses/chapters";
 import { useRouter } from "next/navigation";
-import NewChapterModal from "@components/Pages/CourseEdit/NewChapter";
-import NewActivityModal from "@components/Pages/CourseEdit/NewActivity";
+import NewChapterModal from "@components/Modals/Chapters/NewChapter";
+import NewActivityModal from "@components/Modals/Activities/Create/NewActivity";
 import { createActivity, createFileActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 import Modal from "@components/UI/Modal/Modal";
-import AuthProvider from "@components/Security/AuthProvider";
 import { denyAccessToUser } from "@services/utils/react/middlewares/views";
 
 function CourseEdit(params: any) {

front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx

@@ -10,7 +10,7 @@ import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { Edit2, Trash } from "lucide-react";
 import Modal from "@components/UI/Modal/Modal";
-import CreateCourseModal from "@components/Pages/CreateCourse/CreateCourse";
+import CreateCourseModal from "@components/Modals/Course/Create/CreateCourse";
 
 const CoursesIndexPage = (params: any) => {
   const router = useRouter();

front/components/Modals/Chapters/NewChapter.tsx

@@ -26,7 +26,6 @@ function NewChapterModal({ submitChapter, closeModal }: any) {
   };
 
   return (
-
     <FormLayout onSubmit={handleSubmit}>
       <FormField name="chapter-name">
         <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>

front/components/UI/Modal/Modal.tsx

@@ -154,90 +154,4 @@ const DialogDescription = styled(Dialog.Description, {
 
 const Flex = styled('div', { display: 'flex' });
 
-const Button = styled('button', {
-    all: 'unset',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 4,
-    padding: '0 15px',
-    fontSize: 15,
-    lineHeight: 1,
-    fontWeight: 500,
-    height: 35,
-
-    variants: {
-        variant: {
-            violet: {
-                backgroundColor: 'white',
-                color: violet.violet11,
-                boxShadow: `0 2px 10px ${blackA.blackA7}`,
-                '&:hover': { backgroundColor: mauve.mauve3 },
-                '&:focus': { boxShadow: `0 0 0 2px black` },
-            },
-            green: {
-                backgroundColor: green.green4,
-                color: green.green11,
-                '&:hover': { backgroundColor: green.green5 },
-                '&:focus': { boxShadow: `0 0 0 2px ${green.green7}` },
-            },
-        },
-    },
-
-    defaultVariants: {
-        variant: 'violet',
-    },
-});
-
-const IconButton = styled('button', {
-    all: 'unset',
-    fontFamily: 'inherit',
-    borderRadius: '100%',
-    height: 25,
-    width: 25,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: violet.violet11,
-    position: 'absolute',
-    top: 10,
-    right: 10,
-
-    '&:hover': { backgroundColor: violet.violet4 },
-    '&:focus': { boxShadow: `0 0 0 2px ${violet.violet7}` },
-});
-
-const Fieldset = styled('fieldset', {
-    all: 'unset',
-    display: 'flex',
-    gap: 20,
-    alignItems: 'center',
-    marginBottom: 15,
-});
-
-const Label = styled('label', {
-    fontSize: 15,
-    color: violet.violet11,
-    width: 90,
-    textAlign: 'right',
-});
-
-const Input = styled('input', {
-    all: 'unset',
-    width: '100%',
-    flex: '1',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 4,
-    padding: '0 10px',
-    fontSize: 15,
-    lineHeight: 1,
-    color: violet.violet11,
-    boxShadow: `0 0 0 1px ${violet.violet7}`,
-    height: 35,
-
-    '&:focus': { boxShadow: `0 0 0 2px ${violet.violet8}` },
-});
-
 export default Modal;