order design and functional fixes

Author: maxchistt

client/src/NoteComponents/ModalNoteEdit.js

@@ -140,11 +140,13 @@ function ModalNoteEdit() {
                     <div>
                         <Palette
                             className="btn btn-light mx-1"
+                            style={{ boxShadow: "none" }}
                             disabled={!note}
                             setColor={tryChangeColor}
                         ></Palette>
                         <button
                             className="btn btn-light"
+                            style={{ boxShadow: "none" }}
                             disabled={!note}
                             onClick={tryRemove}
                         ><i className="bi bi-trash text-dark"></i></button>
@@ -157,6 +159,7 @@ function ModalNoteEdit() {
                     <div>
                         <button
                             className="btn btn-light"
+                            style={{ boxShadow: "none" }}
                             onClick={tryClose}
                         >Close</button>
                     </div>

client/src/NoteComponents/NoteItem.js

@@ -25,6 +25,16 @@ function NoteItem({ note = new Note(), index }) {
     const lineClip = 12
     const bgColor = note.color
 
+    const footerBtn = {
+        className: `btn btn-light p-0 text-secondary item-footer-btn`,
+        style: {
+            width: "1.8em", height: "1.8em", float: "right",
+            borderColor: "transparent",
+            backgroundColor: "transparent",
+            boxShadow: "none"
+        }
+    }
+
     return (
         <div className="p-1" >
             <div className="card" style={{ backgroundColor: bgColor }} >
@@ -44,16 +54,16 @@ function NoteItem({ note = new Note(), index }) {
                 {/**Кнопки изменения порядка */}
                 <div className="card-body pt-0">
                     <button
-                        className={`btn btn-light p-0`}
-                        style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => editNoteOrder(index, Number(note.order) - 1)}
+                        className={footerBtn.className}
+                        style={footerBtn.style}
+                        onClick={() => editNoteOrder(index, false)}
                     >
                         &#10097;
                     </button>
                     <button
-                        className={`btn btn-light p-0`}
-                        style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => editNoteOrder(index, Number(note.order) + 1)}
+                        className={footerBtn.className}
+                        style={footerBtn.style}
+                        onClick={() => editNoteOrder(index, true)}
                     >
                         &#10096;
                     </button>

client/src/Pages/NotesPage.css

@@ -26,3 +26,11 @@
   display: inline-block;
   transform: rotate(90deg);
 }
+
+.item-footer-btn {
+  transition: opacity 0.15s !important;
+  opacity: 0.2 !important;
+}
+.item-footer-btn:hover {
+  opacity: 0.9 !important;
+}

client/src/Pages/NotesPage.js

@@ -142,12 +142,12 @@ function NotesPage() {
 
     /**
      * Изменение порядка заметки
-     * @param {*} index 
-     * @param {*} order 
+     * @param {number} index 
+     * @param {boolean} orderOperationFlag 
      */
-    function editNoteOrder(index, order) {
+    function editNoteOrder(index, orderOperationFlag) {
         if (notesArr[index]) {
-            notesArr[index].order = order
+            notesArr[index].order += orderOperationFlag ? 2 : -2
             let fixedArr = fixOrders(notesArr)
             setNotesArr(fixedArr)
             fixedArr.forEach((note) => {

client/src/Shared/order.js

@@ -30,7 +30,7 @@ export function calcOrder(notesArr = []) {
  */
 export function fixOrders(notesArr = []) {
     let fixedArr = notesArr
-    const sortedArr = Array.isArray(notesArr) ? notesArr.sort(sortByOrder) : []
+    const sortedArr = Array.isArray(notesArr) ? notesArr.sort(sortByOrder).reverse() : []
     sortedArr.forEach((sortedNote, sortedNoteIndex) => {
         fixedArr.forEach((note) => {
             if (note.id === sortedNote.id) note.order = sortedNoteIndex