From 6749bdb7b046147dcddf32130a190b37001e3347 Mon Sep 17 00:00:00 2001
From: Labhansh Agrawal <labhansh.agrawal@gmail.com>
Date: Sun, 21 Feb 2021 20:01:19 +0530
Subject: [PATCH] use svg icons for search box

---
 assets/search-icons.svg      | 29 +++++++++++++++++++++++++++++
 lib/components/searchBox.tsx | 22 ++++++++++++----------
 2 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 assets/search-icons.svg

diff --git a/assets/search-icons.svg b/assets/search-icons.svg
new file mode 100644
index 00000000..48778e75
--- /dev/null
+++ b/assets/search-icons.svg
@@ -0,0 +1,29 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="left-arrow" viewBox="0 0 10 10">
+      <title>left arrow</title>
+      <g stroke-linecap="round">
+        <line x1="0.5" y1="5" x2="8.5" y2="5" stroke="#000" />
+        <line x1="0.5" y1="5" x2="3.5" y2="2" stroke="#000" />
+        <line x1="0.5" y1="5" x2="3.5" y2="8" stroke="#000" />
+      </g>
+    </symbol>
+    <symbol id="right-arrow" viewBox="0 0 10 10">
+      <title>right arrow</title>
+      <g stroke-linecap="round">
+        <line x1="1.5" y1="5" x2="9.5" y2="5" stroke="#000" />
+        <line x1="9.5" y1="5" x2="6.5" y2="2" stroke="#000" />
+        <line x1="9.5" y1="5" x2="6.5" y2="8" stroke="#000" />
+      </g>
+    </symbol>
+    <symbol id="cancel" viewBox="0 0 10 10">
+      <title>cancel</title>
+      <g stroke-linecap="round">
+        <line x1="5" y1="5" x2="8" y2="8" stroke="#000" />
+        <line x1="5" y1="5" x2="8" y2="2" stroke="#000" />
+        <line x1="5" y1="5" x2="2" y2="2" stroke="#000" />
+        <line x1="5" y1="5" x2="2" y2="8" stroke="#000" />
+      </g>
+    </symbol>
+  </defs>
+</svg>
diff --git a/lib/components/searchBox.tsx b/lib/components/searchBox.tsx
index 2b077e56..1cc2fda7 100644
--- a/lib/components/searchBox.tsx
+++ b/lib/components/searchBox.tsx
@@ -32,15 +32,15 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
     return (
       <div style={searchBoxStyling}>
         <input type="text" className="search-box" onKeyUp={this.handleChange} ref={(input) => input?.focus()} />
-        <span className="search-button" onClick={() => this.props.prev(this.searchTerm)}>
-          {'←'}
-        </span>
-        <span className="search-button" onClick={() => this.props.next(this.searchTerm)}>
-          {'→'}
-        </span>
-        <span className="search-button" onClick={() => this.props.close()}>
-          {'✕'}
-        </span>
+        <svg className="search-button" onClick={() => this.props.prev(this.searchTerm)}>
+          <use xlinkHref="./renderer/assets/search-icons.svg#left-arrow" />
+        </svg>
+        <svg className="search-button" onClick={() => this.props.next(this.searchTerm)}>
+          <use xlinkHref="./renderer/assets/search-icons.svg#right-arrow" />
+        </svg>
+        <svg className="search-button" onClick={() => this.props.close()}>
+          <use xlinkHref="./renderer/assets/search-icons.svg#cancel" />
+        </svg>
         <style jsx>
           {`
             .search-box {
@@ -48,6 +48,7 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
               padding: 3px 6px;
               width: 152px;
               border: none;
+              float: left;
             }
 
             .search-box:focus {
@@ -57,7 +58,7 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
             .search-button {
               background-color: #ffffff;
               color: black;
-              padding: 3px;
+              padding: 7px 5.5px;
               text-align: center;
               text-decoration: none;
               display: inline-block;
@@ -66,6 +67,7 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
               cursor: pointer;
               height: 27px;
               width: 24px;
+              float: left;
             }
             .search-button:hover {
               background-color: #e7e7e7;