feat: imporve UI details for search box

src/renderer/components/button/button.scss

@@ -6,6 +6,7 @@
   border-width: 1px;
   color: var(--button-color);
   background-color: var(--button-bg-color);
+  box-sizing: border-box;
 
   &.primary {
     color: white;
@@ -23,5 +24,9 @@
   &[disabled] {
     background-color: rgb(175, 175, 175);
     border: none;
+
+    &:hover {
+      background-color: rgb(175, 175, 175);
+    }
   }
 }

src/renderer/components/searchBox/searchBox.tsx

@@ -3,6 +3,12 @@ import Button from "@pkg/renderer/components/button";
 import { type EditorController, type SearchContext } from "blocky-core";
 import { type CursorState, CursorStateUpdateReason } from "blocky-data";
 import { debounce } from "lodash-es";
+import { FontAwesomeIcon } from "@pkg/renderer/components/fontAwesomeIcon";
+import {
+  faClose,
+  faArrowLeft,
+  faArrowRight,
+} from "@fortawesome/free-solid-svg-icons";
 import "./searchBox.scss";
 
 export interface SearchBoxProps {
@@ -152,13 +158,23 @@ class SearchBox extends Component<SearchBoxProps, SearchBoxState> {
           ref={this.#inputRef}
         />
         <div className="result-display">{this.#resultMessage()}</div>
-        <Button onClick={this.#emitPrev} disabled={this.#prevDisabled()}>
-          {"<"}
+        <Button
+          type="primary"
+          onClick={this.#emitPrev}
+          disabled={this.#prevDisabled()}
+        >
+          <FontAwesomeIcon icon={faArrowLeft} />
         </Button>
-        <Button onClick={this.#emitNext} disabled={this.#nextDisabled()}>
-          {">"}
+        <Button
+          type="primary"
+          onClick={this.#emitNext}
+          disabled={this.#nextDisabled()}
+        >
+          <FontAwesomeIcon icon={faArrowRight} />
+        </Button>
+        <Button onClick={props.onClose}>
+          <FontAwesomeIcon icon={faClose} />
         </Button>
-        <Button onClick={props.onClose}>{"X"}</Button>
       </div>
     );
   }