From e3b7e3134dadf99341d4d885d8a7ef48b3728ac5 Mon Sep 17 00:00:00 2001
From: max-romagnoli <massimiliano.romagnoli02@gmail.com>
Date: Mon, 10 Apr 2023 20:39:16 +0100
Subject: [PATCH 1/3] Make modals stick on scroll

---
 client/src/components/Editor.js               |  6 +++++
 client/src/components/Editor.module.css       | 24 +++++++++++++++++--
 .../src/components/SideMistakeBar.module.css  |  5 +++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Editor.js b/client/src/components/Editor.js
index 82441d2..cf2d7f1 100644
--- a/client/src/components/Editor.js
+++ b/client/src/components/Editor.js
@@ -35,6 +35,12 @@ export const Editor = ({ blocks, onValidateClick, forwardedRef, validateAll }) =
               toggleMode={toggleMode}
             /> 
           }
+          { (showMistakeBar && isCompact) &&
+            <div className={styles["guideline-compact"]} />
+          }
+          { (showMistakeBar && !isCompact) &&
+            <div className={styles["guideline-expand"]} />
+          }
         </div>
       </section>
     </>
diff --git a/client/src/components/Editor.module.css b/client/src/components/Editor.module.css
index 85140c7..971eb26 100644
--- a/client/src/components/Editor.module.css
+++ b/client/src/components/Editor.module.css
@@ -7,6 +7,7 @@
         composes: Editor;
         display: flex;
         flex-direction: row;
+        overflow: auto;
     }
 
 .Carousel {
@@ -15,7 +16,26 @@
 }
 
 
