From 81aead761128009326177a22a94cad84a678d8a1 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 15 Jan 2023 16:35:42 +0100
Subject: [PATCH] feat: improve lecture ui design

---
 .../[courseid]/element/[elementid]/edit/page.tsx      |  4 +---
 front/app/layout.tsx                                  |  1 -
 front/components/Canva/Canva.tsx                      | 11 +++++++++--
 front/components/Editor/Editor.tsx                    |  7 ++++---
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx
index 49018d18..e7c5b83b 100644
--- a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx
+++ b/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";
diff --git a/front/app/layout.tsx b/front/app/layout.tsx
index c2124db0..fc7645c4 100644
--- a/front/app/layout.tsx
+++ b/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 }) {
diff --git a/front/components/Canva/Canva.tsx b/front/components/Canva/Canva.tsx
index 01eda31e..3d203e6f 100644
--- a/front/components/Canva/Canva.tsx
+++ b/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;
diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx
index b24c05c9..a573ed73 100644
--- a/front/components/Editor/Editor.tsx
+++ b/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);