From b25593f634716d6ebff76b32e72d2061c0e9b59a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 4 Sep 2023 14:40:28 +0300
Subject: [PATCH] fix: style of inputs

---
 .../KeyGeneration/AutocompleteInput.css       | 40 +++++++++----------
 .../KeyGeneration/AutocompleteInput.tsx       | 35 ++++++++++------
 .../KeyGeneration/ConfirmRecoveryPhrase.tsx   |  5 ++-
 3 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
index 82ce5f91..960bc37e 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
@@ -3,12 +3,28 @@
   width: 100%;
 }
 
-.autocomplete-input, .suggestion-list {
+.suggestion-list {
   box-sizing: border-box;
-  border: 1px solid #f7f8f9;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
+  max-height: 260px;
+  overflow-y: scroll;
+  border: 1px solid #f9fafa;
+  border-radius: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: #f9fafa;
+  padding: 10px;
+  scrollbar-width: thin;
+  scrollbar-color: #f9fafa transparent;
+}
+
+.autocomplete-input {
+  box-sizing: border-box;
+  border: 2px solid #f7f8f9;
   border-radius: 24px;
   padding: 12px;
-  background-color: #f9f9f9;
+  background-color: #f7f8f9;
   width: 100%;
   font-size: 16px;
 }
@@ -19,29 +35,13 @@
 
 .input-number {
   position: absolute;
-  left: 10px;
-  top: 50%;
-  line-height: 50;
+  left: 15px;
   transform: translateY(-50%);
   pointer-events: none;  
   z-index: 2;
   color: #0D162566;
 }
 
-.suggestion-list {
-  position: absolute;
-  z-index: 1000;
-  max-height: 260px;
-  overflow-y: scroll;
-  border: 1px solid #f7f8f9;
-  border-radius: 24px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  background-color: #f7f8f9;
-  padding: 10px;
-  scrollbar-width: thin;
-  scrollbar-color: #f7f8f9 transparent;
-}
-
 .suggestion-item {
   padding: 12px 16px;
   cursor: pointer;
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
index 39b0486f..468f9ac2 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
@@ -6,6 +6,24 @@ import { RootState } from '../../../redux/store'
 import { setMnemonic, setWord } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
 import './AutocompleteInput.css'
 
+const styleForInput = (index: number, isFocused: boolean) => {
+  const style = {
+    outline: 'none',
+    padding: `12px 16px 12px ${index + 1 < 10 ? '35px' : '45px'}`,
+  }
+
+  if (isFocused) {
+    return {
+      ...style,
+      border: '2px solid #4360DF',
+      marginBottom: '5px',
+      backgroundColor: '#f1f2f4',
+    }
+  } else {
+    return style
+  }
+}
+
 type AutocompleteInputProps = {
   index: number
 }
@@ -42,6 +60,7 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
 
   const handleSuggestionClick = (e: React.MouseEvent, suggestion: string) => {
     e.preventDefault()
+
     setIsFocused(false)
     dispatch(setWord({ index, word: suggestion }))
   }
@@ -54,28 +73,20 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
     setIsFocused(false)
   }
 
-  const styleForInput = () => {
-    const style = { outline: 'none', paddingLeft: index < 10 ? '30px' : '40px' }
-
-    if (isFocused) {
-      return { ...style, border: '2px solid #4360DF', marginBottom: '5px' }
-    } else {
-      return style
-    }
-  }
-
   return (
     <div className="autocomplete-container">
       <div className={isFocused ? 'suggestion-list' : ''}>
         <div className="input-wrapper">
-          <span className="input-number">{index + 1}.</span>
+          <span className="input-number" style={{ top: isFocused ? '42%' : '48%' }}>
+            {index + 1}.
+          </span>
           <input
             className="autocomplete-input"
             value={word}
             onChange={handleInputChange}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
-            style={styleForInput()}
+            style={styleForInput(index, isFocused)}
           />
         </div>
         {isFocused &&
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
index a6f5cb8b..439605d7 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
@@ -1,6 +1,7 @@
 import { Stack, YStack } from 'tamagui'
-import AutocompleteInput from './AutocompleteInput'
 import { Text } from '@status-im/components'
+
+import AutocompleteInput from './AutocompleteInput'
 import KeyGenerationTitle from './KeyGenerationTitle'
 
 const ConfirmRecoveryPhrase = () => {
@@ -14,7 +15,7 @@ const ConfirmRecoveryPhrase = () => {
           gridTemplateColumns: 'repeat(4, 1fr)',
           gap: '20px 40px',
           width: '70%',
-          marginBottom: '20px',
+          marginBottom: '10px',
         }}
       >
         {Array.from({ length: 24 }).map((_, index) => (