-.SideMistakeBar{
-    flex-grow: 1;
+.SideMistakeBar {
+    position: absolute;
+    flex-grow: 0;
+    align-self: flex-start;  
+    right: 0;
+    margin-right: 3px;
 }
 
+
+    .guideline-compact {
+        margin-top: 2rem;
+        width: 50px;
+        height: 100%;
+        flex-shrink: 0;
+    }
+
+    .guideline-expand {
+        margin-top: 2rem;
+        width: 350px;
+        height: 100%;
+        flex-shrink: 0;
+    }
+
diff --git a/client/src/components/SideMistakeBar.module.css b/client/src/components/SideMistakeBar.module.css
index 2b77656..064a7a9 100644
--- a/client/src/components/SideMistakeBar.module.css
+++ b/client/src/components/SideMistakeBar.module.css
@@ -1,11 +1,12 @@
 .container {
+  composes: SideMistakeBar from "./Editor.module.css";
   display: grid;
   grid-template-rows: 50px 280px;
   grid-template-columns: 350px;
   grid-template-areas: 
     "title"
     "body";
-  position: relative;
+  position: absolute;
   background-color: var(--mistake-bar-dark);
   color: var(--text-dark);
   flex-direction: column;
@@ -144,6 +145,7 @@
 
 
 .compact-container {
+  composes: SideMistakeBar from "./Editor.module.css";
   display: flex;
   flex-direction: column;
   margin-top: 2rem;
@@ -151,6 +153,7 @@
   height: fit-content;
   background-color: var(--text-dark);
   font-weight: bold;
+
 }
 
   .compact-button {

From 2395a8792f26102da8099a6667bb8282bf2db6be Mon Sep 17 00:00:00 2001
From: max-romagnoli <massimiliano.romagnoli02@gmail.com>
Date: Tue, 11 Apr 2023 01:50:00 +0100
Subject: [PATCH 2/3] Add loading icon to single validate/save buttons

---
 client/src/components/Header.js  |  4 ++--
 client/src/components/TextBox.js | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index b2aa044..b99e15d 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -113,12 +113,12 @@ export const Header = ({
                     percWidth="7%"
                     percHeight="7%"
                     message={message}
-                    messageStyle="header-loading"
+                    messageStyle="header-loading" 
                   />
                 }
                 </div>
                 <div className={styles['action-container']}>
-                  <Button onClick={handleOnClickSaveAll} buttonStyle="actionbar-save" text="Save all"></Button>
+                  <Button onClick={handleOnClickSaveAll} buttonStyle="actionbar-save" text="Save All"></Button>
                   <Button onClick={handleOnClickValidateAll} buttonStyle="actionbar-validate" text="Spellcheck"></Button>
                 </div>
               </>
diff --git a/client/src/components/TextBox.js b/client/src/components/TextBox.js
index d79698e..a8c09e0 100644
--- a/client/src/components/TextBox.js
+++ b/client/src/components/TextBox.js
@@ -6,6 +6,7 @@ import { ReactComponent as CloseIcon } from "../icons/close.svg"
 import { ReactComponent as ValidateOutline } from "../icons/validate-outline.svg"
 import { ReactComponent as Save } from "../icons/save.svg"
 import { MistakeHighlighter } from './MistakeHighlighter'
+import ReactLoading from 'react-loading'
 import axios from 'axios'
 
 export const TextBox = ({
@@ -29,6 +30,8 @@ export const TextBox = ({
     const [isValidated, setIsValidated] = useState(false)
     const textAreaRef = useRef()
     const [uniqueId, setUniqueId] = useState("")
+    const [loadValidate, setLoadValidate] = useState(false)
+    const [loadSave, setLoadSave] = useState(false)
 
     useEffect(() => {
       setUniqueId(() => uniqueid)
@@ -36,6 +39,8 @@ export const TextBox = ({
 
     const handleOnValidateClick = () => {
       onValidateClick()
+      setLoadValidate(() => true)
+      setTimeout(() => setLoadValidate(() => false), 3000)
       setTimeout(() => setIsValidated(() => true), 500)
     }
 
@@ -65,6 +70,8 @@ export const TextBox = ({
     }
 
     const onSaveClick = (e, id) => {
+      setLoadSave(() => true)
+      setTimeout(() => setLoadSave(() => false), 1000)
       const newContent = textAreaRef.current.innerText
       if (uniqueId === undefined) postBlock(newContent)
       else putBlock(newContent)
@@ -150,14 +157,20 @@ export const TextBox = ({
                 <Button 
                   buttonStyle="icon-single-textbox" 
                   onClick={(e) => handleOnValidateClick(e, uniqueid)}
-                  icon={<ValidateOutline className={styles['icon-single-textbox-icon-active']} />}
+                  icon={(!loadValidate) 
+                    ? <ValidateOutline className={styles['icon-single-textbox-icon-active']}/> 
+                    : <ReactLoading type={"spin"} color={"#F37A32"} height={"20px"} width={"20px"} />
+                  }
                 />
               )}
               {(onFocus && !document.untracked) && (
                 <Button 
                   buttonStyle="icon-single-textbox" 
                   onClick={(e) => onSaveClick(e, id)}
-                  icon={<Save className={styles['icon-single-textbox-icon-passive']} />}
+                  icon={(!loadSave) 
+                    ? <Save className={styles['icon-single-textbox-icon-passive']} />
+                    : <ReactLoading type={"spin"} color={"#8BA3CC"} height={"20px"} width={"20px"} />
+                  }
                 />
               )}
             </div>

From 0ee2fd825390055b6579379932efff4f0cf7fc1c Mon Sep 17 00:00:00 2001
From: max-romagnoli <massimiliano.romagnoli02@gmail.com>
Date: Tue, 11 Apr 2023 02:47:42 +0100
Subject: [PATCH 3/3] Increase timeout

---
 client/src/components/TextBox.js | 2 +-
 client/src/pages/EditorPage.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TextBox.js b/client/src/components/TextBox.js
index a8c09e0..10bef9b 100644
--- a/client/src/components/TextBox.js
+++ b/client/src/components/TextBox.js
@@ -40,7 +40,7 @@ export const TextBox = ({
     const handleOnValidateClick = () => {
       onValidateClick()
       setLoadValidate(() => true)
-      setTimeout(() => setLoadValidate(() => false), 3000)
+      setTimeout(() => setLoadValidate(() => false), 3750)
       setTimeout(() => setIsValidated(() => true), 500)
     }
 
diff --git a/client/src/pages/EditorPage.js b/client/src/pages/EditorPage.js
index c426bd0..89b75fc 100644
--- a/client/src/pages/EditorPage.js
+++ b/client/src/pages/EditorPage.js
@@ -19,7 +19,7 @@ export function EditorPage() {
     const handleOnValidateAll = () => {
       setTimeout(() => updateBlocks(), 500)
       setTimeout(() => checkDocument(), 1000)
-      setTimeout(() => setValidateAll(true), 3500)
+      setTimeout(() => setValidateAll(true), 2500)
     }
 
     const handleOnValidateBlock = (e, id) => {