Add clear button in search bar

Fixes #156

Author: UnsignedArduino

src/pages/extensions.tsx

@@ -157,10 +157,17 @@ export function Extensions({
           </label>
         </div>
         <div className="col-auto">
+          <style>
+            {`
+              input[type=search]::-webkit-search-cancel-button {
+                -webkit-appearance: searchfield-cancel-button;
+              }
+            `}
+          </style>
           <Tippy content="Search extensions by author, name, or URL!">
             <input
               id="searchBar"
-              type="text"
+              type="search"
               className="form-control"
               placeholder="Search extensions by author, name, or URL!"
               defaultValue={search}

src/pages/tools.tsx

@@ -138,10 +138,17 @@ export function Tools({ appProps, list }: ToolsProps): React.ReactNode {
           </label>
         </div>
         <div className="col-auto">
+          <style>
+            {`
+              input[type=search]::-webkit-search-cancel-button {
+                -webkit-appearance: searchfield-cancel-button;
+              }
+            `}
+          </style>
           <Tippy content="Search tools by author, name, or URL!">
             <input
               id="searchBar"
-              type="text"
+              type="search"
               className="form-control"
               placeholder="Search tools by author, name, or URL!"
               defaultValue={search}