From 96ca1230fa02162337f878b65895fac689cd9b84 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 1 Sep 2023 15:20:07 +0300
Subject: [PATCH] feat: add css for custom autocomplete

---
 .../KeyGeneration/AutocompleteInput.css          | 16 ++++++++++++++++
 .../KeyGeneration/AutocompleteInput.tsx          | 11 ++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
new file mode 100644
index 00000000..5bc7f925
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
@@ -0,0 +1,16 @@
+.suggestion-list {
+  max-height: 100px;
+  overflow-y: scroll;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.suggestion-item {
+  padding: 5px;
+  cursor: pointer;
+}
+
+.suggestion-item:hover {
+  background-color: #f1f1f1;
+}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
index 39164432..fbc6538d 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
@@ -4,6 +4,7 @@ import wordlist from 'web-bip39/wordlists/english'
 
 import { RootState } from '../../../redux/store'
 import { setMnemonic, setWord } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import './AutocompleteInput.css'
 
 type AutocompleteInputProps = {
   index: number
@@ -50,9 +51,13 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
       />
       {isFocused && (
         <div className="suggestion-list">
-          {suggestions.map(s => (
-            <div key={s} className="suggestion-item" onClick={() => handleSuggestionClick(s)}>
-              {s}
+          {suggestions.map(suggestion => (
+            <div
+              key={suggestion}
+              className="suggestion-item"
+              onClick={() => handleSuggestionClick(suggestion)}
+            >
+              {suggestion}
             </div>
           ))}
         </div>