fix(SPV-1070): improve look and feel for broken paymail autocomplete

package.json

@@ -57,5 +57,8 @@
     "vite": "^5.4.3",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-pwa": "^0.20.5"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

src/components/Input/PaymailAutocomplete.tsx

@@ -35,20 +35,21 @@ export const PaymailAutocomplete = forwardRef<HTMLInputElement, PaymailAutocompl
       <div {...getRootProps()}>
           <PaymailInput {...props} inputProps={getInputProps()}  ref={ref}>
             {children}
-          </PaymailInput>
 
-        {groupedOptions.length > 0 ? (
-          <Listbox {...getListboxProps()}>
-            {(groupedOptions as string[]).map((option, index) => {
+            {groupedOptions.length > 0 ? (
+              <Listbox {...getListboxProps()}>
+                {(groupedOptions as string[]).map((option, index) => {
+
+                  return (
+                    <li {...getOptionProps({ option, index })} key={index}>
+                      {option}
+                    </li>
+                  );
+                })}
+              </Listbox>
+            ) : null}
+          </PaymailInput>
 
-              return (
-                <li {...getOptionProps({ option, index })} key={index}>
-                  {option}
-                </li>
-              );
-            })}
-          </Listbox>
-        ) : null}
       </div>
     );
   },
@@ -57,31 +58,31 @@ export const PaymailAutocomplete = forwardRef<HTMLInputElement, PaymailAutocompl
 PaymailAutocomplete.displayName = 'PaymailAutocomplete';
 
 const Listbox = styled.ul`
-  width: 100%,
-  margin: 0,
-  padding: 0,
-  zIndex: 1,
-  position: absolute,
-  listStyle: none,
-  backgroundColor: ${colors.primaryBackground},
-  overflowX: hidden,
-  overflowY: auto,
-  scrollbarWidth: thin,
-  scrollbarColor: ${colors.secondaryBackground} ${colors.primaryBackground},
-  boxShadow: 0 2px 4px rgba(0,0,0,.25),
-  borderRadius: ${sizes(1)},
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    z-index: 1;
+    position: absolute;
+    list-style: none;
+    background-color: ${colors.thirdBackground};
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: ${colors.secondaryBackground} ${colors.primaryBackground};
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
+    border-radius: ${sizes(1)};
 
-  maxHeight: 200,
-  border: 1px solid rgba(0,0,0,.25),
-  & li.Mui-focused: {
-    backgroundColor: #4a8df6,
-    color: white,
-    cursor: pointer,
-  },
-  & li:active: {
-    backgroundColor: #2977f5,
-    color: white,
-  },
-  & li: {
-    padding: ${sizes(1)},
-  },`
+    max-height: 200px;
+    border: 1px solid rgba(227, 227, 227, 0.25);
+
+    & li.Mui-focused {
+        background-color: ${colors.textHover};
+        color: white;
+        cursor: pointer;
+    }
+
+    & li {
+    background-color: ${colors.thirdBackground};
+    padding: ${sizes(1)};
+},
+`

src/styles/colors.ts

@@ -1,6 +1,7 @@
 export const colors = {
   primaryBackground: '#0e124e',
   secondaryBackground: '#6324f9',
+  thirdBackground: '#502E71',
   infoBackground: 'rgba(42, 163, 219, 1)',
   errorBackground: 'rgb(255, 65, 65, 045)',
   inputBackground: 'rgba(255, 255, 255, 0.2)',
@@ -15,6 +16,7 @@ export const colors = {
   inputEffectBorder: 'rgba(255, 201, 111, 1)',
   balanceValue: '#8d85f4',
   balanceMainValue: '#fdc54f',
+  textHover: '#d9a840',
   tableLink: '#fed06e',
   transactionConfirmed: '#7ef67e',
   successScreen: '#4ad34a',