From 2837edef3179fd01cb162f9c2da3ebb6465bbdf1 Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Sun, 29 Dec 2024 19:30:46 +0000
Subject: [PATCH] improve: css for change order

---
 src/components/Footer.js                |  2 +-
 src/components/Navigations/PathNode.css | 21 ++++++++++++++++++++-
 src/components/Navigations/PathNode.js  |  8 ++++----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 8e04aea..0b33027 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -32,7 +32,7 @@ const Footer = () => {
                         <a href="https://git.hangman-lab.top/hzhang/HangmanLab">git</a>
                         &nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;
-                        v0.0.7
+                        v0.0.8
                     </span>
                     )}</p>
                 {
diff --git a/src/components/Navigations/PathNode.css b/src/components/Navigations/PathNode.css
index d3bcc8e..662c332 100644
--- a/src/components/Navigations/PathNode.css
+++ b/src/components/Navigations/PathNode.css
@@ -46,4 +46,23 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-}
\ No newline at end of file
+}
+
+.move-forward {
+    background-color: #c0fff0 !important;
+    border-color: #c0fbc0 !important;
+    color: #b0ffa0 !important;
+}
+.move-forward:hover {
+    background-color: #a0ffa0;
+    border-color: #0afb0c;
+}
+.move-backward {
+    background-color: #a0a0ff !important;
+    border-color: #c0c0ff !important;
+    color: #0af0fc !important;
+}
+.move-backward:hover {
+    background-color: #a4a4f0;
+    border-color: #facaff;
+}
diff --git a/src/components/Navigations/PathNode.js b/src/components/Navigations/PathNode.js
index faa9f81..8f16763 100644
--- a/src/components/Navigations/PathNode.js
+++ b/src/components/Navigations/PathNode.js
@@ -138,14 +138,14 @@ const PathNode = ({ path, isRoot = false }) => {
                             style={{marginLeft: "0.5rem"}}
                         >
                             <button
-                                className="button is-small is-primary mb-1"
+                                className="button is-small mb-1 move-forward"
                                 style={{height: "1rem", padding: "0.25rem"}}
                                 onClick={() => handleMovePath(path, "forward")}
                                 type="button"
                             >
                             </button>
                             <button
-                                className="button is-small is-primary mb-1"
+                                className="button is-small mb-1 move-backward"
                                 style={{height: "1rem", padding: "0.25rem"}}
                                 onClick={() => handleMovePath(path, "backward")}
                                 type="button"
@@ -177,14 +177,14 @@ const PathNode = ({ path, isRoot = false }) => {
                                 <PermissionGuard rolesRequired={['admin']}>
                                     <div className="control">
                                         <button
-                                            className="button is-small is-primary mb-1"
+                                            className="button is-small mb-1 move-forward"
                                             style={{ height: "1rem", padding: "0.25rem" }}
                                             onClick={() => handleMoveMarkdown(markdown, "forward")}
                                             type="button"
                                         >
                                         </button>
                                         <button
-                                            className="button is-small is-primary mb-1"
+                                            className="button is-small mb-1 move-backward"
                                             style={{ height: "1rem", padding: "0.25rem" }}
                                             onClick={() => handleMoveMarkdown(markdown, "backward")}
                                             type="button"