feat: redesign edit course page

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

@@ -226,22 +226,22 @@ function CourseEdit(params: any) {
 
   return (
     <>
-      <Header></Header>
+    <Page>
       <Title>
-        Edit Course Chapters{" "}
+        Edit Course {" "}
         <button
           onClick={() => {
             setNewChapterModal(true);
           }}
         >
-          +
+          Add chapter +
         </button>
         <button
           onClick={() => {
             updateChapters();
           }}
         >
-          Save Chapters
+          Save 
         </button>
       </Title>
       {newChapterModal && <NewChapterModal closeModal={closeNewChapterModal} submitChapter={submitChapter}></NewChapterModal>}
@@ -283,12 +283,46 @@ function CourseEdit(params: any) {
           </DragDropContext>
         </ChapterlistWrapper>
       )}
+      </Page>
     </>
   );
 }
 
+const Page = styled.div`
+  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+  min-width: 100vw;
+  padding-top: 30px;
+
+  // dots background
+  background-image: radial-gradient(#4744446b 1px, transparent 1px), radial-gradient(#4744446b 1px, transparent 1px);
+  background-position: 0 0, 25px 25px;
+  background-size: 50px 50px;
+  background-attachment: fixed;
+  background-repeat: repeat;
+
+  button {
+    margin-left: 10px;
+    background-color: #000000;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    color: white;
+    font-size: 13px;
+    cursor: pointer;
+    transition: 0.2s;
+    font-family: "DM Sans", sans-serif;
+    &:hover {
+      background-color: #474444;
+
+      transition: 0.2s;
+    }
+  }
+`;
 const ChapterlistWrapper = styled.div`
   display: flex;
   padding-left: 30px;
+  justify-content: center;
 `;
 export default CourseEdit;

front/components/Drags/Chapter.tsx

@@ -48,15 +48,22 @@ function Chapter(props: any) {
 }
 
 const ChapterWrapper = styled.div`
-  margin-bottom: 5px;
+  margin-bottom: 20px;
-  padding: 11px;
+  padding: 4px;
-  background-color: #00000010;
+  background-color: #ffffffc5;
-  width: 310px;
+  width: 900px;
+  font-size: 15px;
   display: block;
   border-radius: 9px;
   border: 1px solid rgba(255, 255, 255, 0.19);
   box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
   transition: all 0.2s ease;
+  
+
+  h3{
+    padding-left: 20px;
+    padding-right: 20px;
+  }
 `;
 
 const LecturesList = styled.div`

front/components/Drags/Lecture.tsx

@@ -29,14 +29,15 @@ function Lecture(props: any) {
 }
 
 export const LectureWrapper = styled.div`
-  padding: 10px;
+  padding: 2px;
   padding-left: 17px;
   list-style: none;
   /* padding-left: 2px; */
-  background-color: #8c949c33;
+  background-color: #f4f4f4c5;
-  border-radius: 28px;
+  border-radius: 7px;
   margin: 15px;
-
+  display: flex;
+  align-items: center;
   &:hover {
     background-color: #8c949c7b;
   }