From af8542069ff98384c676ac5df6a49599906d9ca6 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Wed, 11 Jan 2023 23:30:13 +0100
Subject: [PATCH] feat: update save button ui

---
 .../[courseid]/element/[elementid]/edit/page.tsx |  5 +----
 front/components/Editor/Editor.tsx               | 16 +++++++++++-----
 2 files changed, 12 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 d94769dd..49018d18 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
@@ -1,3 +1,4 @@
+
 "use client";
 import { default as React, useEffect, useRef } from "react";
 
@@ -10,10 +11,6 @@ import AuthProvider from "../../../../../../../../components/Security/AuthProvid
 import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper";
 import { getCourseMetadata } from "../../../../../../../../services/courses/courses";
 
-// Workaround (Next.js SSR doesn't support tip tap editor)
-const Editor: any = dynamic(() => import("../../../../../../../../components/Editor/EditorWrapper") as any, {
-  ssr: false,
-});
 
 function EditElement(params: any) {
   const router = useRouter();
diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx
index f4f6c5d7..b24c05c9 100644
--- a/front/components/Editor/Editor.tsx
+++ b/front/components/Editor/Editor.tsx
@@ -18,6 +18,7 @@ import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
 import ImageBlock from "./Extensions/Image/ImageBlock";
 import Youtube from "@tiptap/extension-youtube";
 import VideoBlock from "./Extensions/Video/VideoBlock";
+import { Save } from "lucide-react";
 
 interface Editor {
   content: string;
@@ -97,7 +98,7 @@ function Editor(props: Editor) {
                 {" "}
                 <b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
               </EditorInfoDocName>
-              <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save</EditorSaveButton>
+              <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>Save <Save size={12}/></EditorSaveButton>
             </EditorInfoWrapper>
             <EditorButtonsWrapper>
               <ToolbarButtons editor={editor} />
@@ -213,24 +214,29 @@ const EditorInfoDocName = styled.div`
 
 const EditorSaveButton = styled.div`
   display: flex;
-  border-radius: 6px;
+  border-radius: 8px;
   padding: 5px;
   font-size: 12px;
   margin-right: 5px;
   margin-left: 7px;
-  background: rgba(176, 176, 176, 0.145);
+  background: #ffffff8d;
+  color: #5252528d;
+  border: solid 1px #52525257;
+  align-items: center;
+  justify-content: space-between;
+  width: 53px;
+  
 
   &.is-active {
     background: rgba(176, 176, 176, 0.5);
 
     &:hover {
-      background: rgba(139, 139, 139, 0.5);
+      background: rgba(31, 31, 31, 0.5);
       cursor: pointer;
     }
   }
 
   &:hover {
-    background: rgba(217, 217, 217, 0.48);
     cursor: pointer;
   }
 `;