Ability to search for existing HME addresses (#19)

* Ability to search for existing HME addresses

* Linting

* Last item borderless

* Fix borders, error refresh

README.md

@@ -90,7 +90,6 @@ Note: the following console commands are to be executed from the root directory
 
 ### TODOs
 
-- [ ] Ability to search for existing HME addresses
 - [ ] Ability to modify the label and note of existing HME addresses
 - [ ] Options page to validate client token
 - [ ] Expiration of session data stored in Chrome storage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icloud-hide-my-email-browser-extension",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Cross-browser extension enabling the usage of iCloud's Hide My Email service.",
   "license": "MIT",
   "author": "dedoussis",
@@ -26,6 +26,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@vespaiach/axios-fetch-adapter": "^0.3.0",
     "axios": "^0.27.2",
+    "fuse.js": "^6.6.2",
     "lodash.isequal": "^4.5.0",
     "react": "^17.0.2",
     "react-auth-code-input": "^3.2.1",

src/pages/Popup/Popup.css

@@ -0,0 +1,21 @@
+input[type='search']::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  border-radius: 50em;
+  /* The svg data below is sourced from: https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg */
+  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>')
+    no-repeat 50% 50%;
+  background-size: contain;
+  opacity: 0;
+  pointer-events: none;
+  padding-left: 5%;
+}
+input[type='search']:focus::-webkit-search-cancel-button {
+  opacity: 0.3;
+  pointer-events: all;
+}
+
+input[type='search'].dark::-webkit-search-cancel-button {
+  filter: invert(1);
+}