feat: improve lecture ui design

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

@@ -2,9 +2,7 @@
 "use client";
 import { default as React, useEffect, useRef } from "react";
 
-import Layout from "../../../../../../../../components/UI/Layout";
-import { Title } from "../../../../../../../../components/UI/Elements/Styles/Title";
-import dynamic from "next/dynamic";
+
 import { useRouter } from "next/navigation";
 import { getElement } from "../../../../../../../../services/courses/elements";
 import AuthProvider from "../../../../../../../../components/Security/AuthProvider";

front/app/layout.tsx

@@ -1,7 +1,6 @@
 "use client";
 import "../styles/globals.css";
 import StyledComponentsRegistry from "../components/lib/styled-registry";
-import { Menu } from "../components/UI/Elements/Menu";
 import { motion } from "framer-motion";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

front/components/Canva/Canva.tsx

@@ -8,6 +8,7 @@ import ImageBlock from "../Editor/Extensions/Image/ImageBlock";
 import Youtube from "@tiptap/extension-youtube";
 import { EditorContentWrapper } from "../Editor/Editor";
 import VideoBlock from "../Editor/Extensions/Video/VideoBlock";
+import { styled } from "styled-components";
 
 interface Editor {
   content: string;
@@ -46,10 +47,16 @@ function Canva(props: Editor) {
   });
 
   return (
-    <EditorContentWrapper>
+    <CanvaWrapper>
       <EditorContent editor={editor} />
-    </EditorContentWrapper>
+    </CanvaWrapper>
   );
 }
 
+const CanvaWrapper = styled.div`
+  padding-top: 20px;
+  width: 1300px;
+  margin: 0 auto;
+`;
+
 export default Canva;

front/components/Editor/Editor.tsx

@@ -98,7 +98,9 @@ function Editor(props: Editor) {
                 {" "}
                 <b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
               </EditorInfoDocName>
-              <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save <Save size={12}/></EditorSaveButton>
+              <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>
+                Save <Save size={12} />
+              </EditorSaveButton>
             </EditorInfoWrapper>
             <EditorButtonsWrapper>
               <ToolbarButtons editor={editor} />
@@ -147,7 +149,7 @@ const Page = styled.div`
 `;
 
 const EditorTop = styled.div`
-  background-color: #ffffffb8;
+  background-color: #ffffffeb;
   border-radius: 15px;
   backdrop-filter: saturate(180%) blur(14px);
   margin: 40px;
@@ -225,7 +227,6 @@ const EditorSaveButton = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 53px;
-  
 
   &.is-active {
     background: rgba(176, 176, 176, 0.5);