From 5b2187c311b5997d18a08ff8995837f28122434d Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Wed, 26 Apr 2023 22:17:10 +0200
Subject: [PATCH] feat: redesign save button and add preview button

---
 front/components/Editor/Editor.tsx | 70 +++++++++++++++++++++++++++---
 1 file changed, 63 insertions(+), 7 deletions(-)

diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx
index 8f46b34a..e57546bb 100644
--- a/front/components/Editor/Editor.tsx
+++ b/front/components/Editor/Editor.tsx
@@ -10,7 +10,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import Image from "next/image";
 import styled from "styled-components";
 import { getBackendUrl } from "@services/config/config";
-import { SlashIcon } from "@radix-ui/react-icons";
+import { DividerVerticalIcon, EyeOpenIcon, SlashIcon } from "@radix-ui/react-icons";
 import Avvvatars from "avvvatars-react";
 // extensions
 import InfoCallout from "./Extensions/Callout/Info/InfoCallout";
@@ -18,10 +18,11 @@ 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";
+import { Eye, Save } from "lucide-react";
 import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
 import PDFBlock from "./Extensions/PDF/PDFBlock";
 import QuizBlock from "./Extensions/Quiz/QuizBlock";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 interface Editor {
   content: string;
@@ -113,12 +114,10 @@ function Editor(props: Editor) {
                 {" "}
                 <b>{props.course.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
               </EditorInfoDocName>
-              <EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>
-                Save <Save size={11} />
-              </EditorSaveButton>
+
             </EditorInfoWrapper>
             <EditorButtonsWrapper>
-              <ToolbarButtons  editor={editor} />
+              <ToolbarButtons editor={editor} />
             </EditorButtonsWrapper>
           </EditorDocSection>
           <EditorUsersSection>
@@ -126,6 +125,11 @@ function Editor(props: Editor) {
               {!auth.isAuthenticated && <span>Loading</span>}
               {auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />}
             </EditorUserProfileWrapper>
+            <DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey" }} />
+            <EditorLeftOptionsSection>
+              <EditorLeftOptionsSaveButton onClick={() => props.setContent(editor.getJSON())}> Save </EditorLeftOptionsSaveButton>
+              <ToolTip content="Preview"><EditorLeftOptionsPreviewButton> <Eye size={15} /> </EditorLeftOptionsPreviewButton></ToolTip>
+            </EditorLeftOptionsSection>
           </EditorUsersSection>
         </EditorTop>
       </motion.div>
@@ -186,11 +190,63 @@ const EditorDocSection = styled.div`
 `;
 const EditorUsersSection = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
 `;
 
+const EditorLeftOptionsSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const EditorLeftOptionsSaveButton = styled.button`
+  background-color: #8783f7;
+  border-radius: 8px;
+  border: none;
+  color: white;
+  padding: 8px;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+
+
+  &:hover {
+    background-color: #4a44f9;
+    opacity: 0.8;
+  }
+`;
+
+const EditorLeftOptionsPreviewButton = styled.button`
+   background-color: #a4a4a449;
+  border-radius: 8px;
+  border: none;
+  color: #000000;
+  padding: 8px;
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+
+  // center icon
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background-color: #c0bfbf;
+    opacity: 0.8;
+  }
+
+`;
+
+
 // Inside EditorDocSection
 const EditorInfoWrapper = styled.div`
   display: flex;