improve: css for change order

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>
                 {

src/components/Navigations/PathNode.css

@@ -46,4 +46,23 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-}
+}
+
+.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;
+}

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"